body{
  background-image: url('/public/images/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  font-family: Trebuchet MS;

  display: flex;
  justify-content: center;
  }
  

h1,h2,h3,p,a,ul,li{
  margin: 0 ;
  padding: 0;
  }  
  
  
.layout{
    width:100%;
    display: flex;
    justify-content: center;
    padding-top: 25px;
}
  
  
main{
  width:900px; 
    border: 3px #39393A solid;
    
  border-radius: 2px;
  overflow: hidden;
    }
  
      
header{
    background: #347FC4;
    font-size: 18px;
    padding: 20px;
    
    }
  
  
  
  .columns{
    display: flex;
    border-bottom: 3px solid #39393A;
    border-top: 3px solid #39393A;
    }
  

  
.sidebar{
  overflow:hidden;
    display:flex;
    flex-direction: column;
    width: 200px;
    padding: 20px;
    border-right: 3px solid #39393A;
    background: #197BBD;
    justify-content: space-between;
  }
    
    
.nav, li, a{
  color: black;
  cursor: pointer;
  font-size: 18px;
  text-decoration: none;
  list-style: none;
}
  
  .nav{
    display: flex;
    flex-direction: column;
    gap: 6px;
    }
  

.nav, ul, li, a:hover{
  color: #5E2BFF;
}
  
    
    
.content{
  width: 700px;
  padding: 20px;
  background: #63B0CD;
}
    
  

footer{
  background: #347FC4;
  font-size: 20px; 
  padding: 20px 10px;
  display:flex;
  justify-content: space-between;
}