@font-face {
  font-family: 'Hune';
  src: local('Hune'), local('HuneRegular'),
  url('../fonts/HuneRegular.woff2') format('woff2'),
  url('../fonts/HuneRegular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}



.main-container{
  width: 100%;
  min-height: 100vh;
  background-color: #000;
  display: flex;
  flex-direction: row;


}
.side-bar{
  position: fixed;
  width: 5vw;
  height: 100vh;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  border-right: 1px solid #fff;
}
.side-bar-logo{
  margin-top: 2vh;
  background-image: url("../img/logoIcon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 4vw;
  height: 4vw;
}
.main-content-container{
  width: 95vw;
  height: 100%;
  display: flex;
  flex-direction: column;

  margin-left: 5vw;
}
.landing-main-content-container{
  width: 100%;
  height: 100vh;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.decoration-lines-container{
  width: 100%;
  height: 30%;

  background-image: url("../img/decorator_lines.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.animation-top-to-botom{
  animation: top-to-bottom 2s;
}
@keyframes top-to-bottom {
  from{
    opacity: 0;
    transform: translateY(-50px);
  }
  to{
    opacity: 1;
  }
}

.landing-content{
  width: 100%;
  height: 70%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;

}
.text-container h1{
  padding:0;
  margin:0;
  font-size: 7vw;
  color: #fff;
  text-align: start;
  font-family: 'Hune', sans-serif;
}
.text-container h2 {
  padding:0;
  margin:0;
  font-size: 4vw;
  color: #FF2E73;
  text-align: start;
  font-family: 'Hune', sans-serif;
}

.text-container{
  width: 60%;
  height: 60%;
  display: flex;
  box-sizing: border-box;
  padding-left: 5vw;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

  margin-top: 5vh;
}
.logo-container{
  width: 30vw;
  height: 30vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../img/louLogo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.fade-in-1{

  animation: fade-in-BtT 3s;
}
@keyframes fade-in-BtT {
  from{
    opacity: 0;
    transform: translateY(50px);
  }
  to{
    opacity: 1;
    transform: translateY(0px);

  }
}

.fade-from-left{
  animation: fade-from-left 2s;
}
@keyframes fade-from-left {
  from{
    opacity: 0;
    transform: translateX(-50px);
  }
  to{
    opacity: 1;
    transform: translateX(0px);
  }
}

.fade-from-bottom-fast{
  animation: fade-from-bottom-fast 1.5s;
}

@keyframes fade-from-bottom-fast {
  from{
    opacity: 0;
    transform: translateY(80px);
  }
  to{
    opacity: 1;
    transform: translateY(0px);
  }
}


.outline-text{
  -webkit-text-stroke: 2px #fff;
  color: transparent;
}