@font-face{
  font-family: dicotbold;
  src: url('dicotbo_.ttf');
} 

@font-face{
  font-family:'poppinsRegular';
  src: url('Poppins-Regular.ttf');
}

.title{
    display:flex;
    background-color:rgb(255, 255, 255);
    justify-content:space-around;
    align-items:center;
}
    .title t{
        font-size:50px;
        color:rgb(30, 29, 29);
        /* color:#FF0000; */
        /* font-weight: bold; */
        /* font-family: 'dicotbold'; */
        /* padding: 20px; */
        padding: 30px;
        /* font-family: 'poppinsregular'; */
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        
    }

    .title img{
      float: left;
      padding: 5px;
      display:flex;
      align-self:center;
      height:50px;
      
    }



.overall{
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    background-color:rgb(252, 252, 252);
    margin:40px;
    padding:40px;
    flex-wrap:wrap;
    overflow-wrap: break-word; 
}

.username{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  justify-content: center;
  column-gap: 8px
}

.topBar {
  background-color: #106eea;
  width:100%;
  height:35px;
}


/* Top navigation bar from https://www.w3schools.com/howto/howto_js_topnav.asp*/
.topnav {
    /*was the blue*/
    background-color: #106eea;
    overflow: hidden;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    color: #f2f2f2;;
    text-align: center;
    padding: 14px 30px;
    text-decoration: none;
    font-size: 20px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Add a color to the active/current link */
  .topnav a.active {
    background-color:  #333;
    color: white;
  }

  

 

  .area{
    display:flex;
    justify-content:center;
    
  }

  .area l{
    float: left;
    text-align: center;
    padding: 14px 30px;
    text-decoration: none;
    font-size: 20px;
    background-color:  #333; 
    color: white;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }
  

body{
    margin:0;
    background-color:rgb(235, 235, 235)
}

.container{
  display:flex;
  justify-content:center;
  align-items:center;
}



.box{
  align-self:center;
  align-content:flex-start;
  margin-top:20px;
  width: 1000px;
  height:fit-content; 
  background-color: rgb(30, 32, 32);
}


  .box img{
      width:100%;
      height:350px;
      object-position: 0% 0%;
      object-fit:cover;
      opacity:0.9;
  }

  .box img:hover{
      opacity:0.95;
  }

  .boxText{
      display:flex;
      flex-direction:column;
      margin:10px;
      align-items:baseline;
  }

  .box a{
    color:aliceblue;
    font-size:25px;
  }

opening{
  font-weight:700;
  margin-left:5px;
  font-size: 200%;
  color:rgb(215, 218, 220);
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

  
}
explanation{
  font-size: 125%;
  color:rgb(215, 218, 220);
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}

.column{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:flex-start;
  column-gap:20px;
}



.spaceBelow{
  width:100%;
  height:200px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
}


text{
  align-self:flex-start;
  row-gap:5px;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

top{
  font-size:30px;
  font-weight:700;
  align-self:flex-start;
  row-gap:10px;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.bottom{
  margin:30px;
}

p, h1, h2, h3, h4, h5{
  color:#6B717E;
  font-family:'poppinsRegular';
  /* font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
}

hr{
  border-color:#6B717E;
}

.overallYellow{
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  background-color:rgb(206, 240, 14);
  margin:40px;
  padding:40px;
}

grey{
  color:rgb(30, 29, 29);
  font-weight: bold; 
  font-family: 'dicotbold';
  padding:5px;
}