@font-face {
  font-family: 'Compressa';
  src: url('fonts/CompressaPRO-GX.woff2') format('woff');
}
  
html{
    overflow: hidden;
}

body{
    background-color:#000;
}
    
.letter {
    position: absolute;
    z-index: 10;
    text-align: center;
    color:white;
    font-size: 15vw;
    font-family: "Compressa", serif;
    font-variation-settings: "wdth" 800, "wght" 200;
    top:30vh;
}
    
.letter2 {
    position: absolute;    
    opacity: 1;
    z-index: 8;
    text-align: center;
    color:white;
    font-size: 15vw;
    font-family: "Compressa", serif;
    font-variation-settings: "wdth" 800, "wght" 200;
    top:30vh;
}    
    
#container{
    display: inline;
    position: absolute;
    width: 60vw;
    left:17vw;
}

    #rect{
        position: absolute;
        display: block;
        width:100vw;
        height: 100vh;
        background-color: #000;
        z-index: 0;
        opacity: 0;
    }
    
    
#T{
    left: 2vw;
    opacity: 0;
}
    
#H{
    left: 11.5vw;
}
    
#E{
    left: 22.7vw;
}
    
#R{
    left: 32vw;
}
    
#EE{
    left: 42.5vw;
}

#T2{
    left: 2vw;
    opacity: 0;
}
    
#H2{
    left: 11.5vw;
}
    
#E2{
    left: 22.7vw;
}
    
#R2{
    left: 32vw;
}
    
#EE2{
    left: 42.5vw;
}

p{
    display:inline;
}

span{
    display: none;
}

.chosen #invisible{
    display:inherit;
    font-style: normal;
}

.chosen{
    z-index: 30;
}

.chosen:hover{
cursor: pointer;    
}

@keyframes woof {
    0% {font-variation-settings: "wdth" 800, "wght" 800;}
    50% {font-variation-settings: "wdth" 800, "wght" 900;}
    100% {font-variation-settings: "wdth" 800, "wght" 800;}
}

.widthhhh{
font-size: 10vw;
transition-duration: 1s;
transition-property: font-size;
animation-name: woof;
animation-duration: 1s;
animation-iteration-count: infinite;
}

.hover:hover p{
    cursor: pointer;
    color:#fff;
    font-size:15.5vw;
    font-variation-settings: "wdth" 800, "wght" 700;
    transition-duration: 0.5s;
}