body {
    background-color: black;
}




header{
    margin: 5px;
    background-image: url("/images/backgrounds/cloud.jpg");
    background-color: purple;
    opacity: 75%;
    text-align: center;
    padding: 25px;
    border-style: outset;
    border-color: bisque;
    color: rgb(86, 15, 8);
    font-size: 25px;
    display: flex;
    justify-content: space-between;
}


#frame{
    height: 785px;
    display:flex;
    flex-wrap: wrap;
}
#navbar1 {
    margin: 10px;
    width: 15%;
    padding: 0px;
    background: darkblue;
    color: goldenrod;
    border-style: solid;
    border-color: silver;
    text-align: center;
    order: 1;
    overflow-x: scroll;
    
    
}

#navbar1 a{
    color: goldenrod;
    text-decoration: none;
    padding: 5%;
    text-align: center;
    display: flex;
    flex-direction: column;

}
#navbar1 a:hover{
  background: rgb(1, 1, 115);  
}



main{
    background-image: url("images/backgrounds/twinkle.gif");
    border-style: solid;
    border-color: silver;
    
    width: 65%;
    margin: 10px;

    flex: 1;
    order: 2;
    overflow-x: scroll;
    

}

#mainflex {
    display: flex;
    flex-wrap: wrap;
    height: 630px;
}

main a {
    text-decoration: none;
    color: silver;
}


#welcome1 {
    border-style: solid;
    border-color: silver;
    background-color: purple;
    opacity: 80%;
    margin-top: 25px;
    margin-left: 25px;
    color: goldenrod;
    font-size: 15px;
    height: 250px;
    width: 450px;
    padding: 20px;
    text-align: center;
    overflow-x: scroll;    
}


#tv {
    height: 200px;
    margin-top: 65px;
    margin-left: 100px;
}


#eurorack {
    margin-left: 25px; 
    margin-top:25px;
    padding:0%; 
    border-style: solid; 
    border-color: silver;
    width: 490px;
    
}

#welcome2 {
    border-style: solid;
    border-color: silver;
    background-color: purple;
    opacity: 80%;
    color: goldenrod;
    font-size: 15px;
    height: 260px;
    width: 37%;
    padding: 10px;
    overflow-x: scroll;   
    margin-left: 25px; 
    margin-top:25px;
    font-size: 15px;
    
}


#imgframe {
    width: 113px;
    padding: 5px;
    border: solid silver;
    margin: 0px;
    float: left;
    background-color: rgb(98, 4, 98)

}

#links {
    text-align: center;
    border: solid silver;
    margin-left:139px;
    padding-bottom: 5px;
    background-color: rgb(98, 4, 98);
}

#links a{
    color: goldenrod;
    text-decoration: none;
    margin: 5px;
}

#links a:hover{
  background:rgb(76, 0, 76);   
}

#news {
    float: left;
    text-align: center;
    width: 180px;
    margin-left: 25px;
    margin-top: 10px;
    border: silver solid;
    height: 240px;
    overflow: scroll;
    background-color: rgb(98, 4, 98)
}


#lavalamp {
    height: 190px;
    border: solid silver;
    padding: 15px;
    padding-right: 25px;
}

#samus {
    margin-top: 5px;
    height: 100px;
    padding-left: 10px;
    padding:10px;
    border: solid silver;
    padding-right: 12px;

}

#navbar2{
    margin: 10px;
    width: 15%;
    padding: 0px;
    background: darkblue;
    color: goldenrod;
    border-style: solid;
    border-color: silver;
    text-align: center;
    order: 3;
    overflow-x: scroll;
    
}
#navbar2 a{
    color: goldenrod;
    text-decoration: none;
    padding: 5%;
    text-align: center;
    display: block;

}
#navbar2 a:hover{
  background: rgb(1, 1, 115);  
}

#ul2 {
    overflow: scroll;
    height: 150px;
}

#tomanotchi{
    margin: 10px;
    text-align: center;
    
}

#harold {
    float: left;
    height: 104px;
    width: 78%;
    padding-left:25px;
    padding-right:20px;
    background-image: url("images/backgrounds/twinkle.gif");
    padding-top:10px;
    border-style:solid;
    border-color:silver;
    
}

footer {
    margin: 12px;
    background-color:darkblue;
    border-style: solid;
    border-color: silver;
    color: goldenrod;
    order: 4;
    overflow-y: scroll;
    height: 100px;
}


#footerflex {
    display: flex;
    flex-wrap: wrap;
}

#footerframe1{
    
    background-image: url("images/backgrounds/twinkle.gif");
    border-color: silver;
    border-style: solid;
    margin-left: 0px;
    height: 102px;
    width: 211px;
    margin:0;
    border-width: 2px;

}

#interplay {
    
    height: 100px;
    padding-left: 55px;
     
}

#horse {
    
    height: 100px;
    margin-left:0px;
    padding-left: 20px;
}

#footerframe2{
    
    background-color:darkblue;
    border-color: silver;
    border-style: solid;
    margin-left: 10px;
    height: 100px;
    padding-left:15px;
    padding-right:10px;
    width: 260px;
    display: flex;

}



#banners {
    height: 100px;
    width: 200px;
    
}

#footerframe3{
    background-image: url("images/backgrounds/twinkle.gif");
    border-color: silver;
    border-style: solid;
    
    height: 100px;
    padding-left:10px;
    width: 300px;

}

#osc {
    height: 90px;
    margin-top: 6px;
    margin-left: 55px;
   margin-right: 20px;
}


 @media only screen and (max-width: 800px) {
                #frame {
                    flex-wrap: wrap;
        
                }

                #navbar1 {
                    width: 100%;
                    order: 2;
                }

                #navbar2 {
                    width: 100%;
                    order: 3;
                }

                main {
                    order: 1;
                }

                footer {
                    order:4;
                }
               
        
            }