body {
  margin: 0;
  background: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial, sans-serif;
}

#game {
  width: 320px;
  height: 480px;
  background: url(../images/background.jpg) center center no-repeat;
  background-size:contain;
  position: relative;
  overflow: hidden;
}

.goal {
  position: absolute;
  top: 190px;
  left: 50px;
  width: 220px;
  height: 110px;
}

.goalimage {
  display:block;
  position: absolute;
  top:190px;
  left:50%;
  transform:translateX(-50%);
  width: 250px;
  height: 111px;
  background: url(../images/goal.png) center center no-repeat;
  background-size:contain;
}

.goalkeeper {
  position: absolute;
  top: 226px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 80px;
}
.goalkeeper::after {
  content:'';
  display:block;
  position:absolute;
  bottom:0px;
  left:50%;
  transform:translateX(-50%);
  width: 100px;
  height: 80px;
  background: url(../images/goalkeeper.png) center bottom no-repeat;
  background-size:contain;
}

.ball {
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: url(../images/ball.png) center center no-repeat;
  background-size:contain;
  border-radius: 50%;
}

.cursor {
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
}
.cursor::before {
  position:absolute;
  left:-12px;
  top:-12px;
  content:'';
  display:block;
  pointer-events:none;
  width:24px;
  height:24px;
  background:url(../images/cursor.svg) center center no-repeat;
  background-size:contain;
}

#info {
  position: absolute;
  bottom: 2px;
  width: 200px;
  left:60px;
  text-align: center;
  color: white;
  display:flex;
}
.info-data {
  flex:1;
  text-align:center;
  font-weight:bold;
}

#popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  display: none;
}

#screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#result-success,
#result-fail {
  display: none;
  font-size: 28px;
  text-align: center;
  width:320px;
  height:480px;
}
#result-success {
  background:url(../images/image-success.jpg) center center no-repeat;
  background-size:contain;
}
#result-fail {
  background:url(../images/image-fail.jpg) center center no-repeat;
  background-size:contain;
}

#screen button,
#popup {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  margin-top: 10px;
  border: none;
  cursor: pointer;
  font-size: 17px;
  white-space: nowrap;
  font-weight: bold;
  color: white;
  
  animation:buttonAnim 1s alternate infinite;
}
#screen button {
  padding:12px 24px;
  background-color: #fe0000;
  box-shadow: -4px 4px 0 rgba(0,0,0,.25);
}
#popup {
  height:20px;
}
#popup .popup-text {
  display: none;
  text-align:center;
  padding:12px 24px;
  border-radius:4px;
  box-shadow: -4px 4px 0 rgba(0,0,0,.25);
}

#popup.goal .popup-goal {
  display: block;
  background-color:#0090e3;
  font-size:1.5em;
}
#popup.fail .popup-fail {
  display: block;
  background-color: #fe0000;
}

.link {
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:400px;
}
#screen button:hover {
  background-color:#dc0000;
}
@keyframes buttonAnim {
  0% {transform:translateX(-50%);}
  100% {transform:translateX(-50%) scale(1.1);}
}