@import './bootstrap.min.css';
@import './all.min.css';



*{
margin: 0;
padding: 0;
box-sizing: border-box;}

:root{
  --bgcolor: #eff2f1 ;
  --firstcolor: #4059ad;
  --secondcolor: #97d8c4;
  --thirdcolor: #f4b942;
  --textcolor: #424242;
  --border-radius: 5px;
  
  
}

main h3 {
    text-align: right;
    color: var(--textcolor);
    margin-right: 2rem;
}


header img{
  width: 100%;
position: absolute;

}
header .logo{
  height: 5rem;
  width: 6rem;
  position: absolute;
  margin-left: 47%;
  margin-top: 1rem;
}

header .home{
height: 2rem;
width: 2rem;
display: block;
margin-left: 4%;
margin-top: 3%;
}


.column {
    float: left;
    width:23%;
    padding: 1rem;
    margin-right: auto;
    margin-left: auto;
  }
  
  /* Style the images inside the grid */
  .column img {
    max-width: 100%;
    height: 100%;
    opacity: 0.8; 
    cursor: pointer;
    transition: all .3s;
  }
  
  .column img:hover {
    opacity: 1;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* The expanding image container */
  .container {
    position: relative;
    display: none;
  }
  
  /* Expanding image text */
  #imgtext {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 20px;
  }
  
  /* Closable button inside the expanded image */
  .closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 35px;
    cursor: pointer;
  }
  @media (max-width: 991.98px) { 
    .logo{display: none;}
  }