@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');

.cherry {
    font-family: "Cherry Bomb One", system-ui;
    font-weight: 400;
    font-style: normal;
}

.maven {
    font-family: "Maven Pro", sans-serif;
    font-weight: 500;
    font-style: normal;
}

:root {
    --p1: hsl(255, 75%, 11%);
    --p2: hsl(265, 74%, 18%);
    --p3: hsl(275, 68%, 30%);
    --p4: hsl(285, 62%, 44%);
    --p5: hsl(295, 62%, 58%);
    --p6: hsl(304, 68%, 72%);
    --p7: hsl(315, 80%, 84%);

    --w1: hsl(238, 24%, 6%);
    --w2: hsl(248, 18%, 13%);
    --w3: hsl(254, 13%, 26%);
    --w4: hsl(258, 10%, 44%);
    --w5: hsl(262, 8%, 66%);
    --w6: hsl(266, 7%, 84%);
}


html,
body {
    color: var(--p7);
    background-color: var(--w1);
    overflow-x: hidden;
    font-size: 16px;
    transition: all 0.5s ease;

    & h1 {
        font-size: 4em;
    }

    & h2 {
        font-weight: 700;
        font-size: 2.5em;
    }

    & h3 {
        font-weight: 500;
        font-size: 2em;
    }

    & p {
        font-weight: 600;
        font-size: 1em;
    }

    & a {
        color: var(--p7);
        text-decoration: none;
        transition: color 0.3s ease;
        font-size: 1.2em;

        &:hover {
            color: var(--p5);
        }
    }
}

.sexpad {
    padding: 6em;
}

/*///////////////////////*/
/*///////// nav /////////*/
/*///////////////////////*/

header {

    & .navbar {
        background-color: var(--p3);

        & .navbar-brand:hover {
            & .logo {
                color: var(--p5);
            }
        }

        & .logo {
            font-size: 1.5em;
            color: var(--p7);
            text-shadow: 0 0 8px var(--p1);
            transition: color 0.3s ease;
            user-select: none;
        }
    }
}




/*///////////////////////*/
/*///////// body ////////*/
/*///////////////////////*/

#welcome {
    background-color: var(--w2);
}

#about {
    background-color: var(--w1);
}


.linkstuff {
    color: var(--p7);
    transition: color 0.3s ease;

    &:hover {
        color: var(--p5);
    }
}

footer {
    background-color: var(--p1);
}