* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

:root {
    --bg: #444;
}

::-webkit-scrollbar {
    display: none;
}

body {
    width: 100vw;
    text-align: center;
    margin: 0;
    background: #333;

    overflow: hidden scroll;
}

h1, p {
    margin: 0;
}

header {
    z-index: 300;
    top: -10vh;
    position: fixed;
    
    height: 10vh;
    width: 100vw;
    background: rgb(131,58,180);
    background: linear-gradient(135deg, hsl(199, 97%, 33%) 0%, hsl(228, 100%, 25%) 50%, hsl(274, 100%, 39%) 100%);

    border-bottom: 0.5vh black solid;
    box-sizing: border-box;

    display: flex;

    transition: top 0.2s ease-in-out;
}

header > a {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: white;

    font-family: 'Visby Heavy';
    font-size: 6vh;

    text-decoration: none;
    height: 100%;
    transition: color 0.25s ease-in-out, text-shadow 0.25s ease-in-out, font-family 0.25s ease-in-out;
}

header > a:not([active]):hover {
    color: crimson;
    transform: none;
    animation-name: linkHover;
    animation-timing-function: ease;
    animation-duration: 0.5s;
    text-shadow: 0px 0px 3px crimson;
}

header > a[active] {
    color: hsl(140deg 86% 50%);
    text-shadow: 0px 0px 3px hsl(140deg 86% 50%);
}

main {
    height: auto;
    margin-bottom: 15vh;
}

div.topPart {
    color: white;
    height: 60vh;
    width: 100vw;

    background: rgb(69,194,252);
    background: linear-gradient(135deg, hsl(199, 97%, 33%) 0%, hsl(228, 100%, 25%) 50%, hsl(274, 100%, 39%) 100%);

    border-bottom: 0.5vh #ffffff solid;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-family: 'Visby Bold';
    text-transform: lowercase;
    font-size: 4vh;
}

div.topPart > p {
    z-index: 2;
    text-transform: uppercase;
}

div.topPart > div {
    z-index: 2;
    display: flex;
}

div.topPart > div > p {
    font-size: 20vh;
    transition: color 0.1s ease-in-out;
}

div.topPart > div > p:hover {
    color: hsl(299, 97%, 33%);
    text-shadow: 0px 0px 7px hsl(299, 97%, 33%);

    cursor: pointer;
    animation-name: linkHover;
    animation-timing-function: ease;
    animation-duration: 0.5s;
}

#bigLetter {
    text-transform: uppercase;
    position: absolute;
    filter: blur(0.5vh);
    color: hsla(0, 0%, 0%, 70%);
    font-size: 60vh;
    z-index: 1;
}

.bigLetterAnimate {
    animation-name: bigLetter;
    animation-timing-function: ease;
    animation-duration: 0.3s;
}

footer {
    height: 15vh;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    background: #444;
    position: fixed;
    bottom: 0;
}

ul {
    display: flex;
    position: relative;
    gap: 3vw;
}

ul li {
    position: relative;
    list-style: none;
    width: 30vw;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.5s;
}
ul li:before {
    rotate: 0deg;
    content: "";
    position: absolute;
    inset: 2vw;
    box-shadow: 0 0 0 1vh var(--clr), 0 0 0 2vh var(--bg), 0 0 0 2.5vh var(--clr);
    transition: 0.5s;
}

ul li:hover:before {
    inset: 0;
}

ul li:after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg);
}
ul li:hover {
    z-index: 1000;
    transform: scale(0.75);
}

ul li a {
    position: relative;
    text-decoration: none;
    color: var(--clr);
    font-size: 4vh;
    z-index: 10;
    transition: 0.5s;
}

ul li svg {
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
    width: 4vh;
    height: 4vh;
}

ul li a:hover {
    font-size: 7vh;
    filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr)) drop-shadow(0 0 60px var(--clr));
}

ul li a:hover svg {

    width: 9vh;
    height: 9vh;
}

@keyframes bigLetter {
    0% {
        scale: 0.8;
    }

    50% {
        scale: 1.2;
    }

    100% {
        scale: 1;
    }
}

@keyframes linkHover {
    0% {
        scale: 0.8;
    }

    50% {
        scale: 1.2;
    }

    100% {
        scale: 1;
    }
}