@charset "UTF-8";
body{
    font-family: "Klee One",serif;
    font-family: "Zen Old Mincho", serif;
    background-color:hsla(240, 12%, 79%, 0.982);
    min-height: 100vh; 
    color: #5c657e;
}

.title{
    color: #66707e;
    size: 1.4em;
    text-align: center;
    margin: 1% 0 1% 0;
    
}

.link{
    color: #5d82b2;
    line-height: 150%;
    text-decoration: none;

}

.link:visited{
    color: #344776c9;
    line-height: 160%;
    text-decoration: none;
}


.henkan{
    margin: 4% 2% 4% 10%;
}

.henkan input[type=text] {
    width: 100px;  
    border: #404376 solid 1px;
    background-color: #d7e1e6;
    margin-right: 3px;
    color: inherit;
    font-family: inherit;
    display: inline-block;
}


#enterYZ1{
    display: inline-block;
    text-decoration: none;
    margin-left: 3px;
    width: 60px;
    padding: 2px 2px;
    border: 1px solid #353162;
    background: #353162;
    color: #c2ccd1;
}



#enterYZ1:hover {
    color: #c3ffde;
    border: #9ecbff;
    background: #242e38;
}

@media(max-width: 600px){

.box1{
        align-items: center;
        max-width: 93%;
        margin: 0 auto;
        color: #c1c1c9;
        border: solid #c1c1c9 1px; 
        background-color: #4d565c;
        padding: 1% 1px;
}

.box2{
    align-items: center;
    max-width: 93%;
    margin: 0 auto;
    color: #242a2f;
    border: solid #c1c1c9 1px; 
    background-color: #95a2ab;
    padding: 1% 1px;
}


}

@media(min-width:601px){
.box1{
        align-items: center;
        max-width: 60%;
        margin: 0 auto;
        color: #c1c1c9;
        border: solid #c1c1c9 1px; 
        background-color: #4d565c;
        padding: 1% 1px;
}
.box2{
    align-items: center;
    max-width: 60%;
    margin: 0 auto;
    color: #242a2f;
    border: solid #c1c1c9 1px; 
    background-color: #95a2ab;
    padding: 1% 1px;
}
}