html{
    font-size:1vw;
    body, span, p, div {
        cursor: default;
        user-select: none;
      }
      
}

p span{
    display:block;
    float:left;
    clear:both;
}

body {
    background-color: #ffffff;
    overflow-x: hidden;
    margin: 0;
    line-height: 1.1em;
    background: rgb(255,98,0);
background: linear-gradient(0deg, rgb(105, 105, 105) 22%, rgba(255,255,255,1) 95%);  
}

@font-face {
    font-family: 'ABCROM-Regular';
    src: url('https://premdai-super-cool-website.netlify.app/assets/css/content/fonts/ABCROM-Regular-Trial.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ABCROM-Condensed-Heavy';
    src: url('https://premdai-super-cool-website.netlify.app/assets/css/content/fonts/ABCROM-Condensed-Heavy.woff2') format ('woff2')
    font-weight: bold;
    font-style: normal;
}

.meow-script-regular {
    font-family: "Meow Script", cursive;
    font-weight: 400;
    font-style: normal;
}  
.monsieur-la-doulaise-regular {
    font-family: "Monsieur La Doulaise", cursive;
    font-weight: 400;
    font-style: normal;
}
.zcool-kuaile-regular {
    font-family: "ZCOOL KuaiLe", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
.pacifico-regular {
    font-family: "Pacifico", cursive;
    font-weight: 400;
    font-style: normal;
}
.rubik-mono-one-regular {
    font-family: "Rubik Mono One", monospace;
    font-weight: 400;
    font-style: normal;
  }
.rubik-puddles-regular {
    font-family: "Rubik Puddles", system-ui;
    font-weight: 400;
    font-style: normal;
}
.unifrakturmaguntia-regular {
    font-family: "UnifrakturMaguntia", cursive;
    font-weight: 400;
    font-style: normal;
}
.gasoek-one-regular {
    font-family: "Gasoek One", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.shadows-into-light-two-regular {
    font-family: "Shadows Into Light Two", cursive;
    font-weight: 400;
    font-style: normal;
}
.oi-regular {
    font-family: "Oi", serif;
    font-weight: 400;
    font-style: normal;
}
.kablammo {
    font-family: "Kablammo", system-ui;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "MORF" 0;
}      
.stint-ultra-condensed-regular {
    font-family: "Stint Ultra Condensed", serif;
    font-weight: 400;
    font-style: normal;
}
.rubik-dirt-regular {
    font-family: "Rubik Dirt", system-ui;
    font-weight: 400;
    font-style: normal;
}
  
  

.word1 { 
    font-family:'ABCROM-Condensed-Heavy', sans-serif; 
    font-size: 5.0rem;
    line-height: 1em;
}
.word2 { 
    font-family: 'ZCOOL KuaiLe', serif; 
    font-style:regular;
    font-size: 9.78rem; 
    line-height: 1.2em;
}
.word3 { 
    font-family: 'Pacifico', serif; 
    font-style italic;
    font-size: 4.41rem; 
    line-height: 3.5rem;
    font-style: italic; 
}
.word4 { 
    font-family:"Rubik Dirt", sans-serif; 
    font-style:regular;
    font-size: 6.4rem; 
    font-weight: 500;
    line-height: 1.5em;
}
.word5 { 
    font-family: 'Rubik Mono One', serif; 
    font-style:regular;
    font-size: 2.52rem; 
    line-height: 1.5em; 
}
.word6 { 
    font-family: 'Rubik Puddles', serif; 
    font-style:italic;
    font-size: 3.175rem; 
    line-height: 1.3em; 
}
.word7 { 
    font-family: "UnifrakturMaguntia", serif; 
    font-size: 4.85rem; 
    line-height: 1.3em; 
}
.word8 { 
    font-family: "Meow Script", serif; 
    font-style:normal;
    font-size: 7.85rem; 
    line-height: 0.8em; 
}
.word9 { 
    font-family: "Gasoek One", serif; 
    font-size: 9.4rem; 
    line-height: 1.3em; 
}
.word10 { 
    font-family: "Shadows Into Light Two", serif; 
    font-style:regular;
    font-size: 3.9em; 
    font-weight: 500;
    text-transform: uppercase; 
    line-height: 1.4em; 
}
.word11 { 
    font-family:'Monsieur La Doulaise', serif; 
    font-style:regular;
    font-size: 7.56em; 
    line-height: 1em; 
}
.word12 { 
    font-family: "Oi", serif; 
    font-style:italic;
    font-size: 1.85em;
    line-height: 2.8em;  
}
.word13 { 
    font-family: 'Kablammo', serif; 
    font-style: regular;
    font-weight: bold;
    font-size: 2.25em;
    line-height: 1.2em;   
}
.word14 { 
    font-family: "Stint Ultra Condensed", serif; 
    font-weight: bolder;
    font-size: 9.2em;
    line-height: 1.1em;  
}

p span:hover {
    animation: shake 0.2s linear infinite;
  }
  
  @keyframes shake {
    0% { transform: translateX(0); }
    0% { transform: translateY(0); }
    25% { transform: translateX(-10px); }
    25% { transform: translateY(-10px); }
    50% { transform: translateX(10px); }
    50% { transform: translateY(10px); }
    75% { transform: translateX(-10px); }
    75% { transform: translateY(-10px); }
    100% { transform: translateX(0); }
    100% { transform: translateY(0); }
}