/* haiii */

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

@font-face {
    font-family: "System Bold";
    src: url("fonts/vgasys.ttf");
}

body{
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-family: "W95FA";
}

h1,h2,h3,a,p{margin: 0; padding: 0;}

a{color: #000; text-decoration: none;}
a.white{color:#fff;}

.page{
    margin-top: 25px;
    display: flex;
    flex-direction: row;
}

.normal{display: initial;}
.small{display: none;}
.mobile{display: none;}
.pc{display: initial;}

.sky{
    position:absolute;
    top:0;
    left:0;
    z-index: -10;
}

.banner{margin-top:75px;z-index: 9;}

.nav.pc{
    max-width: 360px;
}

.nav.mobile{
    max-width: 100%;
    width: 100%;
}

.nav-title{
    width: 360px;
    height: 30px;
    background: #000;
    color: #fff;
    letter-spacing: 10px;
    font-size: 20px;
    justify-content: center;
    align-items: center;
}

.nav-contents-title{
    margin-left: 26px;
    align-items: center;
    font-variant: small-caps;
    height:100%;
    width: max-content;
}

.nav-divider{
    width: 360px;
    height: 2px;
    background: #c0c0c0;
}

.nav-category{
    width: 360px;
    height: 48px;
    font-size: 20px;
    display: flex;
    align-items: center;
    font-family: "System Bold";
    justify-content: space-between;
}

.c-checkmark{position: relative; right: 8px; bottom: 4px; height: 16px;}
.c-selected{background-color: #c0c0c0;}

.red-c{border-left: #ff3100 8px solid;}
.yellow-c{border-left: #ffce00 8px solid;}
.green-c{border-left: #6bce39 8px solid;}
.blue-c{border-left: #009cff 8px solid;}
.c-name{margin-left: 14px;}

.content{margin-left: 24px;}
.title{font-size: 32px;}
.text{margin-top: 20px; font-size: 20px;}
.italic{font-style: italic;}

.meow{
    position: absolute;
    top:15px;
    right:25px;
    z-index:10;
    opacity: 1%;
    transition: 0.25s ease-out;
}

.meow:hover{
    opacity:5%;
    transform: scale(1.1);
}

@media screen and (width <= 1024px) {
    .small{display: initial;}
    .normal{display: none;}
    .mobile{display: none;}
    .pc{display: initial;}

    .page{
        margin-top:12px;
        display: flex;
        flex-direction: row;
    }

    .banner{margin-top:48px;z-index: 9;}
    .nav{max-width: 180px;}

    .nav-title{
        width: 180px;
        height: 15px;
        background: #000;
        color: #fff;
        letter-spacing: 5px;
        font-size: 10px;
        justify-content: center;
        align-items: center;
    }

    .nav-contents-title{
        margin-left: 13px;
        align-items: center;
        font-variant: small-caps;
        height:100%;
        width: max-content;
    }

    .nav-divider{
        width: 180px;
        height: 1px;
        background: #c0c0c0;
    }

    .nav-category{
        width: 180px;
        height: 24px;
        font-size: 10px;
        display: flex;
        align-items: center;
        font-family: "System Bold";
    }

    .red-c{border-left: #ff3100 4px solid;}
    .yellow-c{border-left: #ffce00 4px solid;}
    .green-c{border-left: #6bce39 4px solid;}
    .blue-c{border-left: #009cff 4px solid;}
    .c-name{margin-left: 7px;}

    .c-checkmark{position: relative;right: 4px;bottom: 2px;height: 8px;}
    .content{margin-left: 12px;}
    .title{font-size: 16px;}
    .text{margin-top:10px;font-size: 10px;}
}

@media screen and (width <= 640px) {
    .small{display: none;}
    .normal{display: none;}
    .mobile{display: initial;}
    .pc{display: none;}

    .page{flex-direction: column;}
    .content{margin:24px;}

    .nav-category{
        width: 100%;
        height: 32px;
        font-size: 18px;
        display: flex;
        align-items: center;
        font-family: "System Bold";
    }

    .nav-title{
        width: 100%;
        height: 32px;
        background: #000;
        color: #fff;
        letter-spacing: 10px;
        font-size: 24px;
        justify-content: center;
        align-items: center;
    }
    
    .red-c{border-left: #ff3100 10px solid;}
    .yellow-c{border-left: #ffce00 10px solid;}
    .green-c{border-left: #6bce39 10px solid;}
    .blue-c{border-left: #009cff 10px solid;}

    .content h1{font-size: 32px;}
    .content p{font-size: 18px;}
    
    .sky{display: none;}
}