@font-face {
    font-family: Inter;
    src: url(../fonts/Inter-var.woff2);
}

@keyframes upDownArrow {
    0% {top: 70vh;}
    100% {top: 69vh;}
}

*::before, *::after{
    box-sizing: border-box;
}

:root{
    background-color: var(--off-white);
    font-family: 'Inter', Arial, sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;

    --off-white: oklch(0.969 0.007 106.522);
    --blue: oklch(0.575 0.216 273.585);
    --blue2: oklch(0.456 0.216 272.167);
    --orange: oklch(0.743 0.144 46.039 / 0.4);
    --red: oklch(0.677 0.187 23.533 / 0.4);
}

h1{
    font-weight: 800;
    color: var(--off-white, oklch(0.969 0.007 106.522));
}

a{
    color: oklch(0 0 0);
}

.header-flex-container, .header-flex-container a{
    color: var(--off-white, oklch(0.969 0.007 106.522));
}

body{
    margin: 0;
}

nav {
    & ul{
        margin: 0;
        padding: 1.25rem 2rem;
        display: flex;
        flex-wrap: nowrap;
        list-style: none;
        gap: 2rem;
        background-color: var(--off-white);

        overflow: auto;
        white-space: nowrap;
        a{
            color: oklch(0 0 0);
            text-decoration: none;
        }

        a:hover{
            text-decoration: underline;
        }
    }

    position: fixed;
    width: 100vw;
    box-shadow: 0 0 1rem oklch(0 0 0 / 0.33);
    z-index: 5;
}

a:hover:not(nav a){
    text-decoration: none;
}

header{
    > div.header-flex-container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 80vh;
        background: linear-gradient(180deg,var(--blue) 25%, var(--blue2) 100%);

        .arrowdownlink{
            position: absolute;
            top: 70vh;
            width: 3.25rem;

            animation: 0.8s ease-in-out alternate infinite upDownArrow;
        }

        .arrowdownlink:hover{
            animation-play-state: paused;
            cursor: pointer;
        }
    }

    > :not(nav){
        text-align: center;
    }
}

.container{
    max-width: 80rem; /* 1280 px */
    margin-inline: auto;
    padding-inline: 1rem;
}

main section{
    margin-block-start: 4rem;
}

.cards{
    display: flex;
    margin-block-start: 2rem;
    flex-wrap: wrap;
    gap: 2rem;

    padding: 0;
    justify-content: center;

    .overlay-link{
        position: absolute;
        inset: 0;
        z-index: 0;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        transition:  200ms ease-in-out;
        mix-blend-mode: hue;
    }

    .overlay-link::after{
        position: absolute;
        content: '';
        bottom: 0;
        left: 0;
        right: 0;
        height: 0;
        width: 100%;
        background-color: var(--blue);
        border-radius: 50%;
        transition: all 300ms ease-in-out;
    }

    .overlay-link:hover::after{
        height: 100%;
        border-radius: 1rem;
    }

    li{
        background-color: oklch(1 0 89.876);
        box-shadow: 0 0 1rem oklch(0 0 0 / 0.33);
        list-style: none;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 0.75rem;
        border-radius: 1.25rem;
        width: fit-content;

        .readmore{
            display: flex;
            align-items: center;
        }

        .arrowright{
            max-width: 2rem;
            order: 1;

            transition: margin-inline-start 150ms ease-in-out;
        }

        h3{
            margin: 1.5rem 0.5rem;
        }

        a{
            margin: 0 0.5rem 0.5rem;
        }

        div > a, .arrowright{
            z-index: 1;
        }

        transition: scale ease-in-out 120ms;

        a:hover + .arrowright{
            margin-inline-start: 0.5rem;
        }
    }

    li:hover{
        scale: 1.05;
    }

    li:active{
        scale: 1.02;
    }

    img{
        max-width: 22rem;
        width: 100%;
        order: -1;
        border-radius: 1rem;
    }
}

.visually-hidden {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.socials{
    padding: 0;
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 2rem;


    li{
        transition: scale ease-in-out 120ms;
    }
    img{
        width: 3rem;
    }

    li:hover{
        scale: 1.1;
    }

    li:active{
        scale: 1.02;
    }
}

footer{
    margin: 5rem 0 3.5rem 0;
    text-align: center;
}

.l{
    justify-content: flex-start;
}

p:not(footer > p){
    max-width: 52rem;
}

form{
    div:has(textarea, input[type="text"]) label{
        display: block;
        margin-block-start: 1rem;
    }

    .error{
        color: oklch(0.533 0.219 29.234);
        margin-inline-start: 0.5rem;
    }

    input[type="submit"]{
        margin-block-start: 1rem;
        padding: 0.5rem 1rem;
    }
}

.media-query-bar{
    border: 0.2rem solid black;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 2rem;

    img{
        border-radius: 0.7rem;
        width: 10rem;
        height: fit-content;
        object-fit: cover;
    }

    &:not(:last-child){
        margin-block-end: 1rem;
    }
}
.media-query-bar-vert{
    border: 0.2rem solid black;
    width: 80%;
    padding: 1rem;
    order: -1;
}

.media-query-container{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
}

.media-query-hidden{
    display: none;
}

fieldset{
    width: fit-content;
}

@media screen and (min-width: 760px){
    .media-query-bar{
        background-color: var(--orange);

        img{
            order: -1;
        }
    }
    .media-query-bar-vert{
        order: 1;
        background-color: var(--red);
        width: fit-content;
    }

    .media-query-container{
        flex-direction: row;
    }
}

@media screen and (min-width: 1200px){
    .media-query-hidden{
        display: block;
    }
}