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

:root {
    --bg: #444;
}

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

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

    margin-bottom: 15vh;
    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;
}

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

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

    border-bottom: 0.5vh #ffffff solid;

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

    font-family: 'Visby Bold';
    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;
}

/* PRICES */

div.cash-app-info {
    color: white;
    font-family: 'Visby Semibold';
    margin-top: 2rem;
    font-size: 3vh;
    height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.cash-app-info > ul {
    padding: 2vh;
    scale: 3;
    margin: 3vh;
    margin-top: 15vh;
}

div.cash-app-info li:after {
    background: #333;
}

div.cash-app-info > ul > li::before {
    box-shadow: 0 0 0 1vh var(--clr), 0 0 0 2vh #333, 0 0 0 2.5vh var(--clr);
}

main[prices] > section {
    height: 50vh;
    width: 100vw;
    padding: 0 5vh;
    display: flex;
}

main[prices] > section > div.image {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

main[prices] > section > div.image > img {
    border-radius: 1vh;
    height: 95%;
    aspect-ratio: 16/9;
}

main[prices] > section > div.text {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

main[prices] > section > div.text > h1 {
    margin-bottom: vh;
    font-size: 5vh;
    color: white;
    font-family: 'Visby Regular';
}

main[prices] > section > div.text > p {
    font-size: 3vh;
    color: rgb(230, 230, 230);
    font-family: 'Visby Regular';
}

section.prices-section-one {
    flex-direction: row-reverse;
}

section.prices-section-three {
    flex-direction: row-reverse;
}

section.prices-section-five {
    flex-direction: row-reverse;
}

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;
    }
}