@font-face {
    font-family: tooCuteFont;
    src: url(../font/tfc-font.ttf);
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes cursor {
    0% {
        cursor: url(../img/cursor/1/butterfly1.png), auto;
    }

    10% {
        cursor: url(../img/cursor/1/butterfly2.png), auto;
    }

    20% {
        cursor: url(../img/cursor/1/butterfly3.png), auto;
    }

    30% {
        cursor: url(../img/cursor/1/butterfly4.png), auto;
    }

    40% {
        cursor: url(../img/cursor/1/butterfly5.png), auto;
    }

    50% {
        cursor: url(../img/cursor/1/butterfly6.png), auto;
    }

    60% {
        cursor: url(../img/cursor/1/butterfly7.png), auto;
    }
}

@keyframes cursor {
    0% {
        cursor: url(../img/cursor/1/butterfly1.png), auto;
    }

    10% {
        cursor: url(../img/cursor/1/butterfly2.png), auto;
    }

    20% {
        cursor: url(../img/cursor/1/butterfly3.png), auto;
    }

    30% {
        cursor: url(../img/cursor/1/butterfly4.png), auto;
    }

    40% {
        cursor: url(../img/cursor/1/butterfly5.png), auto;
    }

    50% {
        cursor: url(../img/cursor/1/butterfly6.png), auto;
    }

    60% {
        cursor: url(../img/cursor/1/butterfly7.png), auto;
    }
}

@media (hover: hover) {
    .links:hover {
        filter: drop-shadow(0 0 10px rgb(20, 33, 206));
    }

    h2:hover {
        text-decoration: underline;
    }

    .footer-name:hover {
        text-decoration: underline;
    }

    .emoji:hover {
        filter: blur(2px);
    }
}

.links:active {
    filter: drop-shadow(0 0 10px rgb(20, 33, 206));
}

h2:active {
    text-decoration: underline;
}

.footer-name:active {
    text-decoration: underline;
}

.emoji:active {
    filter: blur(2px);
}

.main-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: clamp(1rem, 2vh, 1.5rem);
}

.title-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.5rem, 1vh, 0.8rem);
}

.links-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.links {
    animation: fadeIn linear 4s;
    -webkit-animation: fadeIn linear 4s;
    -moz-animation: fadeIn linear 4s;
    -o-animation: fadeIn linear 4s;
    -ms-animation: fadeIn linear 4s;
    image-rendering: pixelated;
    width: clamp(40px, 6vw, 56px);
    height: clamp(40px, 6vw, 56px);
}

h1 {
    text-shadow: 1px 1px 2px black, 0 0 10px rgb(22, 22, 231), 0 0 3px rgb(7, 7, 170);
    font-size: clamp(28px, 6vw, 45px);
    margin: 0;
    user-select: none;
    -webkit-user-select: none;
    font-family: tooCuteFont;
    animation: fadeIn linear 2s;
    -webkit-animation: fadeIn linear 2s;
    -moz-animation: fadeIn linear 2s;
    -o-animation: fadeIn linear 2s;
    -ms-animation: fadeIn linear 2s;
}

h2 {
    text-shadow: 1px 1px 2px black, 0 0 5px rgb(22, 22, 231), 0 0 3px rgb(7, 7, 170);
    font-size: clamp(16px, 3.5vw, 25px);
    margin: 0;
    user-select: none;
    -webkit-user-select: none;
    font-family: tooCuteFont;
    animation: fadeIn linear 2s;
    -webkit-animation: fadeIn linear 2s;
    -moz-animation: fadeIn linear 2s;
    -o-animation: fadeIn linear 2s;
    -ms-animation: fadeIn linear 2s;
}

.footer-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0.5rem;
}

.footer-text {
    color: rgb(204, 107, 191);
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    font-family: tooCuteFont;
    font-size: clamp(10px, 2vw, 16px);
    animation: fadeIn linear 6s;
    -webkit-animation: fadeIn linear 6s;
    -moz-animation: fadeIn linear 6s;
    -o-animation: fadeIn linear 6s;
    -ms-animation: fadeIn linear 6s;
    margin: 0;
}

.secret-text {
    color: rgb(204, 107, 191);
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    font-family: tooCuteFont;
    font-size: clamp(9px, 1.8vw, 14px);
    animation: fadeIn linear 3s;
    -webkit-animation: fadeIn linear 3s;
    -moz-animation: fadeIn linear 3s;
    -o-animation: fadeIn linear 3s;
    -ms-animation: fadeIn linear 3s;
    margin: 0;
}

.emoji {
    image-rendering: pixelated;
    vertical-align: middle;
    width: clamp(16px, 2vw, 20px);
    height: clamp(16px, 2vw, 20px);
}

.footer-name {
    text-shadow: 1px 1px 2px black, 0 0 5px rgb(160, 98, 211), 0 0 3px rgb(128, 91, 123);
    color: rgb(204, 107, 191);
    text-decoration: none;
    cursor: url(../img/cursor/1/butterfly1.png), auto;
    -webkit-animation: cursor 1500ms infinite;
    animation: cursor 1500ms infinite;
}

body {
    background: url('../gif/landscape.gif') repeat-y center center fixed;
    background-size: cover;
}

@media screen and (min-width: 2560px) and (max-width: 3839px) {
    body {
        background: url('../gif/landscape-2k.gif') repeat-y 100% 100% fixed;
        background-size: cover;
    }
}

@media screen and (min-width: 3840px) {
    body {
        background: url('../gif/landscape-4k.gif') repeat-y 100% 100% fixed;
        background-size: cover;
    }
}

body {
    cursor: url(../img/cursor/1/butterfly1.png), auto;
    -webkit-animation: cursor 1500ms infinite;
    animation: cursor 1500ms infinite;
}

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

html {
    scrollbar-width: none;
}

.project-section {
    display: flex;
    justify-content: center;
    text-align: center;
    animation: fadeIn linear 6s;
    -webkit-animation: fadeIn linear 6s;
    -moz-animation: fadeIn linear 6s;
    -o-animation: fadeIn linear 6s;
    -ms-animation: fadeIn linear 6s;
}

.project-text {
    color: rgb(83, 83, 207);
    font-family: tooCuteFont;
    font-size: clamp(14px, 2.5vw, 19px);
    text-shadow: 1px 1px 2px black, 0 0 10px rgb(22, 22, 231), 0 0 5px rgb(7, 7, 170);
    user-select: none;
    -webkit-user-select: none;
    margin: 0;
}

.project-highlight {
    color: rgb(204, 107, 191);
    text-shadow: 1px 1px 2px black, 0 0 8px rgb(160, 98, 211), 0 0 3px rgb(128, 91, 123);
    cursor: url(../img/cursor/1/butterfly1.png), auto;
    -webkit-animation: cursor 1500ms infinite;
    animation: cursor 1500ms infinite;
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .project-highlight:hover {
        text-decoration: underline;
        filter: drop-shadow(0 0 8px rgb(204, 107, 191));
    }
}

.project-highlight:active {
    text-decoration: underline;
    filter: drop-shadow(0 0 8px rgb(204, 107, 191));
}