.main{
  margin-left:15vw;
  display:flex;
  align-items:center;
  justify-content:left;
  text-align:left;
  font-family: 'Six Caps';
  -webkit-font-smoothing: antialiased!important;
  overflow:auto;
}
h1{
  text-align:left;
  text-transform: uppercase;
  color: #b6ff00; 
  font-size: 250px;
  letter-spacing:2px;
  font-weight: 400;
  font-weight:normal;
  margin-top:100px;
}

.roller{
  font-size:11rem;
  height: 11rem;
  letter-spacing:1px;
  line-height: 11rem;
  position: relative;
  overflow: hidden; 
  width: 100%;
  display: flex;
  justify-content: left;
  align-items:left;
  font-weight:400;
  color: #F1FAEE;
}


#spare-time{
  
  color: #ee3f3f;
  
}

.roller #rolltext {
  position: absolute;
  top: 0;
  animation: slide 5s infinite;  
}

@keyframes slide {
  0%{
    top:0;
  }
  25%{
    top: -11rem;    
  }
  50%{
    top: -22rem;
  }
  72.5%{
    top: -33rem;
  }
}

.well {
    position: relative;
    overflow: hidden;
    transition: 1s cubic-bezier(0.5, 0, 0.5, 1);
}

.top {
    font-size: 80%;
    color: hsla(0, 0%, 100%, .25);
    position: relative;
    top: -.2em;
    cursor: pointer;
}

.panel {
    position: relative;
    height: 100vh;
    overflow: hidden;
    font-size: 10vmin;
    padding: 1em;
    box-sizing: border-box;
    color: hsla(0, 0%, 100%, .1);
    cursor: default;
}

    .panel:nth-child(1) {
        
    }

    .panel:nth-child(2) {
        
    }

    .panel:nth-child(3) {
      
    }

    .panel:nth-child(4) {
       
    }

    .panel:nth-child(5) {
       
    }





@media screen and (max-width: 600px){
    .main {
        margin-left: 15vw;
        display: inline;
        align-items: center;
        justify-content: left;
        text-align: left;
        font-family: 'Six Caps';
        -webkit-font-smoothing: antialiased !important;
        overflow: auto;
    }

    h1 {
        text-align: left;
        text-transform: uppercase;
        color: #b6ff00;
        font-size: 60px;
        letter-spacing: 2px;
        font-weight: normal;
        margin-top: 10px;
    }

    .roller {
        font-size: 60px;
        height: 11rem;
        letter-spacing: 1px;
        line-height: 11rem;
        position: relative;
        overflow: hidden;
        width: 100%;
        display: flex;
        justify-content: left;
        align-items: left;
        font-weight: 400;
        color: #F1FAEE;
    }


    #spare-time {
        color: #ee3f3f;
    }

    .roller #rolltext {
        position: absolute;
        top: 0;
        animation: slide 5s infinite;
    }
  
  @keyframes slide-mob {
  0%{
    top:0;
  }
  25%{
    top: -2.125rem;    
  }
  50%{
    top: -4.25rem;
  }
  72.5%{
    top: -6.375rem;
  }
}


    .well {
        position: relative;
        overflow: hidden;
        transition: 1s cubic-bezier(0.5, 0, 0.5, 1);
    }

    .top {
        font-size: 80%;
        color: hsla(0, 0%, 100%, .25);
        position: relative;
        top: -.2em;
        cursor: pointer;
    }

    .panel {
        position: relative;
        height: 100vh;
        overflow: hidden;
        padding: 1em;
        box-sizing: border-box;
        color: hsla(0, 0%, 100%, .1);
        cursor: default;
    }

        .panel:nth-child(1) {
        }

        .panel:nth-child(2) {
        }

        .panel:nth-child(3) {
        }

        .panel:nth-child(4) {
        }

        .panel:nth-child(5) {
        }

    

}