/*
#menu{
    width: 205px;
    height: 100%;
    background-color: purple;
    float: left;
    z-index: 1;
    position: fixed;
    margin-right: 10px;
    padding: 0;
}
*/

.sidebar {
    height: 100%;
    width: 205px;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 40px;
    z-index: 5;
    background-color: purple;
}

#menulist{
    left: -100%;
    z-index: 6;
    font-size: 15px;
}

html{
    background-color: rgb(153, 0, 204);
}

a{
    color: violet;
    background-color: transparent;
    text-decoration: underline;
    font-family: monospace;
    text-decoration: none;
}

li{
    list-style: none;
    font-family: monospace;
    left: 10px;
}

li a:hover {
    color: rgb(255, 51, 255);
}

/*
#content{

}
*/

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

#content {
 /* font: bold normal 3vw/1.1 Arial, sans-serif; /*  the "/1.2" following the font size, sets the line height'*/
 /* The 'font' property above is shorthand for the following three properties */
 /* 	font-family: Arial; */
 /* 	font-size: 10vw; */
 /* 	line-height: 1.2; */
   
   font-size: 4vw;
   position: absolute;
   color: #ffffff;
   display: inline-block;
   padding: 8% 15%;
   margin-left: 64px;
   margin-right: 750px;
   width: 70%;
   left: 40%;
   font-family:monospace;
   z-index: 3;
   text-align: left;
   position: relative;
   left: 0px;
}

@media only screen and (max-width: 1340px) {
    #content {
        margin-left: 150px;
    }
}

@media only screen and (min-width: 1600px) {
    #content {
        margin-left: 0px;
    }
}

@media only screen and (max-height: 1230px) {
    .sidebar {
        height: 100%;
        width: 205px;
        position: fixed;
        top: 0;
        left: 0;
        padding-top: 40px;
        z-index: 5;
        background-color: purple;
    }

    #menulist{
        left: -100%;
        z-index: 6;
        font-size: 15px;
    }

    #content {
        /* font: bold normal 3vw/1.1 Arial, sans-serif; /*  the "/1.2" following the font size, sets the line height'*/
        /* The 'font' property above is shorthand for the following three properties */
        /* 	font-family: Arial; */
        /* 	font-size: 10vw; */
        /* 	line-height: 1.2; */
          
          font-size: 2vw;
          position: absolute;
          color: #ffffff;
          display: inline-block;
          padding: 8% 15%;
          margin-left: 94px;
          margin-right: 750px;
          width: 70%;
          left: 40%;
          font-family:monospace;
          z-index: 3;
          text-align: left;
          position: relative;
          left: 0px;
       }

       #hide{
        font-size: 0px;
   }
}

@media only screen and (min-height: 1230px) {
    .sidebar {
        height: 140px;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        padding-top: 40px;
        z-index: 5;
        background-color: purple;
    }

    /*
    #menulist{
        left: -100%;
        z-index: 6;
        font-size: 13px;
        display: inline;
        float: right;
    }
    */

    li{
        list-style: none;
        font-family: monospace;
        top: 60px;
        float: left;
        margin-top: -30px;
        margin-right: 34px;
        overflow: hidden;
        text-align: left;
    }

    #jellylogo{
        left: 10px;
        top: 20px;
        position: absolute;
        width: 10px;
        margin-right: 670px;
    }
    
    li a:hover {
        color: rgb(255, 51, 255);
    }

    #content {
        /* font: bold normal 3vw/1.1 Arial, sans-serif; /*  the "/1.2" following the font size, sets the line height'*/
        /* The 'font' property above is shorthand for the following three properties */
        /* 	font-family: Arial; */
        /* 	font-size: 10vw; */
        /* 	line-height: 1.2; */
          
          font-size: 4vw;
          position: absolute;
          color: #ffffff;
          display: inline-block;
          padding: 8% 15%;
          margin-left: 64px;
          margin-right: 750px;
          margin-top: 100px;
          width: 70%;
          left: 40%;
          font-family:monospace;
          z-index: 3;
          text-align: left;
          left: 0px;
       }

       #hide{
            font-size: 18px;
       }
}