@font-face {
        src: url(https://cinni.net/fonts/basiic.ttf); 
        font-family: basiic;
} /* normal font */
    
::selection {
    color:white;
    background-color:  #3399ff;
}

::-moz-selection {
    color:white;
    background-color:  #3399ff;
}
       
p{
    margin:0px;
    font-family: basiic;
    font-size:20px;
}

a {
    transition: .4s;
    text-decoration:none;
    color:black;
}

      
body{
    margin:0px; 
    height:796px;
    overflow:hidden;
}  
   
   #main{
   margin: auto;
   position: absolute;
   top: 50%; left: 50%;
   transform: translateX(-50%) translateY(-50%);
   width:800px;
   padding:20px;
   padding-top:50px;
   }
   
   #nav{
   height:100%;
   width:200px;
   left:0px;
   border-right:1px solid black;   
   background-color:white;
   padding:0px 15px;
   text-align:center;
   position:absolute;
   background-image: url(/media/bg22.png);
   
   }  
   
   #head{
   width:calc(100% + 8px);
   border:1px solid black; 
   background-color:white;
   background-image: url('https://i.pinimg.com/564x/f7/21/9f/f7219f2f03054261e50f7d260047388a.jpg');
   height:150px;
   background-size: cover;
   margin-bottom:10px;
   }
   
   .hai{
     filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(0 2px 0 white) drop-shadow(0 -1px 0 white) drop-shadow(0 1px 1.5px white) drop-shadow(0 -1px 1.5px white) drop-shadow(1px -1px 1.5px white) drop-shadow(-1px -1px 1.5px white);
     width:70%;
   }  
   
   #title{
    color:black; 
    
   }  
   
   #box{
    padding:5px;
    border:1px solid black; 
   background-color:white;
   height:25%;
   }  
   
   
   #cont {
       justify-content: space-between;
     
   height:100%;
   width:100%;
   display: grid;
   grid-template-columns: 15% 35%;
   grid-gap:31px;
   
   } 
   
   #column {
     background-position: center;
     background-size: cover;
     background-attachment: fixed;
     padding:0px;
     width:100%;
     text-align:center;
   }