/*
 * Copyright (c) 2020. Kamiku Xue(yxue@uvm.edu).
 * The code is completely original, without any plagiarism, duplication, or copying. Some of the code is based on references and improvements made by our own ideas.
 * All the referenced code and the libraries used will be specifically described.
 * Only for academic purposes. Direct copying is prohibited.
 * Please contact and confirm your Academic Integrity Code before citing.
 * All rights reserved.
 *
 * ANMUSO | PIXMEOW | KAMIKU
 */
/*==============================

              todo Import

===============================*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Catamaran:400,800');

/*==============================

             todo Global

===============================*/

* {
    transition-duration: 0.2s !important;
}

img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
}

body, html{
    background: none;
    position: relative;
}

main{
    min-height: 58vh;
}

li{
    list-style-type: none;
}

a{
    text-decoration: none !important;
}

#bg-img{
    display: block;
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: -10;
    background-image: url("../images/common/bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(20px);
}

/*==============================

             todo Header

===============================*/
header{
    background-color: white;
    padding-top: 1%;
    display: grid;
    height: 15vh;
    grid-template-columns:30% 40% auto 10%;
    grid-template-areas:
        ". . . ."
        "logo . login picon"
        "logo . login picon";
}

#profile{
    position: relative;
    z-index: 20;
}

#profile:hover{

}

#profile-detail{
    position: absolute;
    right: 0;
    top: 9vh;
    z-index: -10;
}

#avatar img{
    padding: 2%;
    border-radius: 50%;
    width: 128px;
}

#avatar img{
    border: 2px solid;
    animation: tada;
    animation-duration: 2s;
    animation-delay: 5s;
    animation-iteration-count: infinite;
}

#avatar img:hover{
    border: 4px solid gray;
    transform: scale(0.9);
}

.logo{
    grid-area: logo;
    margin: auto;
}

.login{
    margin-top: 10%;
    grid-area: login;
}

.login .links{
    text-align: right;
}

.picon{
    margin-left: 5%;
    grid-area: picon;
}


/*==============================

            todo  Nav

===============================*/
.page-aside{
    border:0 solid;
    padding: 0;
}

.page-aside:before{
    display: block;
    position: absolute;
    top: -10px;
    width: 100%;
    height: 10px;
    background: linear-gradient(45deg, transparent 33.333%, #fff 33.333%, #fff 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #fff 33.333%, #fff 66.667%, transparent 66.667%);
    background-size: 20px 40px;
}

.nav-page-container{
    position: sticky;
    right: 0;
    top: 5vh;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    margin: 0;
    display: block;
    border:0 solid #111;
    border-radius:5px;
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.9);
}

.nav-page-item{
    padding: 5%;
    font-size:26px;
    text-align:center;
    margin-top:10%;
    overflow:hidden;
    cursor:pointer;
}

#sheet-tab-container li{
    width: 40%;
}

/*==============================

         todo  Card Temp

===============================*/
.sheet-card{
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50px;
    margin: 0;
}

.sheet-info{
    border-radius:20px;
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.2);
    margin: 0.5em;

}

.sheet-header{
    border: 1px solid rebeccapurple;
    margin: 0.5em;
    padding: 0.5em;
    display: block;
    border-radius:20px;
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.2);
}

.sheet-author, .sheet-tags, .sheet-type{
    background-color: rgba(181, 202, 160, 0.3)
}

.sheet-author a{
    width: 100%;
    text-align: center;
    font-size: 20pt;
    color: black;
    display: block;
    border: 2px solid transparent;
    margin: auto;
}

.sheet-type{
    text-align: center;
    color: #0C4842;
}

.sheet-type .type-tag{
    padding: 1%;
    border-radius: 5px;
    width: 40%;
    display: block;
    margin: auto;
    font-weight: bold;
}

.sheet-author a:hover{
    border: 2px solid #268785;
}

.sheet-author a{
    font-size: 16pt;
}

.sheet-author img {
    margin-right: 10%;
    width: 36px;
    height: 36px;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid gray;
}
/*==============================

            todo  Index

===============================*/
#index .index-nav-container .card{
    border: 1px solid black !important;
    border-radius: 5% !important;
    margin: 1%;
}

.index-nav-container > section:hover {
    animation: bounce;
    animation-duration: 0.7s;
}

#index .index-nav-container img{
    object-fit: cover;
    height: 20vh;
}

#index .index-nav-container .card .card-img-top{
    height: 250px;
    border-radius: 5% 5% 0 0 !important;
}

