body {
    background-color: #000000;
}
/*
    .floating-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: floatAnimation 3s ease-in-out infinite;
      }
      
      @keyframes floatAnimation {
        0% {
          transform: translate(-50%, -50%);
        }
        50% {
          transform: translate(-50%, -70%);
        }
        100% {
          transform: translate(-50%, -50%);
        }
      }
    }*/
    
.fade-in {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

.fade-in.visible {
    animation: fadeInAnimation 5s ease-in-out forwards;
    }
      
@keyframes fadeInAnimation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
  
  
  /*floating-text {
    color: red;
    font: arial;
    font-size: xx-large;*/

#coming-soon-text {
    color: #7B5018;
    font: arial;
    font-size: 200px;
    text-align: center;
}
  
#announcement {
    color: #7B5018;
    font: arial;
    font-size: 50px;
    text-align: center;
    transform: translate(0%, -200%);
}

.logocontainer {
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

.logocontainer.visible {
    animation: fadeInLogo 1s ease-in-out forwards;
    }
      
@keyframes fadeInLogo {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}