@font-face {
  font-family: Poppins-Light, Poppins-Regular, Poppins-Bold;
  src: url(fonts/Poppins-Light.ttf), url(fonts/Poppins-Regular.ttf), url(fonts/Poppins-Bold.ttf);
}
:root {
  --nav-button-color: rgb(40, 40, 40);
  --font-light: "Roboto", sans-serif;
  --light-border-color: rgb(40, 40, 40);
  --lucida-font: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  --mobile-width: 600px;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background-color: rgb(0, 0, 0);
}

/*SLIDES*/
#slide-container {
  display: flex;
  position: relative;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

.slide-button {
  display: flex;
  font-family: "Courier New", Courier, monospace;
  font-weight: bolder;
  font-size: 20px;
  outline: none;
  padding: 10px 15px 10px 15px;
  justify-content: center;
  align-items: center;
  background-color: var(--nav-button-color);
  /*opacity: 0.5;*/
  border-radius: 5px;
  color: white;
  box-shadow: none;
  opacity: 0;
  transition-duration: 0.5s;
  z-index: 1;
}

.slide-button:hover {
  opacity: 100%;
  background-color: black;
  transition-property: opacity, background-color;
  transition-duration: 0.5s;
}

#slide-left {
  position: absolute;
}

#slide-right {
  position: absolute;
}

#slide-images {
  display: contents;
  width: 100%;
}

.slide-image {
  display: flex;
  left: 0;
  top: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  transition-property: opacity, translate;
  transition-duration: 0.5s;
  transition-delay: 0.2s;
  transition-timing-function: ease-in-out;
  z-index: 0;
  opacity: 0;
}

#slide-image-1 {
  display: flex;
  /* left: 100%; */
  opacity: 1;
}

/*#slide-image-2 {*/
/*    display: flex;*/
/*    !* right: 100%; *!*/
/*    opacity: 0;*/
/*}*/
#slide-container:hover > .slide-button {
  opacity: 50%;
  transition-duration: 0.5s;
}

/*TEXT OVERLAY ON SLIDES*/
#text-overlays-container {
  position: absolute;
  /*left: 50%;*/
  top: 75%;
  /*justify-content: center;*/
  /*align-items: center;*/
}

.text-overlays {
  /*display: inline;*/
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: Broadway, "Roboto", sans-serif;
  font-size: 2rem;
  /*align-items: center;*/
  color: white;
  font-weight: bolder;
  transition-property: opacity, translate;
  transition-duration: 1s;
  /*text-justify: inherit;*/
  text-wrap: nowrap;
  text-shadow: 1px 1px 1px rgb(0, 0, 0);
  /*text-align: center;*/
  /*vertical-align: middle;*/
  translate: -50% 0;
  opacity: 0;
}

#project-title {
  font-family: "Lucida Sans", sans-serif;
  font-size: 0.8rem;
  margin: 5px;
  padding: 10px;
  color: white;
  position: absolute;
  left: 100%;
  top: 100%;
  text-wrap: nowrap;
  transform: translate(-100%, -100%);
  text-align: right;
  text-shadow: 1px 1px 1px rgb(0, 0, 0);
}

#slogan-container {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  background-color: black;
  margin: 0;
  padding: 50px 20px;
  /*align-items: center;*/
  overflow: hidden;
  border: 1px solid;
}

#main-slogan {
  display: flex;
  flex-direction: row;
  color: black;
  font-family: "Lucida Sans", sans-serif;
  font-size: 1.2rem;
  /*text-align: center;*/
  justify-content: center;
  width: fit-content;
  /*border: 1px solid;*/
  transition-property: left, translate;
  transition-duration: 0.5s;
}

#word-rotate {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  translate: 0 33.33%;
}

.word {
  opacity: 0;
  /*color: rgb(179, 66, 66);*/
  /*color: rgb(0, 0, 0);*/
  color: rgb(252, 240, 189);
  width: fit-content;
  transition-property: opacity, translate;
  transition-duration: 0.75s;
  /*transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);*/
  transition-timing-function: cubic-bezier(.19,.01,.82,1.61);
}

#main-slogan-text {
  color: white;
  translate: 0 33.33%;
}

#word-1 {
  opacity: 1;
}


@media only screen and (max-width: 480px) {
  #slide-container {
    position: relative;
    text-align: center;
  }
  .slide-button {
    opacity: 0.25;
    z-index: 2;
  }
  #slide-left {
    position: absolute;
    left: 0;
    /*bottom: 0;*/
  }
  #slide-right {
    position: absolute;
    right: 0;
    /*bottom: 0;*/
  }
  .slide-image {
    display: flex;
    transition-property: opacity, translate, width, height;
    transition-timing-function: ease-in-out;
  }
  #slide-image-1 {
    display: flex;
    opacity: 1;
  }
  #text-overlays-container {
    position: absolute;
  }

  .text-overlays {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.25rem;
  }
}