@font-face {font-family: "Cinnamon Cake"; src: url(http://static.tumblr.com/npggxjg/Jm9m1xlt2/cinnamon_cake.ttf);}
@font-face {font-family: "Awesome Lathusca"; src: url(https://file.garden/aeur2iVxx2XDWeKX/Fox%20Den%20Website/Fonts/Awesome%20Lathusca.ttf);}

body {
      /*Set background image for each page in its own CSS file*/
      background-attachment: fixed;
      background-size: 1440px 710px;
      background-color: #cdac82;
      font-family: "Cinnamon Cake"; 
      color: #5b3907;
      overflow: scroll;
    }
    
  .header{
      position: absolute;
      font-family: "Awesome Lathusca"; 
      font-size: 40px;
      display: block;
      z-index: -1;
      top: -25px;
      left: 50%;
      transform: translate(-50%, 0%);
      width: 450px;
      text-align: center;
      line-height: 1.0;
    }
    
    .compass{
      position: absolute;
      width: 200px;
      left: 100px;
    }
    
    .compass-img{
      width: 125px;
      margin-top: 20px;
    }
    
    #compass-span {
      left: 53%;
    }
    
    #navigate {
      position: absolute;
      width: 200px;
      top: 395px;
      left:110px;
    }
    
    .navigate-img {
        width:150px;
    }
    
    .mapmarker {
        width: 35px;
        position: absolute;
    }
    
     /*Modified Code Snippet from ribo.zone - Hover over mapmarker*/
    
    .marker {
      width: fit-content;
      height: fit-content;
      display: inline-block;
      position: relative;
    }
    
    .country-span-div {
      width: 205px;
      height: 45px;
      display: inline-block;
      position: absolute;
      top: 575px;
      left: 137px;
    }
    
    .country-span-div span {
      opacity: 0;
      position: absolute;
      width: 205px;
      top: 50%;
      transform: translate(0%, -50%);
      z-index: 2;
      font-size: 1.5rem;
      color: #5b3907;
      text-align: left; 
    }
    
    .marker img:hover, .marker img:focus {
      /* add hover effects like transform or filter to your images here! */
      transform: scale(1.5,1.5);
    }
    
    .country-div{
      position: absolute;
      top: 570px;
      left: 50px;
      width: 300px;
      height: 50px;
      background-color: #f1e3c7;
      border: 1px solid #5b3907;
    }
    
    .country-label {
      width: 80px;
      height: 50px;
      background-color: #5b3907;
    }
    
    .country-label p {
      position: absolute;
      font-weight: bold;
      color: #f1e3c7;
      font-size: 20px;
      padding-left: 5px;
      top: -5px;
    }
    
    
    /*Below Code Snippet from ribo.zone*/
    .imgtxt {
      width: fit-content;
      height: fit-content;
      display: inline-block;
      position: relative;
    }
    
    .imgtxt span {
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      font-size: 1.5rem;
      color: #FFF;
      text-align: center;
      filter: drop-shadow(1px 1px 0 #7e8478) 
        drop-shadow(-1px 1px 0 #7e8478)
        drop-shadow(1px -1px 0 #7e8478)
        drop-shadow(-1px -1px 0 #7e8478);
    }
    .imgtxt:hover span, .imgtxt:focus span {
      opacity: 1;
    }
    .imgtxt:hover img, .imgtxt:focus img {
      /* add hover effects like transform or filter to your images here! */
      filter: sepia(70%) saturate(75%);
      transform: rotate(10deg);
    }
    
    .imgtxt:hover .passport-img, .imgtxt:focus .passport-img {
      transform: rotate(20deg);
    }
    
    
    /* The Modal (background) */
    .modal {
      visibility: hidden; /*Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      top: 100px;
      width: 500px;
      height: 313px;
      background-image: url("https://file.garden/aeur2iVxx2XDWeKX/Fox%20Den%20Website/Library/Read-Around-The-World/green-retro-popup.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
    
    /* Modal Content Box */
    .modal-content {
      position: absolute;
      top: 55px;
      left:40px;
      width: 385px;
      height: 220px;
    }
    
    .close-Modal {
      position: absolute;
      left:368px;
      top:-15px;
      width: 15px;
      height: 15px;
      cursor: pointer;
    }
    
    .section-header {
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-family: Arial;
      font-size: 40px;
      width: 350px;
      
    }
    
    .navigation-links {
      position: absolute;
      top: 60px;
      width: 350px;
      left: 50%;
      transform: translate(-50%, 0%);
    }
    
    .navigate-link {
      color: #5b3907;
      font-family: Arial;
      font-size: 30px;
      display: inline-block;
      margin: 10px;
      
    }
    
    .back-link {
      color: #5b3907;
      font-family: Arial;
      font-size: 12px;
      display: inline-block;
      margin: 20px 10px 0px 10px;
    }