main.css

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --font-family: 'Itim', cursive;
    --font-size: 16px;
    --color-blue-600: #20708D;
    --color-green-400: #42B59F;
    --color-orange-800: #E06805;
    --color-neutral-800: #2F4F4F;
    --color-orangeYellow-000: #FFFCE7;
    --color-orangeYellow-900: #EE7B1D;
    --color-pink-300: #F17388;
    --color-pink-600: #F92953;
    --color-pink-600: #F92953;
}

.container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: space-between;
    width: 100vw;
}
.container__face {
    align-items: center;
    display: flex;
    height: 70%;
    justify-content: center;
    width: 100%;
}
.face {
    border-radius: 50%;
    height: 325px;
    min-height: 200px;
    min-width: 200px;
    width: 325px;
}
.container__select {
    height: fit-content;
    padding: 0 16px 64px 16px;
    width: 100%;
}
.select {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 40%);
}
.container__random-face {
    grid-column: 1/3;
    grid-row: 1/2;
}
.container__select-button {
    grid-column: 1/2;
    grid-row: 2/3;
}
.container__update {
    grid-column: 2/3;
    grid-row: 2/3;
}

.select-Button, .update, .random-face {
    border: none;
    border-radius: 8px;
    color: var(--color-orangeYellow-000);
    display: flex;
    font-family: var(--font-family);
    font-size: var(--font-size);
    height: fit-content;
    place-content: center;
    padding: 12px;
    text-align: center;
    width: 100%;
}

/* small landscape styles */
@media (min-width: 740px) and (orientation: landscape) {
    .container {
        display: grid;
        gap: 16px;
        grid-template-columns: 100%;
        grid-template-rows: 80% 20%;
    }
    .container__face {
        grid-column: 1/2;
        grid-row: 1/2;
        height: 100%;
    }
    .face {
        height: 270px;
        width: 270px;
    }
    .container__select {
        grid-column: 1/2;
        grid-row: 2/3;
    }
    .select {
        display: grid;
        gap: 8px;
        grid-template-columns: 50% 23.5% 23.5%;
        grid-template-rows: 100%;
        height: 100%;
        padding: 0 16px;
        width: 100%;
    }
    .select-Button, .update, .random-face {
        font-size: var(--font-size);
        height: fit-content;
        padding: 10px 0rem;
        width: 100%;
    }
    .container__random-face {
        grid-column: 1/2;
        grid-row: 1/2;
    }
    .container__select-button {
        grid-column: 2/3;
        grid-row: 1/2;
    }
    .container__update {
        grid-column: 3/4;
        grid-row: 1/2; 
    }
}

/* medium portrait styles */
@media (min-width: 768px) {
    :root {
        --font-size: 18px;
    }
    .container__face {
        height: 80%;
    }
    .face {
        height: 550px;
        width: 550px;
    }  
    .container__select {
        padding: 0 32px 48px 32px;
    }
    .select-Button, .update, .random-face {
        padding: 16px;
        height: 100%;
    } 
}

/* medium portrait landscape styles */
@media (min-width: 768px)  and (orientation: landscape) {
    .container {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .container__face {
        height: 80%;
    }
    .face {
        height: 550px;
        width: 550px;
    }
    .container__select {
        height: 20%;
        padding: 0 32px;
    }
    .select {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 40%);
    }
    .container__random-face {
        grid-column: 1/3;
        grid-row: 1/2;
    }
    .container__select-button {
        grid-column: 1/2;
        grid-row: 2/3;
    }
    .container__update {
        grid-column: 2/3;
        grid-row: 2/3;
    }
    .select-Button, .update, .random-face {
        height: fit-content;
        padding: 16px 0;
        width: 100%;
    } 
}

/* large styles */
@media (min-width: 1200px) {
    :root {
        --font-size: 24px;
    }
    .container__face {
        height: 80%;
    }
    .face {
        height: 550px;
        margin: 0;
        margin-top: 8px;
        width: 550px;
    } 
    .container__select {
        height: 20%;
    }
    .select {
        gap: 16px;
        max-width: 1500px;
    }
    .select-Button, .update, .random-face {
        height: 100%;
        padding: 8px 0;
    } 
}

.random-face {
    background-color: var(--color-green-400);
    color: var(--color-neutral-800);
}
.random-face:hover {
    background-color: var(--color-blue-600);
    color: var(--color-orangeYellow-000);
}

.select-Button {
    background-color: var(--color-pink-300);
}
.select-Button:hover {
    background-color: var(--color-pink-600);
}

.update{
    background-color: var(--color-orangeYellow-900);
}
.update:hover {
    background-color: var(--color-orange-800);
}