/*
 * 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
 */
@media screen and (max-width: 720px) {

    .song-list{
        display: flex;
        flex-direction: column;
    }

    .song-card-item{
        width: 90%;
        padding: 0.5em;
    }

    .anime-list-container{
        display: grid;
        grid-template-columns: auto;
        grid-gap: 2em;
    }

    .anime-list-container>.grid-list-item{
        width: 90%;
        padding: 0.5em;
    }


    .user_section_avatar
    {
        width:40%;
        height:100%;
        text-align:center;
        display:flex;
        flex-flow:column;
    }

    .user_section_cards
    {
        width:90%;
        height:60%;
        border-radius:0.5em;
        background-color:white;
        text-align:left;
        margin:auto;
        text-indent:1em;
        border-style:solid;
        border-color:#F8F8FF;
        margin-top:1em;
        margin-bottom:1em;
    }

    .user_section_username
    {
        width:85%;
        margin:auto;
    }

    .user_section_nickname
    {
        width:85%;
        margin:auto;
    }

    .user_p_email
    {
        margin-bottom:-0.2em;
    }

    .user_input_email
    {
        height:1.5em;
        width:90%;
        margin:auto;
        border-radius:0.2em;
    }

    .user_article_favolist {
        margin: auto;
        width: 90%;
        height: 100%;
        text-align: center;
        display: flex;
        flex-flow: column;
        background-color: white;
        border-radius: 0.2em;
    }

    #sheet .general-list-container{
        display: flex;
        flex-direction: column;
    }

    #sheet .general-list-container > section{
        width: 100%;
        margin: 0.5em auto !important;

    }


    .index-nav-container >section{
        margin: 5% !important;
    }

    #avatar {
        margin-top: 20%
    }
    .login .links{
        text-align: center;
        margin: auto;
        font-size: 12px;

    }
    .nav-page-item{
        margin-left:-25%;
        font-size: 20px
    }
    .nav-page-item-inpage{
        font-size: 20px
    }
    #sheet-tab-container{
        margin-left: -10%;
        margin-bottom: 1%;
    }
    .page-main{
        margin-left: -2%;
        margin-bottom: 5%;
    }
    .sheet-card{
        margin: 5%
    }
    .song_article_cards{
        margin-left: -4%
    }
    .card-text.sheet-description{
        margin: auto !important;
        width: 90%
    }
    .uk-card{
        margin: auto !important;
    }
    .uk-card h3{
        margin: auto ;
    }
    .uk-card h4{
        margin: auto
    }
    .footerRow a{
        font-size: 15px
    }
    .container p{
        font-size: 15px
    }
    footer{
        height: 5%
    }
    .nav-container{
        margin-left: -7% !important;
    }
    #about .nav-item{
        margin: auto !important;
        border: 0px solid;
        width: 90%;
        height: 90%;
        font-size: 0px;
    }
    .in-link{
        font-size: 25px !important;
    }
    #discord{
        display: none;
    }

    .about-header .display-4{
        margin: auto !important;
        width: 150%;
        font-size: 30px;
    }
    section.container{

        width: 100%;
        margin: auto !important;
    }
    .about-team-container p{
        font-size: 10px !important;
    }
    .about-header h2{
        width: 150%
    }
    .about-header .lead{
        width: 150%
    }
    #about .card-body{
        display: grid;
        margin-top: -15% !important;
        margin-left: -15% !important;
    }
    #about .card-text{
        width: 200%;
        margin: auto;
    }
    #about .card-title{
        width: 100%
    }
    .about-team-item{
        display: grid;
    }
}