#index-slide{
    width: 80%;
    margin: 2% auto 5% auto;
}

#index-slide img{
    border-radius: 20px;
}

.index-page-show > section{
    background: rgba(24, 18, 18, 0.5);
}

/*==============================

           todo   Sheet

===============================*/
#sheet .pages-nav{
    display: flex;
    text-align: center;
    margin: auto;
    padding: 1em;
}

.pages-nav li{
    font-weight: bold;
    font-size: 130%;
    color: #007aff;
    background: rgba(255, 255, 255, 0.2);
    margin: auto;
    padding:0.5em;
    border:0 solid #111;
    border-radius:5px;
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.2);
}

.pages-nav li:hover{
    animation: heartBeat;
    animation-duration: 2s;
    animation-iteration-count:infinite;
}

.right-header{
    display: block;
    margin: auto;
    width: 16em;
}

.right-header input{
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: inset 5px 5px 10px #d9d9d9,
    inset -5px -5px 10px rgba(255, 255, 255, 0.2);
}

#fileSheet, #fileCover {
    display: block;
    position: relative;
    width: 100%;
}

#sheet-list-container{
    margin: 0;
}

.page-main{
    height: 100%;
    position: relative;
}

.page-main:before{
    background-size: cover;
    content: '';
    filter: blur(20px);
    height: 50vh;
    position: absolute;
    z-index: -1;
    transform: translate(-50%, -50%);
    width: 100%;
    border-radius: 10px;
}

.page-main:after{
    background: rgba(255,255,255,0.7);
    content: '';
    display: block;
    height: inherit;
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
}

#sheet label{
    border-bottom: 1px solid #333;
    display: block;
    font-size: 1.25em;
    margin: 3%;
    transition: all 0.25s;
}

#sheet form label input{
    background: none;
    border: none;
    line-height: 1%;
    padding: 1% ;
    width: 100%;
}

/*==============================

            sheet  detial

===============================*/
#doc-editor{
    width: 90%;
    margin: 1em;
    background: rgba(255, 255, 255, 0.4);
    border:0 solid #111;
    padding: 1em;
    border-radius:50px;
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.2);
}

.sheetList textarea{
    margin: 1em;
    min-height: 21em;
    background-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.2);
}

.sheet-body{
    margin-top: 1%;
    background: rgba(255,255,255,0.7);
    border-radius: 20px;

}

.sheet-body{
    margin-top: 1%;
    background: rgba(255,255,255,0.7);
    border-radius: 20px;

}

.sheet-card{
    margin: 1em;
    width: 30%;
}

.sheet-info-container{
    display: grid;
    grid-template-rows: auto auto;
    grid-template-areas:
    "td info";
}

.sheet-info-tags{
    border: 0 solid;
}

.sheet-detail-header{
    margin-top: 1%;
    margin-left: 1%;
}

.sheet-detail-header button{
    border-radius: 25px;
    margin-bottom: 2%;

}

.sheet-info-container-td{
    grid-area: td;
    text-align: center
}

.sheet-info-container-song{
    grid-area: info;
    text-align: center;
}

.sheet-download-info button{
    width: 50%;
    border-radius: 25px;
    margin-left: 5%
}

.sheet-rate-container{
    display: grid;
    grid-template-rows: auto auto;
    grid-template-areas:
    "rate charts";
    margin-left: 5%;

}

.comments-list-comments{
    display: grid ;
    grid-template-columns: 70% auto;
    grid-template-areas:
    "txtarea submit";
    margin-top: 1%;
    margin-left: 5%;
}

.comments-list-textarea{
    grid-area: txtarea;
    resize: none;
}

.comments-list > li{
    margin: 1em 0;
}

.comments-list-submit{
    margin: 5%;
    width: 30%;
    border: 1px solid;
    border-radius: 25px;
    grid-area: submit;
    display: block;
}

.sheet-rate{
    grid-area: rate;
    text-align: center;
    margin: auto;
}

#rating{
    margin: auto;
}

.sheet-rate-container-charts{
    grid-area: charts;
    margin: auto;
}

canvas{
    width: 90% !important;
}

.comments-list-comments{
    display: grid;
    grid-template-columns: 80% auto;
    grid-template-areas:
    "ltt ls";
}

.comments-list-textarea{
    grid-area: ltt;
}

.comments-list-submit{
    grid-area: ls;
    width: 50%
}

/*=============== ===============

            todo  Anime

===============================*/
.anime-card figure img{
    object-fit: cover;
    height: 100%;
}

