html body{
  background-color: #222831;
  color: #DDDDDD
}
html a{
  text-decoration: none;
  color: inherit;
}
h1{
  font-family: "Boogaloo", sans-serif;
  font-weight: 400;
  font-style: normal;
  background:none;
  color: #F05454 !important;
  font-size: 4rem !important;
}
nav{
  display: flex;
  justify-content: space-evenly;
  font-family: "Boogaloo", sans-serif;
  font-weight: 400;
  font-size: 2rem;
  background-color:#30475E;
  box-shadow: 0px 0px 10px #DDDDDD;
  border-radius: 15px;
  margin: 15px;
  padding-top: 15px;

}
nav p:hover{
  color: #F05454;
}
#intro-container{
  display: inline-block;
  box-sizing: border-box;
  margin: 50px;
  padding: 25px 25px 0 25px;
  border-radius: 15px;
}
#intro{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
}
#intro p{
  font-size: 16pt;
}
#intro img{
  max-width: 100%;
  max-height: 100%;
  margin-bottom: 0;
}
#body-container{
  margin: 50px;
  padding: 20px;
  background-image: linear-gradient(to bottom right, #222831, #30475E);
  border-radius: 15px;
  box-shadow: 0px 0px 10px #DDDDDD;
  padding: 25px;
}
#body-container h2{
    font-family: "Boogaloo", sans-serif;
  font-weight: 400;
  font-style: normal;
  background:none;
  color: #F05454 !important;
  font-size: 3rem !important;

}
#body{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
  justify-content: center;
  align-items: center;
  color: #F05454 ;
  text-shadow: 0 0 10px #222831;
}
.body{
  width: 350px;
  height: 500px;
  background-size: cover;
  border-radius: 10px;
  margin: 25px;
  padding: 15px;
  box-shadow: 0px 0px 10px #222831;
  align-self: center;
}

.body:focus,
.body:hover{
  box-shadow: 0px 0px 10px #DDDDDD,
  inset 0px 0px 100px #DDDDDD;
  
}


.one{
  background-image: url(./AI/field\ notes\ final\ 3.jpg);
  background-position-x: center ;
  background-position-y: 25px;
}
.two{
  background-image: url(./McD/McD_Big_Mac.png);
  background-position: center;
}
.three{
  background-image: url(./ID/03_bookcover_Burns_Trey.jpg);
  background-position-x: 600px;
}
.four{
  background-image: url(./PS/Burns_Trey_froggy\ self\ portrait.jpg);
  background-position: right;
}

.five{
  background-image: url(./Pho/BW6.jpg);
}
.six{
  background-image: url(./Pho/yNvXLGfbcH4oYr39fXET6Y-1200-80.jpg);
  background-position: center;
}

.carousel{
  width: 800px;
}

#Assignments-page{
  display: flex;
  justify-content:center;
}
#Assignments-page h3:hover{
  color: #F05454;
}
#Assignments-page h2{
  text-decoration: underline;
}
#Assignments-container{
  margin: 50px;
  padding: 20px;
  background-image: linear-gradient(to bottom right, #222831, #30475E);
  border-radius: 15px;
  box-shadow: 0px 0px 10px #DDDDDD;
  padding: 25px;
  text-align: center;
  width: fit-content;
}

#Assignments-box{
  text-align: left;
}

@media (max-width: 1000px){
  #intro-container{
   align-items: center;
   text-align: center;  
  }
  #intro{
    flex-direction: column;
  }
  #intro p{
    font-size: 12pt;
  }
  #body{
    grid-template-columns: 1fr;
  }
  .body{
    width: 230px;
    height: auto
  }
}