body {
    background-color: black;
    color: white;
    font-size: 20px;
    font-family:'Times New Roman', Times, serif
}

@font-face {
    font-family: summer-pixel;
    src: url(summer-pixel-22-font/SummerPixel22Regular-jE0W7.ttf)
}
h1 {
    color: red;
    font-family: summer-pixel;
    font-size: 70px;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    text-align: center;

    position: absolute;
    left: 20px;
    right: 20px;
    top: 20px;
}


 #scene {
    background: url('arena_win.jpg') no-repeat;
    height: 375px;
    width: 750px;
    margin: auto;

    position: relative;
    top: 20px;
    left: 20px;
 }

 #situation {
    position: absolute;
    top: 300px;
    left: 35px;
    padding: 15px 15px 15px 15px;
    margin: auto;

    background-color: rgba(0,0,0,.5);
    width: 640px;
    text-align: center;
 }
a {
    color: white;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

p {
    text-align: center;
}
.title-word {
    animation: color-animation 4s linear infinite;
  }
  
  .title-word-1 {
    --color-1: #DF8453;
    --color-2: #3D8DAE;
    --color-3: #E4A9A8;
  }
  
  .title-word-2 {
    --color-1: #DBAD4A;
    --color-2: #ACCFCB;
    --color-3: #17494D;
  }
  
  .title-word-3 {
    --color-1: #ACCFCB;
    --color-2: #E4A9A8;
    --color-3: #ACCFCB;
  }
  
  .title-word-4 {
    --color-1: #3D8DAE;
    --color-2: #DF8453;
    --color-3: #E4A9A8;
  }
  
  @keyframes color-animation {
    0%    {color: var(--color-1)}
    32%   {color: var(--color-1)}
    33%   {color: var(--color-2)}
    65%   {color: var(--color-2)}
    66%   {color: var(--color-3)}
    99%   {color: var(--color-3)}
    100%  {color: var(--color-1)}
  }
  
  /* Here are just some visual styles. 🖌 */

  .container {
    position: relative;
    top: -370px;
    left: 597px;
    background-color: rgba(0,0,0,.5);
  }

  .title {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    font-size: 2.3vw;
    text-transform: uppercase;
  }