@font-face {
    font-family: Aqua-Font;
    src: url("assest/font/aqua.ttf");
}

body {
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
}

#bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: auto;
}

@media (max-aspect-ratio: 6000/3862) {
    #bg {
        height: 100vh;
        width: auto;
    }
}

#main-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.page {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

#main-title {
    position: relative;
    font-family: Aqua-Font;
    top: 30vh;
    text-align: center;
    color: white;
    font-size: 5vw;
}

#sub-title {
    position: relative;
    font-family: Aqua-Font;
    top: 25vh;
    text-align: center;
    color: white;
    font-size: 1.5vw;
}

@keyframes appear1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 80;
    }
}

@-webkit-keyframes appear1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 80;
    }
}

@-moz-keyframes appear1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 80;
    }
}

.appear1 {
    animation: appear1 2s;
    -webkit-animation: appear1 2s;
    -moz-animation: appear1 2s;
    opacity: 100%;
    visibility: visible;
}

@media (max-aspect-ratio: 1) {
    #main-title {
        font-size: 5vh;
        top: 30vh;
    }
}

#links {
    width: 80%;
    position: absolute;
    bottom: 5%;
    padding-left: 10%;
    text-align: center;
}

.link {
    display: inline-block;
    padding: 1vw;
    text-align: center;
    width: 5vw;
}

.link-name {
    font-family: Aqua-Font;
    text-align: center;
    color: white;
    font-size: 0.8vw;
}

.link-icon {
    margin-top: 1vw;
    font-family: Aqua-Font;
    text-align: center;
    color: white;
    font-size: 2vw;
    transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
}

.link-icon:hover {
    transform: scale(1.2);
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

@media (max-aspect-ratio: 3/4) {
    .link-name {
        font-size: 3vw;
        width: 20vw;
    }

    .link-icon {
        font-size: 5vw;
        width: 20vw;
    }

    #links {
        position: absolute;
        width: 20vw;
        left: 40vw;
        padding: 0;
        writing-mode: vertical-lr;
        bottom: 0%;
        text-align: center;
    }

    .link {
        writing-mode: horizontal-tb;
        text-align: center;
        width: 20vw;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 2vh;
    }

    #main-title {
        top: 10vh;
        text-align: center;
    }

    #sub-title {
        top: 10vh;
        text-align: center;
        font-size: 1.5vh;
    }
}

@media (max-aspect-ratio: 4/3) and (min-aspect-ratio: 3/4) {
    #sub-title {
        top: 30vh;
        text-align: center;
        color: white;
        font-size: 1.5vh;
    }

    .link-name {
        font-size: 1.2vh;
    }

    .link-icon {
        font-size: 3vh;
    }
}