*, *:after, *:before {
    box-sizing: border-box;
  }
  
  * {
      transition: opacity 0.5s ease-in-out;
  }
  
  #background {
    position:fixed; 
      top:-50%; 
      left:-50%; 
      width:200%; 
      height:200%;
  }
  
  #background img {
      position:absolute; 
      min-width:50%;
      min-height:50%;
      top:0; 
      left:0; 
      right:0; 
      bottom:0; 
      margin:auto;  
  }
  
  #container {
      font-size: 2.5em;
      font-family: Helvetica, Times, serif, sans-serif;
      text-align: center;
  }
  
  .right { 
      float: right;
      width: 42.5%;
      margin: 20px 5% 0 2.5%;	
  }
  
  .left {
      float: left;
      width: 42.5%;
      margin: 20px 2.5% 0 5%;
  }
  
  label {
      font-size: 0.8em;
      display: block;
      margin: 0 0 20px;
      padding: 5px 0;
      opacity: 0.9;
      background-color: white;
      border-radius: 30px;
      background-color: white;
  }
  
  #YourLife {
      opacity: 0.9;
      background-color: white;
      border: 1px solid grey;
      border-bottom: 1px solid grey;
      border-radius: 30px;
      color: black;
      font-family: Arial, Helvetica, sans-serif;
      padding: 8px 0;
      text-align: center;
  }
  
  #YourCount {
      text-align: center;
      font-size: 2em;
  
  }
  
  #YourUp {
    display: block;
      text-align: center;
      border-bottom: 1px solid grey;
      padding: 10px 0;
  }
  
  #YourDown {
    display: block;
      text-align: center;
      border-top: 1px solid grey;
      padding: 10px 0;
  }
  
  #EnemyLife {
      opacity: 0.9;
      background-color: white;
      border-radius: 30px;
      color: black;
      font-family: Arial, Helvetica, sans-serif;
      padding: 8px 0;
      text-align: center;
    
  
  }
  
  #EnemyCount {
      text-align: center;
      font-size: 2em;
  
  }
  
  #EnemyUp {
    display: block;
      text-align: center;
      border-bottom: 1px solid grey;
      padding: 10px 0;
  
  }
  
  #EnemyDown {
    display: block;
      text-align: center;
      border-top: 1px solid grey;
      padding: 10px 0;
  }
 
  
  #uUp2, #eUp2{
    border-bottom: 1px solid grey;
    color: blue;
  }

  #uDown2, #eDown2{
    border-top: 1px solid grey;
    color: blue;
  }
  .wrapper{
    display: inline-flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin-top: 5%;
  }
  #reset {
	font-size: 40px;
	text-align: center;
	height: 65px;
    width: 330px;
	font-family: Arial, Helvetica, sans-serif;
	color: black;
	opacity: 0.5;
	background-color: white;
	border-radius: 30px;
  }
  
  #YourUp, #YourDown, #EnemyUp, #EnemyDown, #YourUp, #YourDown, #EnemyUp, #EnemyDown, #reset, #uUp2, #uDown2, #eUp2, #eDown2 {
      opacity: 0.5;
  }

  @media (max-width: 490px){
    body{
      font-size: 0.6em;
    }
    #wrapper{
      font-size: 0.4em;
    }
  }