@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300&family=Funnel+Display:wght@400&display=swap');

:root{
    --background: #153424;
    --accent: #b6faca;
    --border: rgba(182, 250, 202, 0.5);

    --card-background: 180deg, rgba(182, 250, 202, 0.3) 0%, rgba(119, 219, 153, 0.15) 100%;

    --text: #ffffff;
    --text-lower-contrast: #bfbfbf;

    --title-font: "Funnel Display", sans-serif;
    --text-font: "Archivo", sans-serif;
}

body,
html {
    width: 100%;
    height: 100%;
    background-color: var(--background);
}

* {
    margin: 0;
    padding: 0;
    transition: all 300ms cubic-bezier(0, 1, 1, 1);
    scroll-behavior: smooth;
    box-sizing: border-box;

    a:focus {
        box-shadow: none;
    }

    text-decoration: none;
}

h1, h2, p, a{
    color: var(--text);
    font-style: normal;
}

h1, h2{
    font-family: var(--title-font);
}

p, a{
    font-family: var(--text-font);
}

b{
    text-decoration: underline;
}

main{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 2rem 2rem 0 2rem;

    section{
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
        gap: 1rem;
        overflow-y: hidden;

        & > :first-child{
            margin-top: 2rem;
        }

        & > :last-child{
            margin-bottom: 3rem;
        }

        button{
            display: flex;
            flex-direction: row;
            width: 65%;
            height: auto;

            border: 2px solid var(--border);
            backdrop-filter: blur(2.5px);
            background-blend-mode: plus-lighter;
            background: linear-gradient(var(--card-background));

            img{
                aspect-ratio: 4/3;
                width: auto;
                height: 11rem;
                background-color: #808080;
                border-right: 2px solid var(--border);
            }

            div{
                display: flex;
                flex-direction: column;
                width: 100%;
                justify-content: center;
                align-items: start;
                text-align: start;
                gap: 0.5rem;
                padding: 1.5rem 1rem;
            }

            h1{
                font-size: 1.25rem;
            }

            p{
                font-size: 1rem;
            }

            &:hover{
                filter: brightness(1.2);
                cursor: pointer;
            }

            &:active{
                filter: blur(0.95px);
                backdrop-filter: blur(0px);
                transform: scale(0.95);
            }
        }


        img{
            mix-blend-mode: luminosity;
            filter: opacity(0.4);
        }
    }
}

header{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    width: 100%;
    gap: 2rem;
    padding-bottom: 3rem;

    border-bottom: 1px solid var(--accent);

    h1{
        font-size: 3rem;
    }

    div{
        display: flex;
        flex-direction: column;
        gap: 1rem;

        span{
            color: var(--background);
        }

        a{
            font-size: 1.25rem;
            color: var(--text-lower-contrast);
            line-height: 1.75rem;

            &:hover{
                color: var(--text);
                span{
                    color: var(--text);
                }
            }

            &:focus{
                transform: scale(1.05);
                background-color: var(--text);
                color: var(--background);
                span{
                    color: var(--background);
                }
            }
        }
    }
}

.decorative-bottom-gradient{
    width: 100%;
    height: 4rem;
    background: linear-gradient(180deg, transparent 0%, var(--background) 90%);
    position: fixed;
    bottom: 0;
    z-index: 1;
}

@media(orientation: landscape){
body{
    display: flex;
    justify-content: center;
    align-items: center;
}

    main{
        max-width: 65%;
        justify-content: center;
        align-items: center;

        section{
            height: auto;
        }
    }
}

.marquee{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.marquee-track{
    display: flex;
    width: max-content;
    height: 100%;
    animation: marquee 30s linear infinite;

    img{
        height: 100%;
        width: auto;
        flex-shrink: 0;
    }
}

@keyframes marquee{
    to{ transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
    .marquee-track{ animation: none; }
}