:root{
    --primary-color:#e8f0f7;
    --hover-color:#c1c1c1;
    --text-color:#656565;
    --par-color:#333333;
    --thumb-color:#524444;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    min-height:100vh;
    min-height: 100dvh;
    background-color:var(--primary-color);
    display: flex;
    flex-direction: column;
}
a{
    text-decoration:none;
}
main{
    flex:1;
}
.myu_logo{
    height:64px;
    display:flex;
    margin-right:auto;
}
.wholebar{
    background-color:var(--primary-color);
    border-bottom:1px solid var(--hover-color);
    z-index:10;
    position:relative;
}
.wholebarcontent{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:95vw;
    margin:0 auto;
}
nav{
    background-color:var(--primary-color);
}
nav ul{
    list-style:none;
    display:flex;
    max-width:95vw;
    margin:auto;
}
nav li{
    display:flex;
    font-size:16px;
    font-family: 'metropolisextra_light', sans-serif;
}
nav a{
    display:flex;
    text-decoration:none;
    padding:1.3em 2em;
    color:var(--text-color);
    transition:background-color 300ms ease;
}
nav a:hover{
    background-color:var(--hover-color);
}
nav a.active-link{
    border-bottom: 2px solid var(--text-color);
}
#open-sidebar{
    display:none;
    background:none;
    border:none;
    padding:1em;
    margin-left:auto;
    cursor:pointer;
    color:var(--text-color);
    font-size:16px;
}
#close-sidebar{
    display:none;
    background:none;
    border:none;
    padding:1em;
    cursor:pointer;
    color:var(--text-color);
    font-size:16px;
}
#overlay{
    position:fixed;
    inset:0;
    z-index:9;
    background:rgba(0,0,0,0.5);
    display:none;
    
}
.herooverlay{
    position:absolute;
    inset:0;
    z-index:0;
    background:rgba(0,0,0,0.4);
    height:100vh;
}
h2{
    font-family: 'metropolisextra_light';
    font-weight:100;
    color:var(--primary-color);
    font-size:32px;
    max-width:90vw;
}
h4{
    font-family: 'metropolisextra_light';
    font-weight:100;
    color:var(--primary-color);
    font-size:24px;
    max-width:90vw;
}
#hero{
    background:center url(/img/tearless.webp) ;
    background-size:cover;
    background-repeat:no-repeat;
    min-height:100vh;
}
footer{
    background:var(--primary-color);
    color:var(--par-color);
    padding:2em;
    align-items:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    font-family: 'exo_2.0light';
    text-align: center;
}
footer ul{
    list-style:none;
    display:flex;
    
}
footer li{
    display:flex;
}
footer a{
    color:black;
    padding:8px;
}
.copyright{
    display:flex;
    padding:8px;
}
.text{
    margin:0 auto;
    max-width:95vw;
    width:75em;
}
p{
    max-width:80vw;
    width:60em;
    margin:0 auto;
    font-size:16px;
    color:var(--par-color);
    text-align:justify;
}
#english{
    font-family: 'exo_2.0light';
    display:block;
    line-height:200%;
}
#japanese{
    font-family: "Noto Sans JP", sans-serif;
    font-weight:300;
    display:none;
    line-height:200%;
}
h1{
    padding:1em 0;
    text-align:center;
    font-size:64px;
    font-family: 'okolaksregular';
}
h3{
    margin:1rem auto;
    font-family: 'louis_george_caferegular', "M PLUS 1", sans-serif;
    font-weight:500;
    font-size:24px;
    max-width:80vw;
    width:60rem;
}
.smile{
    display:block;
    width:75em;
    max-width:95vw;
    margin:0 auto 2em auto;
}
#language_btn{
    display:flex;
    align-items:center;
    max-width:80vw;
    margin:0 auto;
    width:60em;
}
.lang{ 
    font-size:16px;
    height:30px;
    border-radius:0;
    border:1px solid var(--hover-color);
    text-align:center;
    width:8em;
    font-family: 'metropolisextra_light', sans-serif;
    color:var(--text-color);
    background-color:var(--primary-color);
    cursor:pointer;
    transition:300ms ease-in;
}   
#en{
    margin-right:1rem;
    color:var(--primary-color);
    background-color:var(--hover-color);
}
#jp{
    font-family: "Noto Sans JP", sans-serif;
    font-weight:250;
}
.lang:hover{
    background: var(--hover-color) !important;;
    color: var(--primary-color) !important;;
}
.text a{
    color:var(--par-color);

}
.videos{
    text-align:center;
    max-width:90vw;
    margin:0 auto;
}
.videocontainer{
    max-width:80vw;
    width:320px;
    margin:1em;
    position:relative;
    display:inline-flex;
    flex-direction:column;
}
.thumbnail{
    position:relative;
    border: 2px solid var(--thumb-color);
    width:320px;
    height:auto;
    max-width:80vw;
    border-radius:4px;
}
.thumbhover{
    border: 2px transparent;
    max-width:80vw;
    width:320px;
    height:180px;
    position:absolute;
    z-index:8;
    background-color:#c1c1c180;
    color:var(--primary-color);
    text-align:center;
    align-content:center;
    font-size:32px;
    top:0%;
    opacity:0;
    transition:200ms ease-in;
    cursor:pointer;
    border-radius:4px;
}
.thumbhover:hover{
    opacity:1;
}
h5{
    font-family: 'metropolisextra_light', "Noto Sans JP", sans-serif;
    font-weight:200;
    margin-top:4px;
}
.ytfilters{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance:none;
    background-color:var(--hover-color);
    color:var(--primary-color);
    padding:8px 20px 8px 8px;
    cursor: pointer;
    border:var(--par-color) 1px solid;
    border-radius:0;
}
#videofilter::after {
    content:"▼";
    font-size:12px;
    color:var(--primary-color);
    translate:-18px 9px;
    pointer-events: none;
    position:absolute;
  }
