article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

html {
    font-size: 12px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font: 200 1em Helvetica, Arial, sans-serif;
    color: #555;
    letter-spacing: 0.5px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Helvetica, Arial, sans-serif;
    color: #555;
    font-weight: 500;
    line-height: 1.7;
}



@media screen and (min-width: 1024px) {

    #bar {
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        width: 360px;
        height: 100vh;
    }

    article {
        position: relative;
        margin: 90px 0 90px 360px;
        padding: 0;
        width: auto;
    }

    /*sidebar layout*/
    .logo{
        margin: 90px  90px 45px 90px;
        /* border-radius: 100px; */
        /* background: black; */
    }

    nav{
        margin:0px 0px 0px 90px;
        width:180px;
    }

    nav ul{
        list-style：none;
        margin:0;
        padding:0;
    }

    nav ul li{
        list-style: none;
        border-radius: 5px;
        display: table;
        margin:0 0 10px 0;
        padding:0;
        width:180px;
        height:60px;
    }

    nav ul li a{
        display: table-cell;
        text-align: center;
        vertical-align:middle;
        font-family: Helvetica, Arial, sans-serif;
        color: #555;
        font-weight: 500;
        line-height: 1.7;
        font-size: 1em;
    }

    #contact_aven{
        position: absolute;
        bottom: 0;
        width:180px;
        height:60px;
        margin:0 0 45px 0;
        text-align: center;
        /*background:#ee0058;*/
    }

    nav ul li:hover{
        background:#ffee00;
    }

    /*content layout*/
    .content{
        position: sticky;
    }

    .notes{
        position: relative;
        margin: 360px 0 70px 370px;
    }
}

@media screen and (max-width: 1024px) {
    #bar {
        position: -webkit-sticky;
        position: sticky;
        top:0;
        background: white;
        margin: 45px;
        padding:0;
        height: 200px;
        width: auto;
        z-index:10;
    }

    article {
        position: relative;
        margin: 45px 45px 0 45px;
        padding: 0;
        width: 100%;
    }

    /*sidebar layout*/
    nav{
        position: relative;
        top: 30px;
        /*margin-left: 10px;*/
        /*width:470px;*/
    }

    .logo{
        border-radius: 10px;
        width:120px;
        /* height:100px; */
        margin: 30px 0 0 0;
        padding:0;
        float:right;
        /* background-color: black; */
    }
    nav ul{
        list-style：none;
        margin-left:10px;
        padding:0;

    }

    nav ul li{

        list-style: none;
        border-radius: 5px;
        background: black;
        display: table;
        margin: 0 10px 10px 0;
        /* padding:0; */
        width:80%;
        /* height:45px; */
        float:left;
    }

    nav ul li:hover{
        background:#ffee00;
    }

    nav ul li a {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        font-size: 1.2em;
    }

    .notes{
        position: relative;
        margin: 360px 0 70px 60px;
    }

}

/*content layout*/
.content{
    margin:5px 0 0 0;
    width: 860px;
    /* float: right; */
}


.statement{
    margin: 0 120px 20px 20px;
}

.class, .project{
    /*position: relative;*/
    display: inline-block;
    border-radius: 7px;
    /*background-color: dimgray;*/
    width: 270px;
    height:360px;
    margin: 0 0 10px 10px;
    padding: 0;
}

.project{
    height:270px;
}

.class:hover,.project:hover{
    background-color: #ffee00;
    z-index: -1;
}

/*.content :hover{*/
    /*background-color: #ffee00;*/
    /*z-index: -1;*/
/*}*/

.class_logo, .project_logo{
    display: inline-block;
    width: 250px;
    height:125px;
    margin: 10px 10px 0 10px;
    padding: 0;
 }

.class_img, .project_img{
    border-radius: 5px 5px 0 0;
    margin:0;
    padding:0;
}

