@font-face {
  font-family: "SkimisherCondensed";
  src: url(fonts/SkirmisherCondensed-1jj3B.otf);
}

@font-face {
  font-family: "PPG";
  src: url(fonts/ppg.ttf);
}

@font-face {
  font-family: "Starfire";
  src: url(fonts/starfire.ttf);
}

@font-face {
  font-family: "Raven";
  src: url(fonts/raven.ttf);
}

@font-face {
  font-family: "Supergirl";
  src: url(fonts/supergirl.ttf);
}

@font-face {
  font-family: "Saber";
  src: url(fonts/saber.ttf);
}

@font-face {
  font-family: "GameBot";
  src: url(fonts/gamebot.ttf);
}

@font-face {
  font-family: "Mayako";
  src: url(fonts/mayako.ttf);
}

@font-face {
  font-family: "Tesse";
  src: url(fonts/tesse.ttf);
}

@font-face {
  font-family: "Spiderman";
  src: url(fonts/spiderman.ttf);
}

@font-face {
  font-family: "Appli";
  src: url(fonts/appli.ttf);
}

@font-face {
  font-family: "Pokemon";
  src: url(fonts/vivian.ttf);
}

@font-face {
  font-family: "Sega";
  src: url(fonts/sega.ttf);
}

@font-face {
  font-family: "Shantae";
  src: url(fonts/shantae.ttf);
}

@font-face {
  font-family: "MegaMan";
  src: url(fonts/megaman.ttf);
}

@font-face {
  font-family: "Clover";
  src: url(fonts/clover.ttf);
}

@font-face {
  font-family: "Miki";
  src: url(fonts/miki.ttf);
}

@font-face {
  font-family: "Poker";
  src: url(fonts/Poker.ttf);
}

@font-face {
  font-family: "Abby";
  src: url(fonts/abby.ttf);
}

.angel-logo {
    --angel-font: "SkimisherCondensed";
    --angel-bg: url("images/fire.gif") no-repeat center;
    font-family: var(--angel-font);
    font-size: 100px;
    font-weight: bold;
    text-transform: capitalize;
    background: var(--angel-bg);
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
    transform-origin: right;
    transform: translate(210px, -10px) perspective(1000px) rotateY(-35deg) rotateX(12deg);
    text-align: right;
    width: 1000px;
    height: 140px;
    line-height: 0.7;
}

.angel-logo::after {
    content: attr(data-name);
    position: absolute;
    right: 10px;
    top: -5px;
    width: 1000px;
    height: 140px;
    -webkit-text-fill-color: white;
    text-shadow: 2px 2px 5px black;
}

.angel-logo.blossom {
    --angel-font: "PPG";
    
    line-height: 1;
    font-size: 85px;
}

.angel-logo.bubbles {
    --angel-font: "PPG";
    
    line-height: 1;
    font-size: 95px;
}

.angel-logo.buttercup {
    --angel-font: "PPG";
    
    line-height: 1;
    font-size: 80px;
}

.angel-logo.starfire {
    --angel-font: "Starfire";
    
    line-height: 1;
    font-size: 128px;
}

.angel-logo.raven, .angel-logo.abby, .angel-logo.kougan {
    --angel-font: "Abby";

    line-height: 1.1;
    font-size: 140px;
    width: 800px;
    height: 315px;
}

.angel-logo.raven {
    height: 200px;
}

.angel-logo.supergirl {
    --angel-font: "Supergirl";
    
    line-height: 1.1;
    font-size: 132px;
}

.angel-logo.saber {
    --angel-font: "Saber";
    
    line-height: 0.7;
    font-size: 136px;
    height: 200px;
}

.angel-logo.vivian, .angel-logo.mallory {
    --angel-font: "Pokemon";
    
    line-height: 1.2;
    font-size: 75px;
    height: 200px;
}

.angel-logo.shantae {
    --angel-font: "Shantae";
    
    line-height: 1;
    font-size: 135px;
    height: 200px;
    width: 1200px;
}

.angel-logo.clover {
    --angel-font: "Clover";
    
    line-height: 1;
    font-size: 95px;
    height: 200px;
    width: 1200px;
}

.angel-logo.gamebot {
    --angel-font: "GameBot";
    
    line-height: 1;
    font-size: 120px;
    height: 200px;
    width: 1200px;
}

.angel-logo.mayako {
    --angel-font: "Mayako";
    
    line-height: 1;
    font-size: 95px;
    height: 200px;
    width: 1200px;
}

.angel-logo.tesse {
    --angel-font: "Tesse";
    
    line-height: 1;
    font-size: 165px;
    height: 200px;
    width: 1200px;
}

.angel-logo.appli {
    --angel-font: "Appli";
    
    line-height: 1;
    font-size: 120px;
    height: 250px;
    width: 1000px;
}

.angel-logo.spiderman, .angel-logo.spidergwen, .angel-logo.peni {
    --angel-font: "Spiderman";
    
    line-height: 1;
    font-size: 120px;
    height: 250px;
    width: 1000px;
}

.angel-logo.megaman, .angel-logo.megagirl {
    --angel-font: "MegaMan";
    
    line-height: 2.5;
    font-size: 70px;
    height: 250px;
    width: 800px;
}

.angel-logo.miki {
    --angel-font: "Miki";
    
    line-height: 1;
    font-size: 110px;
    height: 150px;
    width: 900px;
}

.angel-logo.lucky {
    --angel-font: "Poker";
    
    line-height: 1;
    font-size: 110px;
    height: 150px;
    width: 900px;
}

.angel-logo.amy, .angel-logo.nori, .angel-logo.gg, .angel-logo.marvett, .angel-logo.purpleheart, .angel-logo.purplesister, .angel-logo.neptune, .angel-logo.knuckles {
    --angel-font: "Sega";
    
    line-height: 1.2;
    font-size: 80px;
    height: 200px;
}

.guess-game:not(.reveal) .angel-logo {
    opacity: 0;
}