.grid-list{
    min-height: 100%;
    position: relative;
}

.btnListMore {
    margin: 1em;
    width: 90%;
    border: 2px solid #155799;
    padding: 6px 24px;
    font-size: 1.15em;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #155799;
    background-color: #f1f2f2;
    transition: all 0.25s ease-in-out;
    border-radius: 50px;
}

.btnListMore:hover {
    background-color: #155799;
    border-color: #155799;
    color: #f1f2f2;
}

.btnListMore:active {
    background-color: #155799;
    border-color: #155799;
    color: #f1f2f2;
    box-shadow: none;
}

#anime-list{
    margin: auto;
    overflow: scroll;
}

/*New section*/
.grid-list-item{
    padding: 0;
    margin: 1em;
    width: 45%;
    background: rgba(255, 255, 255, 0.5);
    border:0 solid #111;
    border-radius:5px;
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.9);
}

.grid-list-item>section{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: center;
}

.grid-list-item>section>.card-left{
    display: inline-block;
}

.anime-header{
    margin: 0.5em;
}

.anime-description{
    text-align: left;
    text-indent: 1em;
}

.anime-song-container{
    display: flex;
}

.song-type, .song-title{
    margin: auto;
    width: 100%;
    font-weight: bold;
    text-align: center;
}

.anime-title{
    font-weight: bold;
    font-size: 100%;
    margin: 0.5em
}

.animeList > a{
    border: 1px solid;
    display: block;
    margin: 0.5em;
    padding: 0;
}
.animeList >.song-link:hover{
    animation: bounce;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
    background: rgba(255, 255, 255, 0.3);
    border:0 solid #111;
    border-radius:5px;
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.9);
}

.animeList > a > .song-artist {
    display: flex;
    flex-direction: row;
}

.animeList > a >.anime-song-container {
    border: 1px solid;
    position: relative;
    height: 60px;
}

.animeList > a >.anime-song-container > .song-title {
    margin: 0;
    display: block;
}

.animeList > a >.anime-song-container > .song-type{
    display: block;
    position: absolute;
}

.song-artist{
    border: 1px solid;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0
}

.song-artist .song-artist-tag{
    display: block;
    width: auto;
    padding: 0.5em;
    margin: auto;
}

.read-more{
    overflow: hidden;
    margin: 0.7em;
    padding: 1em;
    background: rgba(255, 255, 255, 0.2);
    border:0 solid #111;
    border-radius:5px;
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.2);
}

.grid-list-item>section>.card-left>img{
    object-fit: cover;
}

.grid-list-item>section>.card-right{
    width: 60%;
    display: inline-block;
}

/*==============================

           todo   Music

===============================*/
.nav-list{
    margin: auto;
    width: 70%;
}

#link-song >fieldset >section{
    margin: 0.5em;
}

.song_article_cards{
    margin: auto;
    width: 100%;
}

.song-card-item{
    background: rgba(255, 255, 255, 0.5);
    margin: 1em;
    width: 30%;
    border:0 solid #111;
    border-radius:5px;
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.9);
    overflow: scroll;
}

#song .anime-list-container{
    background: rgba(255, 255, 255, 0.4);
    padding: 1em;
    width: 90%;
    color: black;
    overflow: auto;
    border:0 solid #111;
    border-radius:5px;
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.2);
}

.btn-add{
    background: rgba(255, 255, 255, 0.4);
    color: black;
    overflow: auto;
    border:0 solid #111;
    border-radius:5px;
    padding:0.51em;
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.2);

}

.btn-add:hover{
    animation: bounce;
    animation-duration: 0.7s;
}

.anime-list-container>a{
    display: flex;

}

.anime-list-container>a>h4{
    width: 40%;
    text-align: center;
    background: rgba(255, 255, 255, 0.4);
    color: black;
    border:0 solid #111;
    border-radius:5px;
    padding:0.51em;
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.2);
}

.anime-list-container>a>h3{
    width: 100%;
    font-size: 100%;
    margin: 0.5em;
}

.song-type{
    display: block;
    width: auto;
    top: 0;
    right: 0;
}

.song-card-item{
    padding: 0 0 2em 0;
    overflow: auto;
}

.song-body{
    margin: auto;
    padding: 0;
}
.anime-list-container{
    margin: auto;
}

.song-title{
    transform: translateY(1em);
    display: block;
}

/*==============================

           todo   About

===============================*/
#about .nav-container{
    text-align: center;
    display: grid;
    grid-template-columns: auto auto auto auto ;
    font-size: 23px;
    margin: 0.5em auto;
    pointer-events: painted;
}

