@font-face {
    font-family:mustardo;
    src: url(/font/mustardo.ttf);
}
@font-face {
    font-family:cascade;
    src: url(/font/Cascade\ Script\ LT.ttf)
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
.nav{
   padding: 0 100px; 
   margin: 0;
   text-decoration: dashed;
   font-size: 38px;
   font-family: cursive;
   font-weight: bold;
   color: white;
   font-family: mustardo;
   text-shadow: 0 0 3px black, 0 0 5px darkblue;
}

.container {
    width: 70%;
    margin: 50px auto;
    padding: 10px;
}
 .container .box{
     width: 100%;
     padding: 50px;
     background: black;
     margin-top: 50px;
     border-radius: 10px;
     box-shadow: 0 0 10px -3px rgba(0, 0, 0, .1);
     color: white;
 }
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    
}
body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background: #141719;
}

.banner-area{
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(5, 5, 5, 0.5), rgba(5, 5, 5, 0)), url(/image/wp5166727.jpg);
    background-size: cover;
    
   ;
    
}
.content-area{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    

}
.content{
    text-align: center;
}

.content h1{
    
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
    color: white;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80%;
    padding: 20px;
    text-align: center;
    font-family: cascade;
    font-variant:small-caps;
      }
    

.content p{
    font-size: 20px; 
    font-family: cursive;
    color: black;
    text-shadow: white;
    -webkit-text-size-adjust: initial;

}
 .about-me h2 {
     font-size: 50px;
     font-family: Arial, Helvetica, sans-serif;
 }

.topnav {
    
    overflow: hidden;
    position: absolute;
    right: 34px;
    top: 1px;
    display: inline-block;
    
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color:black;
  color: white;
}


.topnav-right {
  float: right;
}