* {
    padding: 0;
    margin: 0;    
    font-family: Arial, Helvetica, sans-serif;
}

section {
    display: flex;
    height: 100vh;
    width: 100vw;
    background-color: #111111;
}

div.header-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: fit-content;
    margin: auto;
    color: #f9b042;
}

div.header-text:hover h1 {
    text-shadow: 1px 1px #b68336cc,
    2px 2px #796b58cc,
    3px 3px #90c763cc,
    4px 4px #796b58cc,
    5px 5px #796b58cc,
    6px 6px #aa926dcc;
}

div.header-text:hover p {
    text-shadow: -1px -1px #b68336cc,
    -2px -2px #796b58cc,
    -3px -3px #90c763cc,
    -4px -4px #796b58cc;
}

h1 {
    font-size: 2.5rem;

    text-decoration-thickness: .5rem;
    text-shadow: 2px 2px #b68336cc;
    transition: all cubic-bezier(0.68, -0.55, 0.265, 1.55) .5s;
}

p {
    text-decoration-thickness: .75rem;
    text-shadow: 1px 1px #b68336cc;
    font-size: .875rem;
    
    transition: all cubic-bezier(0.68, -0.55, 0.265, 1.55) .5s;
}

h1::selection,
p::selection {
    opacity: 1;
    background: #b68336cc;
}


@keyframes gridWobble {
    0%, 100% {
        background-size: 50px 50px;
    }
    50% {
        background-size: 53px 53px;
    }
}

@media (min-width: 768px) {
div.header-text:hover h1 {
    text-shadow: 1px 1px #b68336cc,
        2px 2px #796b58cc,
        3px 3px #90c763cc,
        4px 4px #796b58cc,
        5px 5px #796b58cc,
        6px 6px #aa926dcc,
        7px 7px #5e5445cc,
        8px 8px #31281bcc,
        9px 9px #21a567cc,
        10px 10px #80715ccc,
        11px 11px #3a2d1acc,
        12px 12px #867e71cc;
    }

    div.header-text:hover p {
        text-shadow: -1px -1px #b68336cc,
        -2px -2px #796b58cc,
        -3px -3px #90c763cc,
        -4px -4px #796b58cc,
        -5px -5px #796b58cc,
        -6px -6px #aa926dcc,
        -7px -7px #5e5445cc;
    }

    h1 {
        font-size: 5rem;

        text-decoration-thickness: .5rem;
        text-shadow: 4px 4px #b68336cc;
        transition: all cubic-bezier(0.68, -0.55, 0.265, 1.55) .5s;
    }

    p {
        text-decoration-thickness: .75rem;
        text-shadow: 3px 3px #b68336cc;
        font-size: 1.75rem;
        
        transition: all cubic-bezier(0.68, -0.55, 0.265, 1.55) .5s;
    }

}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(#f9b04222 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 0;
    pointer-events: none;
}