/* styles for all pages*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: 'Syne Mono', sans-serif;
}

:root {
    --black: #000;
    --green: #83ccaf;
    --pink: #ec6ead;
    --white: #fff;
    --yellow: #f3ad08;
}

body {
    position: relative;
    font-size: 1.2rem;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 4rem 4rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 50;
}

/* ---------logo----------- */

header img:first-child {
    width: 60px;
}

/* logo shake animation: https://www.w3schools.com/howto/howto_css_shake_image.asp */
header img:hover {
    animation: shake 0.5s infinite;
    cursor: pointer;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

/* ------------🍔 menu toggle------------- */
header .toggle {
    border: 0;
    background: transparent;
}

header .toggle:focus {
    outline: none;
}

.toggle .fas {
    color: var(--black);
    font-size: 40px;
}

.toggle .fas:hover {
    filter: brightness(20%);
    cursor: pointer;
}

/* ---------dripping paint nav-------------- */
.menu {
    position: relative;
    background-color: var(--yellow);
    background: linear-gradient(to top, var(--yellow), var(--pink));
    height: 51vh;
    transform: translateY(-200%);
    opacity: 0;
}

.menu.active {
    transform: translateY(0%);
    opacity: 1;
    transition: transform 1s ease-in-out, opacity 1.4s ease-in;
    z-index: 4;
}

.menu .blob {
    background-image: url(/assets/all/wave.svg);
    background-repeat: no-repeat;
    height: 100vh;
    transform: translateY(50%);
}

.menu>ul {
    position: absolute;
    top: 60%;
    left: 50%;
    list-style-type: none;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.menu li {
    margin: 2.5rem 0;
    transform: rotate(-6deg);
}

.menu li a {
    padding: .8rem 1.2rem;
    background-color: var(--black);
    color: var(--white);
    border-radius: .5em;
    font-weight: bold;
    font-family: 'Fredoka One', monospace;
    letter-spacing: 2px;
    text-decoration: none;
}

.menu li a:hover,
.menu li a:focus {
    background-color: var(--green);
    text-shadow: 2.3px 1px rgba(0, 0, 0, 0.8);
    border-radius: 50% 20% / 10% 40%;
    letter-spacing: 5px;
    transition: letter-spacing .8s ease-out, background-color .5s ease-in;
    cursor: pointer;
}

.menu li a:active {
    background-color: var(--pink);
    background: linear-gradient(45deg, var(--yellow), var(--pink));
}

/* link styles for current page */
.menu li a[data-bs-toggle="tooltip"] {
    background: linear-gradient(45deg, var(--pink), var(--yellow));
    color: var(--black);
    letter-spacing: 5px;
    text-decoration: underline;
    text-decoration-color: var(--pink);
    text-decoration-style: double;
    text-shadow: none;
    border-radius: 50% 20% / 10% 40%;
}

.menu li a[data-bs-toggle="tooltip"],
.menu li a[data-bs-toggle="tooltip"]:hover {
    cursor: none;
}

.menu li a[data-bs-toggle="tooltip"]:hover {
    text-decoration-color: var(--green);
}