#videofilter{
    max-width:90vw;
    margin:8px auto;
    text-align:center;
}

#heromyu{
    background:center url(../img/kiyomizu.webp);
    background-size:cover;
    background-repeat:no-repeat;
    min-height:100vh;
}
.lrelease{
    width:400px;
    max-width:80vw;
    padding:8px 0;
}
.latestrelease{
    display:flex;
    flex-direction:column;
    color:var(--primary-color);
    align-items:center;
    justify-items:center;
    width:fit-content;
    height:fit-content;
    margin:auto;
}
.herocontainer{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100vh;
    position: absolute;
    width:100%;
    text-align:center;
}
.releasecontainer{
    display:flex;
    flex-direction:column;
    font-family: 'metropolisextra_light';
    margin:1rem;
}
.releasehead{
    text-align:center;
    font-size:28px;
    margin-bottom:8px;
}
.releasetext{
    text-align:center;
    font-size:20px;
}
.releasebtn{
    margin:1rem;
    border-radius:6px;
    border:solid 1px var(--text-color);
    font-size:16px;
    transition:300ms ease;
    background-color:var(--primary-color);
}
.releasebtn a{
    display:block;
    color:var(--par-color);
    font-family: 'louis_george_caferegular';
    font-size:16px;
    border-radius:6px;
    padding:8px;
}  

.releasebtn:hover{
    background-color:var(--hover-color);
    transform:scale(105%);
}
.albumcover{
    width:300px;
    max-width:70vw;
    display:flex;
    margin:1rem;
    transition:300ms ease-in;
}
.release{
   display:flex;
   flex-direction: column;
   text-align:center;
   font-family: 'exo_2.0light', sans-serif;
   margin:1rem;
   max-width:80vw;
   line-height:150%;
}
.releasepage{
    max-width:80vw;
    display:flex;
    flex-wrap:wrap;
    margin:1rem auto;
    justify-content:center;
    text-align:center;
}

.albumcover:hover{
    transform: scale(110%);
}

.myulink{
    padding:0 0 1rem 0;
    border-top:1px solid var(--hover-color);
    text-align:center;
}

