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

@font-face {
    font-family: MiPony;
    src: url(better-comic-sans.ttf);
    letter-spacing: 7px;
}

video{
    border: dashed;
    border-color:violet;
    border-width: 10px;
}

.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);
    overflow-x: hidden;
}

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

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

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

secret{
    color: white;
    background-color: transparent;
    text-decoration: underline;
    font-family: MiPony;
    text-decoration: none;
}

secret:hover{
    color: white;
    background-color: transparent;
    text-decoration: underline;
    font-family: MiPony;
    text-decoration: none;
}

/*
#content{

}
*/

#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: MiPony;
   z-index: 3;
   text-align: left;
   position: relative;
   left: 0px;
}

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

@media only screen and (max-width: 1640px) {
    video{
        margin-right: -20px;
        width: 61%;
   }
   
    #memeimage{
        margin-right: -20px;
        width: 61%;
   }
}

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

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

    #jellylogo{
        width: 140px;
    }

    #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: MiPony;
          z-index: 3;
          text-align: left;
          position: relative;
          left: 0px;
       }

       #picture{
              height: auto;
       }
    

       #jellylogo{
            z-index: 6;
            width: 140px;
       }
}



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

    #jellylogo{
        width: 80px;
    }

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

    li{
        list-style: none;
        font-family: MiPony;
        top: 65px;
        width: max-content;
        margin-top: -30px;
        margin-right: 25px;
        overflow: hidden;
        font-size: 11px;
        z-index: 6;
        float: left;
    }

    #baritems{
        width: 78%;
        left: 40px;
    }

    ul{
        left: 50px;
    }

    #jellylogo{
        left: 70%;
        top: 20px;
        position: absolute;
        float: right;
        z-index: 6;
        width: 100px;
    }
    
    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: 160px;
          width: 90%;
          font-family: MiPony;
          z-index: 3;
          text-align: center;
          left: -15%;       
        }

    #hide{
        font-size: 0px;
        width: 10px;
        margin-right: 90px;
    }
}

@media only screen and (max-width: 376px) {
    #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: 7vw;
          position: absolute;
          color: #ffffff;
          display: inline-block;
          padding: 8% 15%;
          margin-left: 64px;
          margin-right: 750px;
          margin-top: 190px;
          width: 90%;
          left: -29%;
          font-family: MiPony;
          z-index: 3;
          text-align: center;
       }

       #picture{
              height: auto;
       }
       
       video{
            margin-right: -20px;
            width: 105%;
       }
       
       #memeimage{
        margin-right: -20px;
        width: 117%;
        }

       iframe{
            margin-right: -20px;
            width: 300px;
            height: 220px;
            border: dashed;
            border-color: violet;
       }

       li{
        font-size: 5vw;
        list-style: none;
        font-family: MiPony;
        top: 65px;
        width: max-content;
        margin-top: -30px;
        margin-right: 25px;
        margin-top: -21px;
        overflow: hidden;
        font-size: 11px;
        z-index: 6;
        float: left;
    }


}

@media only screen and ((max-width: 430px)) {
    iframe{
        margin-right: -20px;
        width: 340px;
        height: 260px;
        border: dashed;
        border-color: violet;
   }
   
      video{
        margin-right: -20px;
        width: 97%;
   }
   
       #memeimage{
        margin-right: -20px;
        width: 99%;
   }

   #chairs{
        width: 80px;
    }
}

@media only screen and ((max-width: 378px)) {
    iframe{
        margin-right: -20px;
        width: 160px;
        height: 80px;
        border: dashed;
        border-color:violet;
    }

    video{
        margin-right: -20px;
        width: 97%;
    }

    #memeimage{
        margin-right: -20px;
        width: 150%;
   }

    #chairs{
        width: 80px;
    }
}