#about .nav-item{
    border: 3px wheat solid;
    padding: 0.3em;
    margin: 0 1em;;
    background-color: rgba(0,0,0,0.3)
}

#about .nav-item a{
    color: white;
    font-size: 24pt;
}

#about .nav-item:hover{
    background-color: white;
}

#about .nav-item:hover a{
    color: black;
}

#about .about-header {
    width: 90%;
    display: grid;
    grid-template-columns: 65vw auto;
    margin: auto auto 1%;
    border-radius: 50px;

}

#about .about-header #discord{
    float: right;
}

#about .about-team-container{
    margin: auto;
    padding-top: 1em;
    display: grid;
    grid-template-columns:auto auto;
    grid-template-areas:
        "author1 empty1"
        "empty2 author2"
        "author3 empty3";
}

#about .author-1{
    grid-area: author1;
    height: 30em;
}

#about .author-2{
    grid-area: author2;
    height: 25em;
}

#about .author-3{
    height: 25em;
    grid-area: author3;
}

#about .about-team-empty-1{
    grid-area: empty1;
    background-image: url("https://i.giphy.com/media/orQ7YGNizjTzi/giphy.webp");
    background-repeat: no-repeat;
    background-size: cover;

}

#about .about-team-empty-2{
    grid-area: empty2;
    background-image: url("https://i.giphy.com/media/orQ7YGNizjTzi/giphy.webp");
    background-repeat: no-repeat;
    background-size: cover;
}

#about .about-team-empty-3{
    grid-area: empty3;
    background-image: url("https://i.giphy.com/media/orQ7YGNizjTzi/giphy.webp");
    background-repeat: no-repeat;
    background-size: cover;
}

#about .author-1, .author-2, .author-3 {
    background: rgba(255,255,255,0.5);
    font-size: 21px;
}

#about .about-team-item section{
    margin: auto;
    width: 80%;
}

#about.about-team-item figure{
    height: 100%;
    margin: auto auto auto 4rem;
}

#about .card-img{
    margin-top: 5%;
}

/*-------------------------
        todo   User
--------------------------*/
.user-view{
    margin: 1em;
    padding: 1em;
    height: 1em;
}

.user-top{
    margin: auto;
    background: rgba(255, 255, 255, 0.3);
    border:0 solid #111;
    border-radius:5px;
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.2);
    padding: 1em;
}

.user-top>section>h1{
    text-align: center;
    font-size: 200%;
    font-weight: bold;
}

.user-top>section>img{
    border-radius: 80px;
}

.user-top>section>p{
    margin: auto;
    background: rgba(255, 255, 255, 0.3);
    border:0 solid #111;
    border-radius:5px;
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.2);
    padding: 2em;
}

.user-bottom{
    background: rgba(255, 255, 255, 0.3);
    border:0 solid #111;
    border-radius:5px;
    box-shadow:0 4px 5px rgba(0, 0, 0, 0.2);
    margin: auto;
}

.user-bottom>article{
    margin: auto;

}

.user-bottom>article>section{
    margin: 0.5em;

}

.user-bottom{
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: stretch;

}

.user-work{
    display: block;
    margin: 2em;
    border-radius: 2em;
}

.user-work > section{
    border-radius: 2em;
}

.user-work > section >section{
    border-radius: 2em;
    height: auto;
}

.user-work img{
    height: 30em;
    width: 100%;
    object-fit: cover;
    border-radius: 2em;
}

.user-work:hover > section >section{
    height: 100%;
    transition-duration: 1s;
    animation: pulse;
    animation-duration: 2s;
}

/*==============================

            todo  Footer

===============================*/
footer {
    margin-top: 5%;
    background-color: rgba(1,1,1,0.8);
    color: wheat
}

section.footerRow{
    display: flex;
    margin: auto;

}
.footerRow a{
    font-size: 20px
}

section.footer-link{
    margin: 4%  auto;
}

section.links img{
    width: 32px;

}
section.links{
    display: grid !important;
    grid-template-columns: auto auto auto auto auto auto;
    text-align: center;
}

/*==============================

          todo    Modal

===============================*/
/*-------------------------
   Login & Register Form
--------------------------*/
.btn-close{
    position: absolute;
    left: -1em;
    top: -1em;
    z-index: 1000;
    background: white;
    border-radius: 50%;
    padding: 0.5em;
}

.btn-close:hover{
    transform: rotate(60deg);
    transition-delay: 0.6s;
}

