html {
font-size: 100%; /*Sets my font size to atleast 100%*/



}
body { /*Creates the base for my wesbsite*/

    background-color: rgb(22, 22, 22); /*Sets my background color*/
    margin: 0;
    padding: 2%;
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif; /*sets my fonts*/
    
}
.header1 {
    background-color: rgb(22, 22, 22); /*Sets my background color*/
 
    padding: 2% 30% 2% 2%;
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif; /*sets my fonts*/
    text-align: center;
    border-style: none none solid none;
    border-color: white ;
   
}

.direct { /*This styles my header bookmarks*/
    border: 3px inset white;
    display: inline-block;
    width: 100px;
    height: 40px;
    margin: 15px;
    padding: 1%;
    border-style: solid;
    color: rgb(199, 198, 198);
    font-size: 125%;
    line-height: 1em;
}



h1 { /*sets my big welcome image*/
    font-size:500%;
    color:rgb(115, 222, 255);
    
}
h2 { /*Sets my text that introduces each section*/
    font-size: 300%;
    color: rgb(115, 222, 255);
    
}

h3 { 
    font-size: 300%; /*sets my white text for my welcome*/
    color: antiquewhite;
    padding: 0 0 25px 0;
}

h4,h5,h6 {

}


p{ /*Sets my paragraph text*/
    color: rgb(199, 198, 198);
    font-size: 125%;
    line-height: 2em;
}


.container { /*sets the second layer of my website*/
    background-color: rgb(22, 22, 22);
    border: 10px;
    padding: 3%;
    margin: auto;
    width: 70%;
    max-width: 2000px;
 
}
.body2 { /*sets the boxes for my different sections*/
    background-color: rgb(32, 32, 32);
    border: 10px;
    padding: 3%;
    margin: 50px;
    font-family: Arial, Helvetica, sans-serif;
    overflow:hidden
}

.bookmark { /*designs my bookmarks*/
    border: 3px inset white;
    width: 100px;
    height: 40px;
    margin: auto;
    padding: 1%;
    text-align: center;
    color: rgb(199, 198, 198);
    font-size: 125%;
    line-height: 1em;
}


#pic { /*costomizes my recent art*/
    margin: 50px;
    float: inline-start;
    width:auto ;
    height: 500 ;
    margin: 1%;


}

a:link { /*costomizes my links*/
    color: antiquewhite; 
}

a:visited { /*costomizes my links*/
    color: antiquewhite;
}
a:hover { /*costomizes my links*/
    color:rgb(115, 222, 255 );
}

ul li { /*costomizes my list*/
    color: rgb(255, 255, 255);
    margin: 20px;

  }

  #list1 {
    font-size: 200%;
  }
  a:link {
    text-decoration: none;
  }
  
  a:visited {
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: none;
  }
  
  a:active {
    text-decoration: none;
  }