@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Shafarik&display=swap');
main
{
    background-color: darkgreen;
    flex-direction: column;
    align-items: center;
    padding: 2em;
    display: flex;
    flex-direction: row;
}
.tur.nav ul li a:link 
{
  color: turquoise;
}

.cadet.nav ul li a:visited 
{
  color: cadetblue;
}

.brown.nav ul li a:hover 
{
  color: brown;
}

.gray.nav ul li a:focus 
{
  color: gray;
}

body
{
    background-color: lightgreen;
    line-height: 1.6;
    color: #333;
}
header p
{    
color: darkgreen;
padding: 1em;
text-align: center;
}
h1
{
    background-color: darkgray;
    color: lightskyblue;

}

.colorcode
{
    color: hotpink; 

  background-color: hsl(300, 20%, 90%); 

  border-color: rgb(110, 118, 20); 

  text-shadow: 0 0 5px red; 
}

h1
{
    font-family: "Press Start 2P", serif;
    font-weight: 400;
    font-style: normal;
    margin-top: 20px; 
    border: 3px dashed lightseagreen;
    padding: 1em; 
  }
h2
{
    font-family: "Press Start 2P", serif;
    font-weight: 400;
    font-style: normal;
  }
h3
{
    font-family: "Press Start 2P", serif;
    font-weight: 400;
    font-style: normal;
    margin-top: 20px; 
    border: 3px dashed lightseagreen;
    padding: 1em; 
}
h4
{
  margin-top: 20px; 
  border: 3px dashed lightseagreen;
  padding: 1em; 
}
p
{
    font-family: "Press Start 2P", serif;
    font-weight: 400;
    font-style: normal;
    margin-top: 20px; 
    border: 3px dashed lightseagreen;
    padding: 1em; 
  }
.col ul
{
    column-width: 250px;
    column-count: 3; 
    column-gap: 20px;
    column-rule-style: dashed;
}
.desendant h3 
{
  column-span: 30;
}

h1 {
  font-size: 15;
    text-align: center;
    color: darkblue;
  }
  
  h2 {
    text-align: center;
    color: darkblue;
  }
  
  p {
    text-align: center;
    color: darkblue;
  }
  ul.decendant li {
    margin: 2em;
  }
  .green-outline{
    background-color: yellowgreen;
  }
  .yellow-outline.green-outline{
    background-color: yellow;

  }
ul li a:hover
    {
    font-size: 200%;
    color: red;
    }
    a {
      color: blue;
    }
    
    .first:first-letter{
      font-size: 2em; 
      font-weight: bold;
    }
    .fix:p{
      text-align: center;
    color: darkblue;
    }
    nav ul li:hover {
  color: black;
  background: yellow;
  align-items: center; 
  padding: 1em; 
}
nav ul li {
  list-style-type: none;  
  text-decoration: none;
}
nav ul li a:link { 
  text-decoration: none; 
} 
.container{
  background-color: green;
  width: 100%; 
  border: 2px solid black;
  padding: 15px;
  margin: 0 auto;
}
img {
  max-width: 100%;
  height: auto;
  margin-top: 20px; 
  margin-bottom: 10px;
  border: 3px dashed lightseagreen;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5);
  
}
.float-right {
  float: right; 
}

.float-left {
  float: left; 
}
@media (max-width: 767px) {
.column {
  display: flex;
  flex-direction: column;
  width: 33.33%; 
  box-sizing: border-box; 
  max-width: 767px;
  width: 50%;
  padding: 20px;
}
}
@media only screen and (max-width: 767px) {
  body {
    flex-direction: column;
     /* background color becomes lightblue */
    background-color: lightskyblue;
  }
}