body {
    overflow: hidden;
  }
  
  .index {
    background: linear-gradient(90deg, var(--main-color) 0%, var(--main-gradiant) 16%, var(--clr-black) 100%);
    position: relative;
    min-height: 5.208vw;
    max-height: 7.813vw;
    width: 18vw;
    margin-top: 0.521vw;
    left: -750px;
    top: 8.854vw;
    padding-right: 50px;
    height: 4.167vw;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-left: solid 5px var(--border-color);
    animation-duration: 1s;
    animation-name: slidein;
    
  }
  @keyframes slidein {
    from {  left: -1300px;}
  
    to {
      left: -750px;
    }
  }
  
  .index .title-IO3Fu5 {
    position: relative;
    color: var(--title-color);
    font-family: var(--font-family-title);
    font-size: var(--font-size-l);
    font-weight: 600;
    height: auto;
    text-align: left;
    top: 20px;
    left: 70px;
    margin-left: 102px;
    transform: translate(-50%,-50%);
    animation: fadeInAnimation ease 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  
  .index .message-IO3Fu5 {
    position: relative;
    color: #fff;
    text-align: left;
    font-size: var(--font-family-msg);
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    line-height: 15px;
    margin-top: 10px;
    margin-left: 78px;
    text-align: left;

  }

  .index .loading-border-IO3Fu5 {
    background-color: transparent;
    height: 3.994px;
    left: 0px;
    position: absolute;
    top: 130.006px;
    width: 18vw;
  }
  
  .index .rectangle-1-kfPots {
    position: absolute;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--border-color)c9 16%, var(--clr-black) 100%);
    height: 0.26vw;
    width: 18.021vw;
    top: -1.80vw;
    left: 0vw;
  }
  
  .index .rectangle-2-kfPots {
    position: absolute;
    background-color: var(--main-color);
    height: 0.26vw;
    top: -1.80vw;
    left: 0vw;
    width: 18.021vw;
    mix-blend-mode: normal;
    width: auto;
    animation: borderSpace 6.0s ease-in-out;
    -webkit-box-shadow: 0px 4px 28px 8px var(--main-color);
    -moz-box-shadow: 0px 4px 28px 8px var(--main-color);
    box-shadow: 0px 4px 28px 5px var(--main-color);
  }
  @keyframes borderSpace {
    from {width: 18.021vw;}
  
    to {
      width: 0vw;
    }
  }
    
  
.logo-box {
position: fixed;
background-color: var(--logo-box);
width: 5vh;
height: 4.8vh;
margin-left: 1vh;
margin-top: -120px;
border-radius: 1vh;
}

img.logo{

position: relative;
width: 200px;
height: 100px;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
border-radius: 1vh;
}

@import url("https://fonts.googleapis.com/css?family=Roboto:600|Montserrat:500");
  
.screen textarea:focus,
.screen input:focus {
  outline: none;
}

.screen * {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.screen div {
  -webkit-text-size-adjust: none;
}

.screen a {
  display: contents;
  text-decoration: none;
}

.container-center-horizontal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  pointer-events: none;
  width: 100%;
}

.container-center-horizontal > * {
  flex-shrink: 0;
  pointer-events: auto;
}

* {
  box-sizing: border-box;
}