#login-form ul{
    display: flex !important;
    flex-direction: row !important;
}

#login-form ul li {
    width: 100%;
}

#login-form ul li a {
    width: 100%;
    text-align: center;
}

#song-add-page th{
    text-align: center;
}

#song-add-page form{
    text-align: center;
    margin: auto;
    display: flex;

}

#song-add-page td{
    text-align: center;
}


/*==============================

            todo  Footer

===============================*/
footer{
    position: absolute;
    right: 0;
    width: 100%;
    margin-top: 10em;
    background-color: rgba(1,1,1,0.8);
    color: wheat
}


section.footerRow{
    display: flex;
    margin: auto;

}

.footerRow a{
    font-size: 20px
}

section.footer-link{
    margin: 4%  auto;
}

section.links img{
    width: 32px;

}

section.links{
    display: grid !important;
    grid-template-columns: auto auto auto auto auto auto;
    text-align: center;
}

/*==============================

       todo   404 (Templates)

===============================*/
.error-container {
    text-align: center;
    font-size: 106px;
    font-family: 'Catamaran', sans-serif;
    font-weight: 800;
    margin: 70px 15px;
}

.error-container > span {
    display: inline-block;
    position: relative;
}

.error-container > span.four {
    width: 136px;
    height: 43px;
    border-radius: 999px;
    background:
            linear-gradient(140deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 43%, transparent 44%, transparent 100%),
            linear-gradient(105deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.06) 41%, rgba(0, 0, 0, 0.07) 76%, transparent 77%, transparent 100%),
            linear-gradient(to right, #d89ca4, #e27b7e);
}

.error-container > span.four:before, .error-container > span.four:after {
    content: '';
    display: block;
    position: absolute;
    border-radius: 999px;
}

.error-container > span.four:before {
    width: 43px;
    height: 156px;
    left: 60px;
    bottom: -43px;
    background:
            linear-gradient(128deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 40%, transparent 41%, transparent 100%),
            linear-gradient(116deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 50%, transparent 51%, transparent 100%),
            linear-gradient(to top, #99749D, #B895AB, #CC9AA6, #D7969E, #E0787F);
}

.error-container > span.four:after {
    width: 137px;
    height: 43px;
    transform: rotate(-49.5deg);
    left: -18px;
    bottom: 36px;
    background: linear-gradient(to right, #99749D, #B895AB, #CC9AA6, #D7969E, #E0787F);
}

.error-container > span.zero {
    vertical-align: text-top;
    width: 156px;
    height: 156px;
    border-radius: 999px;
    background: linear-gradient(-45deg, transparent 0%, rgba(0, 0, 0, 0.06) 50%,  transparent 51%, transparent 100%),
    linear-gradient(to top right, #99749D, #99749D, #B895AB, #CC9AA6, #D7969E, #ED8687, #ED8687);
    overflow: hidden;
    animation: bgshadow 5s infinite;
}

.error-container > span.zero:before {
    content: '';
    display: block;
    position: absolute;
    transform: rotate(45deg);
    width: 90px;
    height: 90px;
    left: 0;
    bottom: 0;
}

.error-container > span.zero:after {
    content: '';
    display: block;
    position: absolute;
    border-radius: 999px;
    width: 70px;
    height: 70px;
    left: 43px;
    bottom: 43px;
    background: #FDFAF5;
    box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.screen-reader-text {
    position: absolute;
    top: -9999em;
    left: -9999em;
}

@keyframes bgshadow {
    0% {
        box-shadow: inset -160px 160px 0 5px rgba(0, 0, 0, 0.4);
    }
    45% {
        box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.1);
    }
    55% {
        box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.1);
    }
    100% {
        box-shadow: inset 160px -160px 0 5px rgba(0, 0, 0, 0.4);
    }
}

/* demo stuff */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.page-404 button,.page-404 input,.page-404 select,.page-404 textarea {
    font-family: 'Montserrat', Helvetica, sans-serif;
    color: #bbb;
}

.page-404 h1 {
    text-align: center;
    margin: 30px 15px;
}

.page-404 .zoom-area {
    max-width: 490px;
    margin: 30px auto 30px;
    font-size: 19px;
    text-align: center;
}

.page-404 .link-container {
    text-align: center;
}

.page-404 a.more-link {
    text-transform: uppercase;
    font-size: 13px;
    background-color: #de7e85;
    padding: 10px 15px;
    border-radius: 0;
    color: #fff;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    line-height: 1.5;
    text-decoration: none;
    margin-top: 50px;
    letter-spacing: 1px;
}