body { background-color: none;
    color: black; /* this changes text color */
    font-size: 18px;
    font-family: Verdana, Arial, sans-serif;      

}
#wrapper { width: 80%;
         margin-right: auto;
         margin-left: auto;
         background-color: #ffffcc; 
         min-width: 700px;
         max-width: 1024px;
         box-shadow: 3px 3px 3px #333333;
}
h1 { text-indent: 100%; 
  white-space: nowrap;
  overflow: hidden; }

H2	{ background-color: purple;
      text-transform: uppercase;
      color: white;
      font-size: 150%;
      border-bottom: 1px solid #000000;
      padding: 5px 0 0 5px;
      margin-right: 20px;
      clear: left;
      text-align: center; 
}
H3 {
    background-color: purple;

      text-transform: uppercase;
      color: white;
      font-size: 1.2em;
      border-bottom: 1px solid #000000;
      padding: 5px 0 0 5px;
      margin-right: 20px;
      clear: left;
      text-align: center; 
}
h4 {
    font-size: 50px;
}
nav { text-align: center; 
}
#nav a:link { color: #25500;
}
#nav ul { list-style-type: none;
}
#nav a unvisited {996633
}
#nav a: visited {color: #ccaa66
}
#nav a: hover {color: #330000
}
#nav a { text-decoration: none;
      padding-bottom: 15px;
}
#nav a {float: left 
width: 100px
display: bold
padding: 10px;
}
table { width: 90%;
    border-spacing: 1;
    background: #ffffcc
}
td, th { 
    padding: 10px;
    height: 80px;
    text-align: center;
    background: #ccaa66;}
    
.altrow { background-color: #ccaa66;}
.effect {background-color: #ffffcc}
  
main {background-color: yellow; <!-- text box around text -->
color: #000000 <!-- text color -->
padding: 10px; 30px; 20px; 20px;
margin-left: 150px;
overflow: auto;
}

.floatright { float: left: 20px;
              padding-left: 10px;
              padding-right: 20px;
}				
.details { padding-left: 20%;
         padding-right: 20%;
         overflow: auto;
}

/* unvisited link */
a:link {
    color: rgb(93, 5, 88);
  }
  
  /* visited link */
  a:visited {
    color: rgb(132, 75, 128);
  }
  
  /* mouse over link */
  a:hover {
    color: rgb(217, 6, 6);
    font-size:300%;
    font-family: 'Brush Script MT', cursive;
    cursor:pointer; 

  }
  
  /* selected link */
  a:active {
    color: rgb(220, 149, 165);
  }

  ul.a {
   list-style-image: url('Images/Smallpurpleeyes.png');
      
}

ul.b {
  list-style-image: url('Images/Smallpurpleeyes2.png');
}

img {
  opacity: 0.9;
}

img:hover {
  opacity: 1.0;
}

/* footer */
.container1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 60px;
  background-image: linear-gradient(red,purple,yellow,lightgreen,green,lightblue,blue);
  width: 2000px;
  padding: 0px;
  padding-left: 30px;
  padding-bottom: 300px;
  padding-top: auto;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
   
}

/* Header */ 
.container2 { 
  display: flex; 
  flex-direction: column;
  align-items: center;
  margin: 250px;
  background-image: linear-gradient(aquamarine,purple);
}

header {
  margin: -220px;
  padding: 0px;
  height: 20em;
}

/* footer eyes */
.container1:hover {
  width: 300px;
  transition: width 1s;
  filter: invert(100%);
}

/* Header */ 
.container2:hover {
  width: 300px;
  transition: width 1s;
}

/* 
  @keyframes example1 {
    0%   {background-color:none; left:0px; top:0px;}
    25%  {background-color:none; left:80px; top:80px;}
    50%  {background-color:none; left:1800px; top:1800px;}
  } 

  @keyframes example2 {
    0%   {background-color:none; left:0px; top:0px;}
    25%  {background-color:none; left:80px; top:80px;}
    50%  {background-color:none; left:1800px; top:1800px;}
    
  } 
  

  @keyframes example3 {
    0%   {background-color:none; left:0px; top:0px;}
    25%  {background-color:none; left:80px; top:80px;}
    50%  {background-color:none; left:1800px; top:1800px;}
    
  } 
  
  @keyframes example4 {
    0%   {background-color:none; left:0px; top:0px;}
    25%  {background-color:none; left:80px; top:80px;}
    50%  {background-color:none; left:1800px; top:1800px;}
    
  } 

  
  @keyframes example5 {
    0%   {background-color:none; left:0px; top:0px;}
    25%  {background-color:none; left:80px; top:80px;}
    50%  {background-color:none; left:1800px; top:1800px;}
    
  } 
  

  @keyframes example6 {
    0%   {background-color:none; left:0px; top:0px;}
    25%  {background-color:none; left:80px; top:80px;}
    50%  {background-color:none; left:1800px; top:1800px;}
    
  } 

  @keyframes example7 {
    0%   {background-color:none; left:0px; top:0px;}
    25%  {background-color:none; left:80px; top:80px;}
    50%  {background-color:none; left:1800px; top:1800px;} 

  } 
  */

  .div1:hover {
  filter: invert(100%);
  
  }

.div2:hover {
 filter: invert(100%);
}


.div3:hover {
filter: invert(100%); 
}


.div4:hover {
filter: invert(100%); 
}


.div5:hover {
filter: invert(100%);
}


.div6:hover {
filter: invert(100%);
}

.div7:hover {
  filter: invert(100%);
  }


.div8:hover {
    filter: invert(100%);
    }

/* picture */
#tech:hover {
  width: 300px;
  height: 300px;
  filter: invert(100%);
 }

/* picture */
#lk:hover {
  width: 300px;
  height: 300px;
  filter: grayscale(100%);
  transform: scaleX(-1);
}

/* picture */
#computerheart:hover {
  width: 300px;
  height: 300px;
  filter: invert(100%);
}

/* picture */
#eatsleep:hover {
  width: 300px;
  height: 300px;
  filter: invert(100%);
}

#mindset:hover {
  width: 300px;
  height: 300px;
  filter: invert(100%);
}

#fourtechs:hover {
  width: 300px;
  height: 300px;
  filter: invert(100%);
}

/* picture Logo */
#sample:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}