html{
     font-size: 62.5%;
}

.h1{
    text-align: left;
    font-style: italic;
    font-size: 2rem;
    color: aqua;
    justify-self: start;
}
h2{
  text-align: right;
  font-size: 2rem;
  color: white;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.img{
   text-align: center;
}
img{
    border-radius: 25%;
}
.resp{
  width: 100%;
  height: auto;
}
/* Style buttons */
.btn {
    background-color: DodgerBlue; /* Blue background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 12px 16px; /* Some padding */
    font-size: 16px; /* Set a font size */
    cursor: pointer; /* Mouse pointer on hover */
  }
  
  /* Darker background on mouse-over */
  .btn:hover {
    background-color: RoyalBlue;
  }
  .item{
    float: left;
  }
  .snap{
    text-align: center;
    border-radius: 10%;
  }
  .txt{
    text-align: center;
    font-style: italic;
    color: chartreuse;
  }
  .id{
    text-align: center;
    color: chartreuse;
    
  }
  .photo{
    position: relative; 
    width: 100%; 
    height: 0; 
    padding-top: 56.2500%;
    padding-bottom: 0; 
    box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16);
    margin-top: 1.6em; 
    margin-bottom: 0.9em; 
    overflow: hidden;
    border-radius: 8px; will-change: transform;
  }
  .iframe{
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; left: 0; 
    border: none; padding: 0;margin: 0;
  }
  .topnav {
    background-color: #333;
    overflow: hidden;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* 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: #04AA6D;
    color: white;
  }