@import url('../fonts.css');

@import url('../utility.css');

@import url('../components/link_button.css');

@import url('../components/flash_message.css');


/* Home css ---------------------------------------------------------------- */

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

  max-width: var(--system-max-width);
  
  margin: auto;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
  row-gap: 2rem;


  position: relative;

  background-color: var(--system-black);

  overflow-x: hidden;
}


/* Title container -------------------------------------------------------- */

#home-title-container {
  width: 61.8%;

  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;

  transition: opacity;
  transition-duration: var(--system-initial-opacity-transition-duration);
  transition-timing-function: ease-in;
}

@media only screen and (orientation: landscape) {
  #home-title-container {
    flex-direction: row;
  }
}

#home-title-logo-container {
  width: 61.8%;

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

@media only screen and (orientation: landscape) {
  #home-title-logo-container {
    width: 33%;
  }
}

#home-title-text-container {
  width: 100%;

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

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

@media only screen and (orientation: landscape) {
  #home-title-text-container {
    width: 66%;
  }
}

#home-title-text {
  color: var(--system-yellow);

  font-family: Custom-3-Bold;
  font-size: 1.75rem;
}

@media only screen and (orientation: landscape) {
  #home-title-text {
    font-size: 3rem;
  }
}

/* Register link ------------------------------------------------------ */

#register-link-container {
  width: 61.8%;

  cursor: pointer;
}

#register-link-text {
  color:  var(--system-yellow);

  font-family: Custom-3-Medium;
  font-size: 1.75rem;

  text-align: center;

  text-decoration: underline;
}

@media only screen and (orientation: landscape) {
  #register-link-text {
    font-size: 3rem;
  }
}