@import url('https://fonts.googleapis.com/earlyaccess/notosansjp.css');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap');

body {
    font-family: 'Noto Sans JP', sans-serif;
    /* font-family: "Klee One", cursive; */
    /* font-family: "Hina Mincho", serif; */
    background-color: rgb(223, 232, 235);
    margin: auto;
    padding:0 20px;
    max-width:900px;
}

.headerbar{
    font-family: "Zen Old Mincho", serif;
    display: block;
    background-color: rgb(159, 184, 177);
    height: 3em;
    line-height: 0em;
    padding: 1em 1em;

}

.headerbar a {
    text-decoration: none;
    color: black;
}

a:link{
    color: black;
}

a:visited {
    color: black;
}

a :hover{
    text-decoration: underline dashed;
	-webkittext-decoration: underline dashed;
}

body a:hover{
    text-decoration:underline dashed ;
}



.discription{
    padding: 0px 1em;
    margin: 10px 0;

}

.myname{
    display: flex;
    align-items:center;
    flex-direction: row;
    /* gap:0 1.5%; */
    margin-bottom: 1rem;
}

.myname :nth-child(1){
    margin-right: 1.5%;
}

.card{
    font-size: small;
}

@media (min-width: 500px) {

.works{
    max-width: 100%;
    min-width: 0%;
    display: flex;
    align-items: flex-start;
    flex-direction: row;

    
}

.works details{
    margin-top: 16px;
    margin-left: 0.7rem;

    

}

}

.works{
    
    margin: 0 0 1.8em 0;
}




img{
    max-width: 100%;
    height: auto;
    display: block;
}



iframe{
    max-width: 900px;
    height: auto;
    display: block;
}

.profile-img{
    max-width: 35%;
    border-radius: 20%;
}


.footer{
    text-align: right;
    font-size: small;
}

.footer{
    text-align: center;
    margin-top: 1em;
    margin-bottom: 2em;
}


.xlink{
    font-size: large;
}