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

:root {
    /* color variables */
    --content-primary: #FFFFFF;
    --content-secondary: #C7C9CC;
    --content-tertiary: #D9D9D9;
    --content-brand: #C58DE7;
    --color-inverse: #030203;
    /* background colors */
    --bg-primary: #020202;
    --bg-secondary: #111012;
    --bg-tertiary: #24222E;
    --bg-brand: #C58DE7;
    --bg-gray: #3D3D3D;
    /* accent colors */
    --accent-pink: #D586E0;
    --accent-blue: #91A1FA;
    --accent-green: #77C0AA;
    --accent-lime: #D1DC97;
    --accent-red: #E9A9B3;
    /* gradient colors */
    --border-gradient: #77C0AF 0%, #D1DC97 14.84%, #E9A9B3 32.15%, #D586E0 65.79%, #91A1FA 84.58%;
    --bg-gradient: #D586E0 0%, #91A1FA 98.93%;
    --content-gradient: #C7C9CC 0%, #3D3D3D 100%;

    /* font variables */
    --display-lg: 800 4.5rem/1.3 "Sora", sans-serif;
    --display-md: 800 2.5rem/1.3 "Sora", sans-serif;
    --display-sm: 700 2rem/1.3 "Sora", sans-serif;
    --overline: 700 1rem/1.5 "Roboto Mono", monospace;
    --paragraph-lg: 600 1rem/1.5 "Roboto Flex", sans-serif;
    --paragraph-md: 600 .875rem/1.5 "Roboto Flex", sans-serif;
    --paragraph-sm: 600 .75rem/1.5 "Roboto Flex", sans-serif;
    --label-md: 700 1.25rem/1.5 "Roboto Flex", sans-serif;
    --label-sm: 700 1rem/1.5 "Roboto Flex", sans-serif;
}

.flex {
    display: flex;
}

.item-center {
    align-items: center;
}

body {
    height: 100vh;
    width: 100vw;
    background-color: var(--bg-primary);
    background-image: url(assets/bg-photo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode:difference;
}

header {
    padding-left: 7.5rem;
    padding-top: 4.75rem;
    margin-bottom: 5.5625rem;
    gap: .6875rem;
    
    & > a {
       max-height: 38px; 
    }

    & a {
        text-decoration: none;
        text-transform: uppercase;
        color: var(--content-primary);
        letter-spacing: -4%;
        font: 800 1.5rem/1.3 "Sora", sans-serif;

        & img {
            padding: 2px;
            transition: 0.5s ease-in-out;
        }        
    }

    &:has(:hover) {
        & img {
            transform: rotate(-180deg);
        }
    }
}

.container {
    padding-inline: clamp(2.1875rem, 10.4vw, 8.375rem);

    & .about {
        width: 31.75rem;
        text-wrap: nowrap;
    }
    
    & .about-info {
        display: flex;
        flex-direction: column;
        margin-bottom: 2.375rem;
        gap: .75rem;

        & p {
            font: var(--overline);
            text-transform: uppercase;
            background: linear-gradient(90deg, var(--content-gradient));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
        }

        & h1 {
            font: var(--display-lg);
            color: var(--content-primary);
            text-transform: uppercase;
        }
    }

    .questions {
        text-wrap: wrap;
        display: flex;
        flex-direction: column;
        gap: 2rem;

        & img {
            width: 1.25rem;
            height: 1.25rem;
        }

        & div {
            gap: .5rem;
        }

        & #question-title {
            color: var(--content-brand);
            font: var(--paragraph-md);
        }

        & p {
            font: var(--paragraph-sm);
            color: var(--content-secondary);
        }
    }
}