/**LPROJECTS PROJECTS PROJECTS PROJECTS PROJECTS PROJECTS PROJECTS PROJECTS**/

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}
body{
  background-color:black;
  background-image: url(galaxy.gif);
  color: #382633;
  font-family: monospace;
  font-size: 100%;
  overflow-x: hidden;
  max-width: 100%
}

.container{
  /**background-image: url(purple.jpg);**/
  border-radius: 20px;
  background-color: #CCC0D8;
  width: 70%;
  margin: auto;
  padding: 2%;
  display: flex;
  flex-direction: column;
  margin-top:1rem;
  margin-bottom:1rem;
}

nav{
  border-radius: 10px 10px 0 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  background-color:#96889D;
  outline: 4px solid #4B3B49;
}
nav img{
  margin-right: .6rem;
}
  
nav ul{   /**clean this up later dear god**/
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: .5rem;
  margin-right: 1rem;
  padding: 0;
}

nav ul li {
  border-radius: 10px;
  background-color: #a23939;
  font-weight: bold;
  outline: 2px solid #3b0404;
  list-style-type: none;
  padding: .5rem;
}

nav ul li:hover{
  background-color:#3ab0c5;
  outline: 2px solid #0E1C1F;
}

nav ul li a{
  display: block;
  text-decoration: none;
  color:#3b0404;
}

nav ul li:hover a{
  color: #0E1C1F;
}


main{
  padding: 5%;
  background-color: #E4D9F4;
  outline: 4px solid #4B3B49;
  overflow-wrap: break-word;
  display:flex;
  flex-direction: column;
}

main ul{
  padding: 2%;
  list-style-type: none;  
}

main ul li{
  margin: 2%;
  border-radius: 10px;
  background-color: #fb716f;
  text-align: center;
  font-weight: bold;
  outline: 3px solid #382633;
  list-style-type: none;
  padding: .5rem;
}

main li a{
  color: #382633;
  text-decoration: none;
}

main li:hover {
  border-radius: 10px;
  background-color: #a23939;
  font-weight: bold;
  outline: 2px solid #3b0404;
  list-style-type: none;
}

main li:hover a{
    color:#3b0404;;
}

h1, h2, h3{
  padding: .3rem;
  margin-top: .8rem;
}

p{
  font-family: Verdana, sans-serif;
  padding: .3rem;
  text-align: justify;
}

main img{
  max-width: 40px;
  width: 100%;
  height: auto;
  display: block;
}

article {
  outline: 2px solid #142c34;
  display: flex;
}


footer{
  background-color: #96889D;
  outline: 4px solid #4B3B49;
  border-radius: 0 0 10px 10px;
}


@media screen and (max-width: 680px) {
  .container{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
   nav{
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
    nav ul{
    display: flex;
    gap: 1rem;
    padding: 0;
  }
  
  main{
    padding: 2%;
  }


}