body {
    background-image:url("blurred.jpg");
    background-position:center;
    background-size: cover;
    font-family: "Montserrat";
    animation: fadeInAnimation ease 1s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
  }
  @keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
  }
  #mar
  {
    color:#ffd467;
    background-color: #7e0101;
    padding: 7px;
    font-weight: bold;
  }
  #heading
  {
      text-align: center;
      transition:0.5s;
    top: 60px;
      position: relative;
    font-style:normal;
      font-weight: 800;
      font-size: 48px;
      color: #FFBA08;
      text-shadow: 3px 3px 0px rgba(153, 4, 4, 0.548);
  }
  
  
  
  
  .icon-bar {
    position:fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    
  }
  
  
  .icon-bar a {
    display: block;
    padding: 5px;
    transition: all 0.5s ease;
    color: white;
    font-size: 20;
    text-shadow: 1px 1px 1px #ffffff;
  
  }
  
  
  .icon-bar a:hover {
    background-color: 	#ddd;
    border-radius: 5px;
  }
  
  #fb,#insta,#yt,#li,#tw{
      width:30px;
  height:30px;}
  
  
  .topnav {
    list-style:none;
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
    overflow:hidden;
    top: 100px;
    
  
  }
  .topnav li
  {
    display: inline;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
  
    display: inline-block;
      color: #ffffff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 16px;
    border-radius: 25px;
    transition: all 0.5s ease;
    font-weight: 800;
  }
  
  /* 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: #FFBA08;
    color: white;
    text-shadow: 1px 1px 1px #000000;
  }
#gallery
{
  width: 50%;
  margin:auto;
  border-spacing: 20px;
}
#gal
{
  width: 360px;
  height: 270px;
  border-radius: 15px;
  border-style:ridge;
  border-width: 2px;
  border-color: #FFBA08;
}
td
{
    transition: transform .2s;
}

td:hover
{
    transform: scale(1.05);

}

#footer
{
  text-align: center;
  color: #ffffff;
  padding-bottom: 5px;
}

@font-face
{
  font-family: 'Montserrat';
  src: url(fonts/Montserrat-Regular.ttf);
  font-style: normal;
  font-weight: 500px;
}

@media all and (orientation : portrait)
{
  #heading
  {
    top: 50px;
    font-size: 35px;
  }
  
  #gallery
  {
    border-spacing: 10px;
    width:fit-content;
  }
  #gal
{
  width: 132px;
  height: 99px;
}
  #fb,#insta,#yt,#li,#tw
  {
    width: 25px;
    height:25px;
  }
  .since
  {
    font-size: 20px;
  }
  .topnav
  {
    top: 90px;
  }
  .topnav a
  {
    font-size: 15px;
  }

}