@import url('https://fonts.googleapis.com/css2?family=Nova+Square&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tourney:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Turret+Road:wght@200;300;400;500;700;800&display=swap');

body {
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
}
.topnav {
    overflow: hidden;
    background-color: #333;
    border: 3px transparent #ffffff; /* Bezel */ 
    border-radius: 10px; /* Rounded corners for bezel */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* Subtle shadow for depth */
    margin-top: 10px; /* Shift 10px down */
    font-weight: bold;
    font-family: 'Nova Square', cursive;
    
}
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
.topnav a:hover {
    background-color: #d8eff6;
    color: black;
}
.topnav a.active {
    background-color: #2596be;
    color: white;
}

h1 {
    font-family: 'Turret Road', cursive;
    text-align: center;
}

.iframe-container {
  position: relative;
  width: 100%; /* Adjust as needed */
  height: 600px; /* Adjust as needed */
  overflow: hidden;
}

.loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10; /* Ensure loader is above iframe */
}

#my-iframe {
  width: 100%;
  height: 100%;
  visibility: hidden; /* Hide iframe initially */
}

.loading-spinner {
    width: 150px;
    height: 150px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
        100% { transform: rotate(360deg); }
      }
      .loader {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100px;
      }