html {
  scroll-behavior: smooth;
}

body {
  background: linear-gradient(180deg, rgb(224, 23, 23), rgb(237, 124, 10));
  font-family: Comic Sans MS;
  color: rgb(214, 203, 203);
  margin: 2px;
  margin-top: 10px;
  margin-bottom: 0px;
  opacity: 0;
  animation: fadeIn 1s forwards;
  display: block;
  scroll-behavior: smooth;
  /*
  COMMENTED OUT BORDER
  border: solid 20px;
  border-image: linear-gradient(180deg, rgb(183, 12, 12), rgb(221, 134, 20)) 1;
  border-bottom: none;
  */
}
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

h1 {
  text-align: center;
  font-size: 60px;
  text-decoration: underline;
  margin-top: 5px;
}

h2 {
  margin: 10px;
  text-decoration: underline;
}

p, .subtitle, h3 {
  margin: 10px;
}

footer {
  background-color: rgb(255, 140, 0); /* Adjusted for better contrast */
  color: rgb(102, 0, 0); /* Adjusted for better readability */
  text-align: center;
  padding: 3px;
  border-top-left-radius: 145px;
  border-top-right-radius: 145px;
}

img:hover {
  transform: scale(1.02);
  transition: transform 0.5s ease;
}
img, button {
  transition: transform 0.5s ease;
}

.center {
  text-align: center;
}

.logo:hover {
  opacity: 0.8;
  cursor: pointer;
}

.backgroundMusic {
  border-style: outset;
  background-color: #f7b34e;
  border-color: #da9328;
  font-family: Comic Sans MS;
  font-weight: bold;
  font-size: 12.5px;
  margin: 10px;
}

.footer-icon {
  color: rgb(159, 7, 7);
}

.logo:active {
  opacity: 70%;
}

.scroll-top {
  --offset: 100px;
  --fade: 80px;

  display: flex;
  align-items: flex-end;
  width: 60px;
  justify-self: end;
  justify-content: flex-end;
  --webkit-mask: linear-gradient(
    #0000 calc(100vh + var(--offset)),
    #000 calc(100vh + var(--offset) + var(--fade))
  );
}

.top {
  position: sticky;
  bottom: 20px;
  margin-right: 10px;

  /* visual styling */
  width: 100%;
  aspect-ratio: 1;
  background: #ff8b24;
  border-radius: 10px;
}
.top:before {
  content: "";
  position: absolute;
  inset: 30%;
  transform: translateY(20%) rotate(-45deg);
  border-top: 5px solid #fff;
  border-right: 5px solid #fff;
}

.loading-screen {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, rgb(224, 23, 23), rgb(237, 124, 10));
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.loading {
    width: 80px;
    display: flex;
    flex-wrap: wrap;
    animation: rotate 3s linear infinite;
    margin: 0;
}
@keyframes rotate {
    to{
        transform: rotate(360deg);
    }
}
.loading span {
    width: 32px;
    height: 32px;
    background-color: red;
    margin: 4px;
    animation: scale 1.5s linear infinite;
}
.loading span:nth-child(1) {
    background-color: #fa9f28;
    transform-origin: bottom right;
}
.loading span:nth-child(2) {
    background-color: #f89a20;
    transform-origin: bottom left;
}
.loading span:nth-child(3) {
    background-color: #f8b72c;
    transform-origin: top right;
}
.loading span:nth-child(4) {
    background-color: #f59c27;
    transform-origin: top left;
}

/* Normal border box */
.border-box {
  text-align: center;
  list-style-position: inside;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 20px;
  padding: 10px;
  font-family: Comic Sans MS;
  font-weight: bold;
  color: rgb(214, 203, 203);
  font-size: 1.2em;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(130deg, rgb(248, 48, 48), rgb(237, 124, 10));
  border-radius: 10px;
  border: 2px solid hsl(36, 71%, 41%);
  transition: transform 0.5s ease;
  line-height: normal;
}
.border-box:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.downtime {
  color: rgb(159, 0, 0);
  text-decoration: none;
}