body {
  background-color: rgb(0, 0, 0);
  overflow: hidden;
}

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#welcome-text {
  color: white;
  font-size: 3em;
  opacity: 0;
  animation: fadeIn 2s forwards, explode 2s 2s forwards, fadeOut 1s 4s forwards;
}

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

@keyframes explode {
  to {
    transform: scale(10);
    opacity: 0;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

@keyframes circleFade {
  0% {
    clip-path: circle(0% at 50% 50%);
  }
  100% {
    clip-path: circle(150% at 50% 50%);
  }
}

#main-content {
  animation: circleFade 1s forwards; /* Increased duration to 2s */
}

#header {
  height: 100px;
  background-color: darkred;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  background-color: #5a5858;
  width: 600px;
  margin: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 3%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

p.about {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: x-large;
  margin: 20px;
}

h1.header {
  margin: 0;
}