@import url('https://fonts.googleapis.com/css2?family=Allura&family=Audiowide&family=Delicious+Handrawn&family=Happy+Monkey&family=Indie+Flower&family=Jura:wght@300..700&family=Orbitron:wght@400..900&family=Saira+Stencil+One&family=Shadows+Into+Light+Two&family=Shantell+Sans:ital,wght@0,300..800;1,300..800&family=Silkscreen:wght@400;700&family=Sriracha&family=Tangerine:wght@400;700&family=The+Girl+Next+Door&display=swap');

:root {
    --font-handrawn: "Delicious Handrawn", serif;
    --font-jura: "Jura", serif;

    --main-color: #ffffff;
    --color-2: #1c1327;
    --color-3: #16311a;
    --color-4: #96cbff;

}

body {
    margin: 0;

    background-color: var(--main-color);
    color: var(--color-2);
}

button:hover {
    cursor: pointer;
}

.container {
    padding: 1rem;
}

.container:nth-of-type(odd) {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: "text model";
    align-items: center;
    text-align: center;
}

.container:nth-of-type(even) {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: "model text";
    align-items: center;
    text-align: center;
}

/*  */
.description {
    grid-area: text;
    padding: 4px;
}

.description h1 {
    font-family: var(--font-jura);
    font-size: 3rem;
}

.description p {
    font-family: var(--font-handrawn);
    font-size: 2rem;
}

.container button {
    padding: 4px;
    font-family: var(--font-handrawn);
    color: var(--main-color);
    font-size: 1.5rem;
    background-color: var(--color-2);
    border-radius: 4px;
}

/*  */
.model {
    grid-area: model;
    width: 95%;
    height: 80vh;
    padding: 1rem;

    border-radius: 6px;
    padding: 8px;
    background-color: var(--color-2);
}

footer {
    background-color: var(--color-2);
    color: var(--main-color);
    text-align: center;
    font-size: 1.8rem;
    font-family: var(--font-jura);
    padding: 20px;
}

a {
    color: var(--main-color);
}

a:visited {
    color: var(--main-color);
}

a:hover {
    color: var(--main-color);
    text-decoration: underline wavy 2px var(--main-color);
}
