/*@keyframes fadein { 
    0% { 
        opacity: 0; 
        filter:blur(4px);
    } 
    100% { 
        opacity: 1; 
        filter:blur(0);
     } 
} 


body{
   animation: fadeIn ease 3s 
  }*/
#top{
        width:100%;border-color:pink;border-style:solid;color:pink;background-image:url("gradient.png");border-right-style: none;border-width:1px;}
      #top h1{
        color:pink;font-size:56px; width:90%;display:inline;}
      #top #minihead {height:100%; background-color:red;display:inline;float:right;}
      *{margin:0;background-color:black;color:white;font-family:arial;max-width:100%;overflow-x: hidden;}
      #right h1,p{color:yellow;}
      @media only screen and(max-width: 509px){

        #announcement{
          background-color:red;
        }
      }

      @media only screen and (max-width: 509px){
        hr{
          border-style:solid;border-color:yellow;}
        #announcement{
          color:teal;
          text-align: center;border-style:solid;
          border-width:1px;
          border-color:teal;opacity:.5;
          transition:all 0.3s;}
        #list{height:0px;transition:all 1s;opacity:0;}
        #announcement:hover{
            opacity:1;
        }
        #announcement:hover #list{
            opacity:1;
            height:10em;
        }
        #content{
          margin-top:1px;
          width:100%;
          min-height:100%;}
        #left{
          width:100%;border-color:skyblue;color:skyblue;
          border-style:solid;width:auto; 
          transition: all 1s;
        }
        .bar{
          border-style:none;color:skyblue;
          width:100%;width:24%;margin:0;
          height:3em;transition:all .5s;}
        .bar:hover{
          color:black;background-color:skyblue;
        }

      }

      @media only screen and (min-width: 510px) {
        hr{
          border-style:solid;border-color:yellow;}
        #list{height:0px;transition:all 1s;opacity:0;}
        #right h1,p{transition:all 1s;}
        
        
        #list a{color:white; opacity:.4; transition:all 1s;}
        #list a:hover{color:skyblue; opacity:1;}
        
        
        #announcement{
          color:teal;
          text-align: center;border-style:solid;
          border-width:1px;
          border-color:teal;opacity:.5;
          transition:all 0.3s;}
        #announcement:hover{
            opacity:1;
        }
        #announcement:hover #list{
            opacity:1;
            height:10em;
        }
        #content{
          margin-top:1px;
          width:100%;
          min-height:100%;}

        #right{
          border-color:yellow;color:yellow;
          border-style:solid;border-left-style:solid;
          width:87%;height:100%;
          z-index:1;float:right;
          border-width:1px;transition: all 1s;
          padding-left:1em;display: inline-block;}

        #right sub{color:yellow;opacity:.2;transition: all 1s;}
        #right sub:hover{opacity:1;}
        #left{
          display: inline-block;min-width:8%;
          min-height:100%;border-width:1px;
          border-color:skyblue;color:skyblue;
          border-style:solid;width:auto;
          opacity:.4;transition: all 1s;}
        #left:hover{
          min-width:49%;opacity:1;}
        #left:hover + #right{
          width:49%;opacity:.4;
          padding-left:0em;}
          
        .bar{
          border-style:none;display:block;
          color:skyblue;width:100%;
          height:3em;transition:all .5px;}
        .bar:hover{
          background-color:skyblue;color:black;}
        .bar:action{
          background-color:white;}
 
        }

        .home,.about,.proj,.links{visibility: hidden;display:none;}
    #right img{max-width:20em;min-width:20em;opacity:.5; transition: all .2s;}
    #right img:hover{opacity:1;}


}
/*@media only screen and (min-width: 1000px) {
      #announcement{
        color:orange;
        width:100%;
        text-align: center;
      }
      #content{
        margin-top:2em;
        width:100%;
        height:100%;
        background-color:red;
      }
      #left{
        border-color:skyblue;border-style:solid;
        min-width:28%;min-height:20em;
        z-index:1;
        display:block; float:left;
        border-left-style: none;}
      #right{
        border-color:yellow;
        border-style:solid;
        min-width:70%;
        min-height:20em;
        z-index:1;
        display:block; float:right;}
        }*/