.body {
    height: 100%;
    width: 100%;
    background: url('https://media3.giphy.com/media/2qzHVSVfPcBlC/giphy.gif?cid=ecf05e47zms3loploftc9u1u1vwowwhxxoby92m11uc1334q&rid=giphy.gif&ct=g');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
  }
  
  .container {
      padding: 10px;
    border-radius: 50px;
    height: 800px;
    width: 400px;
    background: rgba(0,0,0,0.6);
    box-shadow: 0 0 5px white, 0 0 10px yellow, 0 0 15px orange, 0 0 20px orange, 0 0 25px red;
  }
  
  #survey-form {
    background-color: transparent;
      border-radius: 50px;
    height: 800px;
    width: 400px;
      display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  #title {
       text-shadow: 0 0 0px black, 0 0 0px white, 0 0 2px yellow, 0 0 3px orange, 0 0 4px red;
    -webkit-animation: title;
    animation: title;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-direction: forward;
    -webkit-animation-direction: forward;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    color: white;
  }
  
  @keyframes title {
    0% {
      text-shadow: 0 0 0px black, 0 0 0px white, 0 0 2px yellow, 0 0 3px orange, 0 0 4px red;
    }
    
    25% {
        text-shadow: 0 0 1px black, 0 0 2px white, 0 0 4px yellow, 0 0 6px orange, 0 0 8px red;
    }
    50% {
        text-shadow: 0 0 1px black, 0 0 4px white, 0 0 8px yellow, 0 0 12px orange, 0 0 16px red;
    }
    75% {
          text-shadow: 0 0 1px black, 0 0 2px white, 0 0 4px yellow, 0 0 6px orange, 0 0 8px red;
    }
    100% {
         text-shadow: 0 0 1px black, 0 0 2px white, 0 0 2px yellow, 0 0 3px orange, 0 0 4px red;
    }
  }
  
  /* input options */
  
  
  .text-input {
    background: rgba(0,0,0,0.4);
    color: white;
    box-shadow: 0 0 5px white;
    padding-left: 10px;
      width: 150px;
    border-radius: 50px;
  }
  
  .text-label {
      color: white;
    text-shadow: 0 0 1px black, 0 0 2px white, 0 0 3px yellow, 0 0 4px orange, 0 0 85x red;
    margin-top: 10px;
    margin-bottom: 5px;
  }
  
  /* checkbox options */
  
  #checkbox-label-container {
    margin-top: 10px;
    text-align: center;
  }
  
  .checkbox {
    
    margin-top: 5px;
    text-align: center;
        display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
  }
  
  #checkbox-label {
        color: white;
    text-shadow: 0 0 1px black, 0 0 2px white, 0 0 3px yellow, 0 0 4px orange, 0 0 85x red;
  }
  
  
  .checkbox-item {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
  }
  
  
  .check {
    cursor: pointer;
  }
  
  /* select options */
  
  #favorite-game {
      margin-top: 15px;
        display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  #select-label {
        color: white;
    text-shadow: 0 0 1px black, 0 0 2px white, 0 0 3px yellow, 0 0 4px orange, 0 0 85x red;
    margin-top: 5px;
    margin-bottom: 10px;
  }
  
  #dropdown {
    cursor: pointer;
    width: 150px;
    border-radius: 50px;
   text-align: center;
        background: rgba(0,0,0,0.4);
    color: white;
  }
  
  .options {
    cursor: pointer;
  }
  
  
  /* radio  */
  
  .radio-label {
    color: white;
      text-shadow: 0 0 1px black, 0 0 2px white, 0 0 3px yellow, 0 0 4px orange, 0 0 85x red;
  }
  
  
  #radio-selection {
        display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  
  .radio-item {
    
    text-align: center;
          display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  
  .radio {
    margin-right: 5px;
    cursor: pointer;
  }
  
  .radio[id="pc"]:checked {
  background: black;
    color: black;
  }
  
  #xbox:checked {
    color: green;
    background: green;
  }
  
  #ps:checked {
    background: blue;
  }
  
  #ns:checked {
    background-color: linear-gradient(red,blue);
  }
  
  
  /*  text area*/
  
  .favorite-memory {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  #comment-label {
    color: white;
    text-align: center;
    margin-bottom: 5px;
  }
  
  
  
  
  /* submit button */
  
  #submit-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  #submit {
    padding: 5px;
    height: 30px;
    width: 100px;
    margin-top: 10px;
    cursor: pointer;
    background: rgba(0,0,0,0.4);
    border-radius: 10px;
    border: 1px solid white;
    color: white;
    transition: all 1s ease-in-out;
  }
  
  #comment {
        background: rgba(0,0,0,0.4);
    color: white;
    border-radius: 10px;
    padding: 10px;
  }
  
  
  #submit:hover {
    -webkit-animation: firePulse;
    animation: firePulse;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-direction: forward;
    -webkit-animation-direction: forward;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
  }
  
  
  @keyframes firePulse {
    0% {
        background: linear-gradient(360deg,white 5%,yellow 5%,orange 10%,red 15%, black 100%);
      text-shadow: 0 0 1px black, 2px white, 3px yellow, 4px orange, 5px red;
    }
    
    25% {
         background: linear-gradient(360deg,white 5%,yellow 15%,orange 20%,red 25%, black 100%);
        text-shadow: 0 0 1px black, 2px white, 4px yellow, 6px orange, 8px red;
    }
    50% {
        background: linear-gradient(360deg,white 5%,yellow 25%,orange 30%,red 35%, black 100%);
        text-shadow: 0 0 1px black, 3px white, 6px yellow, 9px orange, 12px red;
    }
    75% {
         background: linear-gradient(360deg,white 5%,yellow 15%,orange 20%,red 25%, black 100%);
          text-shadow: 0 0 1px black, 2px white, 4px yellow, 6px orange, 8px red;
    }
    100% {
        background: linear-gradient(360deg,white 5%,yellow 5%,orange 10%,red 15%, black 100%);
         text-shadow: 0 0 1px black, 2px white, 3px yellow, 4px orange, 5px red;
    }
  }
  
  .after-submit {
    display: none;
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.8);
  }
  
  #goodbye {
    color: white;
      -webkit-animation: goodbye;
    animation: goodbye;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-direction: forward;
    -webkit-animation-direction: forward;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
  }
  
  
  @keyframes googbye {
    0% {
      text-shadow: 0 0 0px black, 0 0 0px white, 0 0 2px yellow, 0 0 3px orange, 0 0 4px red;
    }
    
    25% {
        text-shadow: 0 0 1px black, 0 0 2px white, 0 0 4px yellow, 0 0 6px orange, 0 0 8px red;
    }
    50% {
        text-shadow: 0 0 1px black, 0 0 4px white, 0 0 8px yellow, 0 0 12px orange, 0 0 16px red;
    }
    75% {
          text-shadow: 0 0 1px black, 0 0 2px white, 0 0 4px yellow, 0 0 6px orange, 0 0 8px red;
    }
    100% {
         text-shadow: 0 0 1px black, 0 0 2px white, 0 0 2px yellow, 0 0 3px orange, 0 0 4px red;
    }
  }