body {
  background-image:url("https://codecraftworks.dev/web/41cQaNW4yoAnrYNy4ZPm/assets/resul-mentes-DbwYNr8RPbg-unsplash (1).jpg")}


h1
{
Color: white;
  font-family: "Alan Sans", sans-serif;
  text-shadow: 2px 2px 2px #000000;
  
  
}
h2 {
   font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  Color: White;
  font-size:18px
}

h3{
font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  Color: White;
  font-size:22px;
text-decoration: underline;}

p {
  font-family: "Alan Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  
  font-size:21px
    
}

header {
	background-color:
background: #572AD9;
background: radial-gradient(at left top, #572AD9, #8AEDDB);;
  margin-top: 5px;
  
  
}

footer {
	background-color: #e2e0ba;
  
}
.box {
background: #420F6E;
background: radial-gradient(at right bottom, #420F6E, #188CAE);
   margin-top: 5px;
  Padding:4px;
  margin-left: 5px;
  }

.web
{background: #420F6E;
background: radial-gradient(at right bottom, #420F6E, #188CAE);
   margin-top: 5px;
  Padding:4px;
  margin-left: 5px;
display: flex;
  flex-wrap: wrap;
  Justify-content: Space-between;
}
  
 .remediation
{background: #420F6E;
background: radial-gradient(at right bottom, #420F6E, #188CAE);
   margin-top: 5px;
  Padding:4px;
  margin-left: 5px;
display: flex;
  flex-wrap: wrap;
  Justify-content: Space-around;
}

.design {
background: #420F6E;
background: radial-gradient(at right bottom, #420F6E, #188CAE);
   margin-top: 5px;
  Padding:4px;
  margin-left: 5px;
display: flex;
  flex-wrap: wrap;
  Justify-content: Space-around;
}



.skip{
Position: absolute;
Left:-10000px;
width:1px;
  
 
height:1px;
overflow: hidden;}
  
.skip:focus {
position: auto;
width: auto;
height:auto;}
 
a:link {
  background-color: White;
  display: flex;
    width: 50%;
  text-align: center;
   text-decoration: none;
   justify-content: center;
 }

a:hover {
  background-color: #261758;
color: white;
  text-decoration: none;
  }

a:visited {
	color: #669999;
}

#nav {
	width: 100%;
  background-color: White;
   font-family: "Alan Sans", sans-serif;
  
}


#navitems {
	display: flex;
}
#navitems a {
	flex-grow: 1;
  flex-basis: 0;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  color: #261758;
}
#navitems a:hover {
	background-color: #261758;
  color: white;}

#nav label,
#hamburger {
	display: none;
}

#Projects {


}

@media (min-width: 600px) {
  .web
  { 
    display: flex;
  }
@media (min-width: 600px) {
  .Remediation
  { max-width:60vw
    display: flex;
  }
@media (min-width: 600px) {
  .box
{
  	display: flex;
    justify-content: center;
   max-width: 100vw;
   flex-direction: column;
   padding: 1em;}
  
  @media (min-width: 500px) 
{ project {
  display: flex;
   max-width: 80%;
  flex-direction: column;
  Justify-content: center;
  }
  
  
  }
  

@media (min-width: 576px) {
  h3:before,
  h3 {
    content: "✉️";
  }