.doublelink{
    display:flex;
    max-width:80vw;
    margin:0 auto;
    justify-content:center;
}
.links{
    list-style-type:none;
    font-family: 'louis_george_caferegular', sans-serif;
    line-height:200%;
    font-size:18px;
    margin:0 3em 0 3em;
}
.links a{
    color:var(--par-color);
    text-decoration:underline;
}
.myu_artist{
    width:250px;
    height:auto;
    border-radius: 1em;
    display:flex;
}
#smallheromyu{
    padding:4em 0 4em 0;
    background-image:url(../img/kiyomizu.webp);
    background-position:center;
    color:var(--primary-color);
    font-family: 'metropolisextra_light';
    display:flex;
    justify-content:center;
    }
.smallcontainer{
    display:flex;
    flex-direction:column;
    align-self:center;
    margin:4em;
}
.smallcontainer a{
    color:var(--primary-color);
    transition:300ms ease;
}
.smallcontainer a:hover{
    color:var(--hover-color);
}

.articlelist{
    display:flex;
    flex-direction:column;
    max-width:80vw;
    width:60em;
    margin:0 auto;
    list-style:none;
}
.article{
    display:flex;
    line-height:150%;
    padding:1rem;
    transition:300ms ease;
    border-bottom:var(--hover-color) solid 1px;
}
h6{
    font-family:'louis_george_caferegular', "Noto Sans JP", sans-serif;
    display:flex;
    font-size:16px;
    font-weight:400;
    color:var(--par-color);
}
h7{
    display:flex;
    font-size:16px;
    color:black;
    font-family:'Quicksand',sans-serif;
    font-weight:600;
}
.article a{
    width:100%
}
.article:hover{
    background-color:var(--hover-color);
}
.articletext{
    width:60em;
    margin:4em auto;
    max-width:80vw;
}
.articletext h3{
    text-align:center;
    margin:2em 0;
}
.pageno{
    text-align:center;
    font-family:'metropolisextra_light', sans-serif;
}
.pagebtn{
    font-size:12px;
    padding:8px;
    margin:4px;
    background-color:var(--primary-color);
    border:1px var(--hover-color) solid;
    transition:300ms ease;
}
.pagebtn:hover{
    background-color:var(--hover-color);
}
.back{
    background-color:var(--primary-color);
    font-size:16px;
    font-family:'exo_2.0light', sans-serif;
    display:flex;
    margin:1rem auto;
    border:none;
   
}
.back a{
    color:var(--text-color);
    transition:300ms ease;
}
.back a:hover{
    color:var(--hover-color);
}

.contact-form{
    display:flex;
    flex-direction:column;
    width:40em;
    max-width:80vw;
    margin:0 auto;
    
}
.contact-form input, .contact-form textarea, .contact-form button{
    padding:8px;
    margin:4px;
    font-family:'exo_2.0light', "Noto Sans JP", sans-serif;
    border:var(--hover-color) solid 1px;
    border-radius:4px;
    transition:200ms ease;
    background-color:var(--primary-color);
}

.contact-form button:hover{
    background-color:var(--hover-color);
    color:var(--primary-color);
}

h8{
    font-family:'exo_2.0light', "Noto Sans JP", sans-serif;
    margin: 8px;
    text-align:center;
    line-height:150%;
}
@media screen and (max-width:550px){
    #smallheromyu{
        flex-direction: column;
    }
    .myu_artist{
        margin:0 auto;
    }
    .links{
        margin:0 2em 0 2em;
    }
}
@media screen and (max-width:1200px){
    #hero{
        background-position-x:75%;
    }
}
@media screen and (max-width:800px){
    nav{
        position:fixed;
        top:0;
        right:-100%;
        height:100vh;
        width:min(15em,100%);
        z-index:10;
        border-left:1px solid var(--hover-color);
        transition:right 300ms ease-out;
    }
    nav.show{
        right:0;
    }
    nav ul{
        width:100%;
        flex-direction:column;
    }
    nav a{
        width:100%;
        padding-left:2.5em;
    }
    nav a.active-link{
        border-bottom:none;
    }
    nav .logo-li{
        display:none;
    }
    #open-sidebar, #close-sidebar{
        display:block;
    }
}

@media screen and (max-width:640px){
    h1{
        font-size:10vw;
        }
}