/*#4382B0-medium blue
#1E5083-dark blue
#6FABD0-light blue
#D0D3D6-silver
*/
body{
  background-image: url("blog2.jpg");
  cursor: url("blogc.gif"), auto;
   font-family: "Press Start 2P";
   color:#4382B0 ;
   margin: 0 auto;
	padding: 0;
}

.file{
  position: absolute;
  left:6%;
  bottom: 72%;
  margin-top: 0;
  transition: 0.3s ease;
}
.file:hover{
  transform: rotate(-10deg);
}
.computer{
  position: absolute;
  left: 84%;
  bottom: 72%;
  margin-top: 0;
  transition:0.3s ease;
}
.computer:hover{
  transform: rotate(10deg);
}
.box3{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 8fr 2fr;
  margin: 50px;
}
header,.directory{
  border: 4px solid #4382B0;
  background-color:#D0D3D6 ;
  opacity: 0.8;
  border-radius: 20px;
}
main{
    border: 4px solid #4382B0;
  background-color:#D0D3D6 ;
  border-radius: 20px;
}
header{ 
  margin: auto;
  grid-row: 1/2;
  grid-column: 1/3;
  max-width: 100%;
  padding:0.5%  10%;
 
}
  h1,h3{
    text-align: center;
    color: #1E5083;
  }

main{
  padding: 10px;
  line-height: 20px;
  grid-row: 2/3;
  grid-column: 1/2;
  max-height:400px;
  overflow: scroll;
}
.directory{
  grid-row:2/3;
  grid-column: 2/3;
  line-height: 20px;
  padding: 10px;
  height: max-content;
}
a{
  text-decoration: none;
  color:#4382B0 ;
}
a:hover{
  color: #6FABD0;
}
.texta{
  color: #1E5083;
  text-decoration: underline;
}