* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: alegreya, alegreya, alegreya;
  margin: 0;
  background-color: #9a8ba6;
}



.row {  
  display: flex;
}

@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on bottom) */
.popup .popuptext {
  visibility: hidden;
  width: 370px; /* Set your desired width */
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  top: 100%; /* Show at the bottom */
  left: 50%;
  margin-left: -185px; /* Adjust the margin based on half of the width */
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}

/* Toggle this class when hovering on the popup container (hide and show the popup) */
.popup:hover .popuptext {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}


@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

img {
  float: left;
  border-radius: 50%;
}

.btn-group button {
  background-color: #F7D08A;
  border: 1px solid #c2a96d;
  color: #9c855c;
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  float: left; /* Float the buttons side by side */
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:hover {
  background-color: #FFD700;
}

pre {
  display: block;
  font-family: alegreya;
  white-space: pre;
  margin: 1em 0;
  line-height: 0.8;
}

/* Chat Settings */

@keyframes fadeInHeader {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.header {
  padding: 80px;
  text-align: center;
  background: #666d94;
  color: #B3D7FF;
  /* Set initial opacity to 0 */
  opacity: 0;
  /* Apply the animation with a duration of 1 second */
  animation: fadeInHeader 1s ease-in-out;
  /* Ensure the final state remains visible */
  animation-fill-mode: forwards;
}

.header h1 {
  font-size: 40px;
}

.header iframe {
  font-size: 40px;
  text-align:left;
}

@keyframes fadeInNavbar {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.navbar {
  overflow: hidden;
  background-color: #FDF7C2;
  color: #E1C171;
  /* Set initial opacity to 0 */
  opacity: 0;
  /* Apply the animation with a duration of 1 second */
  animation: fadeInNavbar 1s ease-in-out;
  /* Ensure the final state remains visible */
  animation-fill-mode: forwards;
}

div.a {
  text-indent: 1em;
}

.navbar a {
  float: left;
  display: block;
  color: #33495E;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  border-right:solid 2px #c2a96d;
}

.navbar a.active {
  background-color: #9a8ba6;
  color: #33495E;
  border-right: solid 1px #7b6f85;
}

.navbar a:hover {
  background-color: #9a8ba6;
  color: #33495E;
  border-right:solid 1px #7b6f85;
}

@keyframes fadeInMain {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.main {
  box-sizing: border-box;
  width: 100%; 
  color: #4E2A77;
  padding: 20px;
  background: #9a8ba6;
  opacity: 0;
  animation: fadeInMain 1s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes fadeInFooter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Apply the keyframes to the footer */
.footer {
  padding: 15px;
  text-align: right;
  background: #666d94;
  color: #667292;
  border-radius: 25px;
  /* Set initial opacity to 0 */
  opacity: 0;
  /* Apply the animation with a duration of 1 second */
  animation: fadeInFooter 1s ease-in-out;
  /* Ensure the final state remains visible */
  animation-fill-mode: forwards;
}

.footer h2 {
  text-align: left;
  color: #B3D7FF;
}



a:link {
  color: #E9C600;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: #A18A01;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: #FDF7C2;
  background-color: transparent;
  text-decoration: none;
}
a:active {
  color: #FDF7C2;
  background-color: transparent;
  text-decoration: underline;
}