@charset "utf-8";

body {
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.8em;
    font-feature-settings: "palt";

}

header {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 60px; 
    background-color: rgba(255,255,255,0.3);
    }

#menu{
    width:3em;
    height:3em;
    margin-right: 20px;
}

header nav {
    
    padding: 12px 0 0 12px;
    display: flex;
    justify-content: right;
    ul{
        display: flex;
    justify-content: right    
    }
 li{
    font-size: 1.2em;
    margin: 10px 50px 20px 0px;
 }

}



#firstview {
    text-align: center;
    padding: 160px 0px 130px;
    margin: auto;
    width: 60vw;

    #myname {
 
        background-color: rgb(25, 25, 25);
        font-size: 2.3vw;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-weight: bold;
        letter-spacing: 0.35em;
        color: rgb(255, 255, 255);
        width: 60vw;
        margin: auto;
        padding: 0px;
        line-height: 1.1em;
    }
        
    
    
    #year {
        width: 30vw;
        margin: auto;
        margin-top: 5px;
        padding: 3px;
        font-size: 1.6vw;
        font-weight: bold;
        letter-spacing: 0.15em;
    
    }

}

h1 {
    font-size: 10vw;
    font-family: "Bodoni Moda SC", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    letter-spacing: 0.05em;
    padding: 0px 0px 16px 0px;

}

h2 {
    font-size: 2.5em;
    font-family: "Bodoni Moda SC", serif;
    font-optical-sizing: auto;
    font-weight: <bold>;
    font-style: normal;
    padding: 25px 2px 8px 6px;
    letter-spacing: 0.02em;
}

h3 {
    background-color: rgb(25, 25, 25);
    font-size: 1.1em;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    color: rgb(255, 255, 255);
    letter-spacing: 0.05em;
    padding: 3px 2px 3px 10px;
    margin: 5px 0;
}



p {
    padding: 1px 0px 0px 8px;
    line-height: 1.8em;
}



#aboutit_outside {
    background-color: rgb(25, 25, 25);
}

#aboutit {
    color: rgb(255, 255, 255);
    padding: 40px 0px 80px;
    width: 60vw;
    margin: auto;
}

#h2_aboutit {
    margin-bottom: 10px;
}


#works_outside {
    background-color: rgb(238, 233, 237);
    padding: 60px 0;
}

#works {
    margin: auto;
    width: 60vw;
}

.individual_works {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 50px;

    a {
        display: block;
        width: 19.3vw;
        height: 27vw;
        min-width: 200px;
        min-height: 260px;
        margin: 10px 7px 20px 0;
        background-color: rgb(255, 255, 255);

        div {
            margin: 10px 5px 20px;
            font-size: 0.9em;
            line-height: 1.5em;
        }
    }

    img {
        width: 19.3vw;
        min-width: 200px;
        min-height: 200px;
    }
}

#profile_outside{
    background-color: rgb(255, 255, 255);
 
}


#profile{
background-color: rgb(255, 255, 255);
    padding: 40px 0px 80px;
    width: 60vw;
    margin: auto;

    h3{
        margin-top: 15px;
    }


    #abstract{
        display: flex;
        justify-content: space-between;

        div{
        width: 60%;

        }

        img{
            width:25%;
            height: 25%;
            margin: 25px 20px 0px 0px;
          }

    #profileMyname{
        margin-top: 20px;
        font-size: 1.6em;

        span{
            font-size: 0.8em;
        }
    }

    ul{
        line-height: 1.8em;
        font-size: 1.1em;
        margin: 5px 0px 20px 8px;

    }

    #gakureki{
        margin-top: 20px;
        font-size: 1.1em;
    }

    #hitokoto{
        font-size: 0.9em;
    }
}

dl{
        margin: 30px 0px 50px 8px;
        line-height: 1.2em;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  
  
  dt {
      width: 30%;
      padding-bottom: 2px;
      margin-bottom: 6px;
    }
    
    dd {
      width: 70%;
      padding-bottom: 2px;
      margin-bottom: 6px;
    }
  
    }
}

footer{
    background-color: rgb(25, 25, 25);
    font-size: 0.8em;
    font-family:  sans-serif;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    
    p{
    padding: 30px 0px;
}
}

@media screen and (max-width:960px) {

    #firstview{
        width: 80vw;

        #myname {    
            width: 80vw;
   
        }
    }

    h1 {
        font-size: 13vw;
    }

    #aboutit{
    width:80%;
}
#works {
    margin: auto;
    width: 80vw;
}

#profile{
        width: 80vw;
    }


}