@font-face {
    font-family: "Neue";
    src: url("fonts/NeueHelveticaBQ-Bold.otf");
}

.index-main-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-container {
    width: 300px;
    height: 300px;
}

.logo-top {
    position: absolute;
    width: 300px;
    height: 300px;
    z-index: 2;
    background: repeating-conic-gradient(transparent 0% 25%, black 0% 50%) 100% / 50px 50px
}
.logo-bottom {
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: linear-gradient(
        145deg,
        hsl(309deg 100% 62%) 0%,
        hsl(309deg 100% 62%) 20%,
        hsl(230deg 100% 76%) 50%,
        hsl(195deg 100% 50%) 59%,
        hsl(187deg 100% 48%) 69%,
        hsl(166deg 59% 72%) 76%,
        hsl(164deg 52% 79%) 80%,
        hsl(189deg 66% 81%) 84%,
        hsl(206deg 85% 87%) 88%,
        hsl(236deg 66% 92%) 92%,
        hsl(303deg 36% 90%) 100%
      );
    background-size: 600% 600%;
    transition: background-size 5s;
    transition-timing-function: cubic-bezier(.17,.67,.53,1);
}

.logo-container:hover .logo-bottom{
    background-size: 100% 100%;
    transition: background-size 3s cubic-bezier(.17,.67,.53,1);
}

.logo-link {
    position: absolute;
    width: 300px;
    height: 300px;
    z-index: 3;
}

.links-main-container {
    height: 100vh;
    align-items: center;
    font-family: "Neue";
    font-weight: bold;
    padding-bottom: 4em;
}

.list-container ul {
    text-align: center;
    list-style: none;
    padding: 25px;
    padding-top: 0;
}

.list-container li:first-child {
    padding-top: 0;
}

.list-container li {
    padding: 1.5px;
}

.list-container a {
    font-size: clamp(200%, 9vw, 50px);
    background: -webkit-linear-gradient(#ffffff, #000000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    background-size: 100% 100%;
    transition: background-size 0.5s cubic-bezier(.17,.67,.53,1);
}

.list-container a:hover {
    background-size: 400% 500%;
    transition: background-size 0.5s cubic-bezier(.17,.67,.53,1);
}

.links-main-container p {
    text-align: center;
    font-size: clamp(120%, 5vw, 30px);
}