.class_logo:hover, .project_logo:hover{
    webkit-filter: blur(2px);
    filter: blur(2px);
}
.class_intro, .project_intro{
    display: inline-block;
    background:white;
    /*background: #f0f0f0;*/
    border-radius: 0 0 5px 5px;
    width: 240px;
    height:125px;
    margin: -2.5px 10px 5px 10px;
    padding: 5px;
    z-index: -1;
    overflow: hidden;
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.1em;
}
.class_intro:hover{
    /*background: #f0f0f0;*/
    background:white;
    border-radius:5px;
    height:250px;
    margin: -127.5px 10px 5px 10px;
    z-index: 10;
}
.project_intro{
    /*background:white;*/
    margin: 0 10px 5px 10px;
    height:40px;
    line-height: 1.25em;
}
.project_intro:hover{
    background:white;
    border-radius:5px;
    height:165px;
    margin: -125px 10px 5px 10px;
    z-index: 10;
}

.class_title, .class_time, .class_lan,.project_title, .project_time,.project_lan{
    display: inline-block;
    width: 250px;
    margin: 0 10px 5px 10px;
    padding: 0;
}

.class_title, .project_title{
    font-weight: bolder;
}

.class_link, .project_link{
    display: inline-block;
    width: 250px;
    margin: 0 10px 10px 10px;
    padding: 0;
}

a{
    text-decoration: none;
}

.class_link >a,.project_link >a,.class_lan >a,.project_lan >a,span,.notes >a,.description >a,em >a{
    border-radius: 2px;
    color: #555;
    padding: 0 2px 0 2px;
    background: #ffee00;
}

.tab_highlight{
    font-weight: lighter;
    font-size: 1.5em;
}


/*project info page*/
.title{
    font-size: 4.5em;
}

.subtitle{
    font-size: 2em;
    font-weight: bold;
    padding: 4px 8px;
}

.description{
    padding: 0px 18px;
    width: 764px;
    text-align: justify;
    font-size: larger;
    line-height: 1.5em;
}

.hide_content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.p5_sketch{
    width: 800px;
    border-radius: 50px;
}

img {
    border-radius: 5px;
}

.center_img {
    display: block;
    margin: 0 -18px;
}

.center_video{
    display: block;
    margin: 0 -18px;
    border-radius: 5px;
}

p>a{
    /*text-decoration: none;*/
    /*color: dimgray;*/
    background: #ffee00;
}


canvas {
    vertical-align: top;
}

.collapsible {
    background-color: white;
    color:  #555;
    cursor: pointer;
    padding: 4px 8px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    /* font-size: 15px; */
    /* font-size: x-large;  */
    /* font-weight: bold; */
  }
  
  .active, .collapsible:hover {
    padding-left: 4px;
    background-color: #ffee00;
  }
  
  .collapsible:after {
    content: '\002B';
    color: black;
    font-weight: bold;
    float: right;
    /* margin-left: 5px; */
  }
  
  .active:after {
    content: "\2212";
  }


  #bio {
    width: 440px; 
    position: absolute; 
    bottom: -1em; 
    right: 0; 
    font-size:12px;
}

#profile_div {
    position: relative; 
    width: 800px
}

#profile{
    width: 320px;
}

#bio{
padding: 0 10px;
}

@media only screen and (max-device-width : 1024px) {
    /*project info page*/
    .title{
        font-size: 6vw;
    }
    
    .subtitle{
        font-size: 4vw;
    }
    
    .description{
        width: 764px;
        text-align: justify;
        font-size: 3vw;
        line-height: 4.5vw;
    }
    #bio {
        position: initial;
        width: 100%;  
        font-size: 3vw;
        padding: 0 18px;
    }

    #profile_div {
        position: initial;
        border-radius: 5px;
    }
    
    #profile{
        position: initial;
        width: 100%;
        border-radius: 5px;
    }

    #bar > nav > p{
        display:none;
    }

    #bar > nav > ul > li > a > span{
        background: none;
        color:white;
        font-size: 2em;
    }

    .tab_highlight{
        font-weight: lighter;
        font-size: 2vw;
    }

    #contact_aven{
        float:right;
        text-align: center;
        width:120px;
        margin: 0 -120px 0 0;
        padding:0;
    }
    
}