html, body {
  margin: 0; /* Sets the margin of the html and body elements to 0 */
  padding: 0; /* Sets the padding of the html and body elements to 0 */
  height: 100%; /* Makes the html and body elements take up the full height of the viewport */
  overflow: hidden; /* Prevents scrollbars from appearing */
  font-family: 'Open Sans', sans-serif; /* Sets the font family for the entire page */
}

#formContainer {
  display: flex; /* Enables flexbox layout for the container */
  flex-direction: column; /* Arranges items vertically */ 
  justify-content: center; /* Centers items vertically */
  align-items: center; /* Centers items horizontally */
  height: 100%; /* Makes the container take up the full height of its parent */
}

#title { /* Styles for the title of the application */
  font-size: 24px; 
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
  display: block;
  font-family: 'Open Sans', sans-serif; 
}

#urlForm { /* Styles for the URL form */
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 100%; 
}

#urlForm input[type=text] { /* Styles for the URL input field */
  padding: 10px; 
  border: 2px solid #0066A2;
  border-radius: 20px;
  margin-right: 10px;
  font-family: 'Open Sans', sans-serif; 
}

#urlForm button { /* Styles for the submit button */
  font-family: 'Open Sans', sans-serif; 
  background-color: #0066A2; 
  color: white; 
  border: none; 
  border-radius: 20px; 
  padding: 10px 20px; 
  cursor: pointer; 
  transition: background-color 0.3s ease; 
}

#urlForm button:hover { /* Styles for the submit button on hover */
  background-color: #004d7a; 
}

iframe { /* Styles for the iframe */
  display: none; 
  width: 100%;
  height: 100%;
  border: none;
}

#iframeContainer { /* Styles for the iframe container */
  height: 100%;
  display: none;
  justify-content: center; 
  align-items: center; 
  font-size: 20px; 
}

#loadingContainer { /* Styles for the loading container */
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  text-align: center; 
}

#progressBar { /* Styles for the progress bar */
  width: 200px; 
  height: 10px; 
  background-color: #f3f3f3; 
  border-radius: 5px; 
  margin-top: 20px; 
  position: relative; 
  display: none;
}

#loadingMessage.show + #progressBar { /* Shows the progress bar when the loading message has the "show" class */
  display: block; 
}

#progressBar.animate::before { /* Animation for the progress bar */
  content: ""; 
  position: absolute;
  top: 0; 
  left: 0; 
  width: 0; 
  height: 100%; 
  background-color: #0066A2; 
  border-radius: 5px; 
  animation: progress 35s linear forwards; 
}

@keyframes progress { /* Keyframes for the progress bar animation */
  0% { width: 0; } 
  100% { width: 100%; } 
}

.button-container { /* Styles for the button container */
  position: fixed;
  bottom: 63px;
  right: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.clear-button,
.reload-button { /* Styles for the clear and reload buttons */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #0066A2;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  transition: transform 0.2s ease; 
}

.clear-button:hover,
.reload-button:hover { /* Styles for the buttons on hover */
  transform: scale(1.1);
}