@font-face {
  font-family: "Custom-1";
  font-style: normal;
  font-weight: normal;


  src: url('../fonts/custom_01/batmfa__.ttf') format("truetype");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    background-color: black;
      user-select: none;
}

#main-container {
  width: 100%;
  /* height set dynamically */

  position: relative;

  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;

  background-color: black;
}

#main-wrapper {
  /* width: 61.8%; */
  /* width: 80%; */
  /* width: 85%; */
  /* width: 78.6%; */

  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;

  /* border: 1px solid green; */
}

#logo-container {
  width: 100%;

  position: relative;

  /* background-image: url('../../../public/images/logo_s.png'); */
  background-image: url('../images/logo_s.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  transition: opacity;
  transition-duration: 1s;
  transition-timing-function: ease-in;

  z-index: 200;

  /* border: 1px solid orangered; */
}

#announce-container {
  /* padding: 1rem; */
  padding-left: 1rem;
  padding-right: 0.25rem;

  position: relative;

  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  overflow: hidden;

  z-index: 100;
}

#announce-text {
  transition: opacity, transform;
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

.custom-text {
  text-align: center;

  color: whitesmoke;
  font-family: "Custom-1";
  /* font-size: 1rem; */

  text-wrap: nowrap;

  /* border: 1px solid yellow; */
}

.opacity-0 {
  opacity: 0;
}

.displacement-left {
  transform: translateX(-100%);
}