html {
	 height: 100%;
}
 body {
	 height: 100%;
	 display: flex;
	 font-size: 24px !important;
	 letter-spacing: 0.02em;
}
   
  

     .high {
  animation: width 5.6s linear alternate both;

}

  
     @keyframes width {
  0% {width: 0px; opacity:0; animation-timing-function: linear;}
  20% { width: 240px; opacity:1;}
  100% {width: 240px;}
}
  
    span {
      position:fixed;
            margin: -20px 0px 0px 0px;
    }
a {
    color: black !important;
    
}
.high {
  border: 0px yellow solid;
    opacity:.75;
  color: white;
  font-family: arizona;
    font-size:16px;
  box-sizing: border-box;
    margin-bottom: 2px;
    margin-top:15px;
    height: 20px;
  
}
#myDiv{

    height: 900px;
    font-family: arizona;
      font-size:16px;
  box-sizing: border-box;
    margin-bottom: 12px;
  
    height: 20px;
  
}



.high:nth-of-type(0){animation-iteration-count: 2;}
.high:nth-of-type(1){animation-iteration-count: 2;}
.high:nth-of-type(2){animation-iteration-count: 2;}
.high:nth-of-type(3){animation-iteration-count: 2;}
.high:nth-of-type(4){animation-iteration-count: 2;}
.high:nth-of-type(5){animation-iteration-count: 2;}
.high:nth-of-type(6){animation-iteration-count: 2;}
.high:nth-of-type(7){animation-iteration-count: 2;}
.high:nth-of-type(8){animation-iteration-count: 2;}
.high:nth-of-type(9){animation-iteration-count: 2;}
.high:nth-of-type(10){animation-iteration-count: 2;}
.high:nth-of-type(11){animation-iteration-count: 2;}
.high:nth-of-type(12){animation-iteration-count: 2;}
.high:nth-of-type(13){animation-iteration-count: 2;}
.high:nth-of-type(14){animation-iteration-count: 2;}
.high:nth-of-type(15){animation-iteration-count: 2;}
.high:nth-of-type(16){animation-iteration-count: 2;}
.high:nth-of-type(17){animation-iteration-count: 2;}
.high:nth-of-type(18){animation-iteration-count: 2;}

.high:nth-of-type(1) {
   animation-delay: 1.5s;
}
    

    .high:nth-of-type(2) {
    animation-delay: 12s;
     
}
    
    .high:nth-of-type(3) {
    animation-delay: 23s;
     
}
    
    .high:nth-of-type(4) {
    animation-delay: 43s;
     
}
       .high:nth-of-type(5) {
    animation-delay: 1.5s;
     
}
   .high:nth-of-type(6) {
    animation-delay: 34s;
     
}
   .high:nth-of-type(7) {
    animation-delay: 43s;
     
}
   .high:nth-of-type(8) {
    animation-delay: 23s;
     
}

 .high:nth-of-type(9) {
    animation-delay: 1.5s;
     
}
 .high:nth-of-type(10) {
    animation-delay: 11s;
     
}
 .high:nth-of-type(11) {
    animation-delay: 23s;
     
}
 .high:nth-of-type(12) {
    animation-delay: 41s;
     
}
 .high:nth-of-type(13) {
    animation-delay: 12s;
     
}
 .high:nth-of-type(14) {
    animation-delay: 12s;
     
}

 .high:nth-of-type(15) {
    animation-delay: 23s;
     
}

.high:nth-of-type(15) {
    animation-delay: 12s;
     
}

 .high:nth-of-type(16) {
    animation-delay: 12s;
     
}
 .high:nth-of-type(17) {
    animation-delay: 23s;
     
}
 .high:nth-of-type(18) {
    animation-delay: 23s;
     
}


.fade-in:nth-of-type(0){animation-iteration-count:2;}


 .second:nth-of-type(0) {
    animation-delay: 2s;
     
}




@font-face {
    font-family: arizona;
    src: url(ABC/ABCArizonaFlare-Thin-Trial.otf) format("opentype");
}
 .box {
	 font-family: arizona;
     height: 210px;
     width: 900px;
	 margin: auto;
     margin-left: 25px;
	 overflow: hidden;
	 position: relative;
     text-align:right;
}
 .box::before {
	 top: 0;
	 left: 0;
	 z-index: 1;
	 width: 100%;
	 content: '';
	 height: 10px;
	 position: absolute;
	 background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
 .box::after {
	 left: 0;
	 bottom: 0;
	 z-index: 1;
	 width: 100%;
	 content: '';
	 height: 100px;
	 position: absolute;
	 background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
.chris{
    font-family:arizona;
right:118px;
    top:90px;
    position: relative;
    z-index: 999;
}
.me{
    height:32px;
}
 ul {
	 margin-top: 50px;
	 padding: 0;
	 animation: scrollUp 48s linear infinite;
}
 ul li {
	 opacity: 1;
	 height: 20px;
	 padding: 200px 0px 0px 0px;
	 list-style: none;
}
 @keyframes fadeOut {
	 from {
		 opacity: 1;
	}
	 to {
		 opacity: 0;
	}
}


 @keyframes scrollUp {
	 from {
		 transform: translateY(0);
	}
	 to {
		 transform: translateY(-98.3333333333%);
	}
}

.martop90{
  margin-top:120px;
}
.text-rotate {

    font-size: 16px;
    font-weight: 700;
 color: black;
    font-family: arizona;
}

.rotate-word {
    display: inline-block;
    width: 240px;
 margin: 0px 0px 0px -90px;
}

.rotate-word span {
    position: absolute;
    top: 00px;
    overflow: hidden;
    animation: rotate-animate 52s linear infinite;
    opacity: 0;  
    width: 300px; 
}

.rotate-word span:nth-child(1) {
    animation-delay: 2s;
    width: 300px;  

}

.rotate-word span:nth-child(2) {
    animation-delay: 12s;
    width: 300px;  
    
}

.rotate-word span:nth-child(3) {
    animation-delay: 23s;
    width: 300px;    
}

.rotate-word span:nth-child(4) {
    animation-delay: 34s;
    width: 350px;
  
}
.rotate-word span:nth-child(5) {
    animation-delay: 44s;
    width: 300px;
    z-index: -1;
}


@keyframes rotate-animate {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    2% {
        opacity: 1;
        transform: translateY(0px);
    }
    18% {
        opacity: 1;
        transform: translateY(0px);
    }
    20% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}