body {
  background: 
    linear-gradient(135deg, #ffae61, #ff77dd, #9760e6, #7990e6),
    linear-gradient(45deg, #61ffae, #ddff77, #e66097, #e67990);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-clip: content-box;
}



#timer {
position: absolute;
top: 45%;
left: 15%;
transform: translate(-50%, -50%);
color: black;
font-size: 16px;

}

#startTimer {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
color: black;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
}

.kort_spill {
  width: 700px;
  height: 700px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}

.kort {
  width: 20%;
  height: 28%;
  margin: 10px;
  position: relative;
  transform-style: preserve-3d;
  transition: 0.5s;
}

.foran, .bak {
  width: 100%;
  height: 100%;
  padding: 10px;
  position: absolute;
  backface-visibility: hidden;
}

.kort .foran {
transform: rotateY(180deg);
}

.kort .bak {
transform: rotateY(0deg);
transition: opacity 0.25s 0.25s;
}

.bak {
opacity: 1;
transform: rotateY(180deg);
}

.kort.flipped {
opacity: 1;
transform: rotateY(180deg);
}

#time {
  font-size: 50px;

  color: #fdfcfc;
  background: 
  linear-gradient(135deg, #de6f06, #ff77dd, #9760e6, #7990e6),
  linear-gradient(45deg, #61ffae, #ddff77, #e66097, #e67990);
  border: 2px solid #ffffff;
  padding: 1px; 
  border-radius: 20px;
  width: 200px;
  text-align: center;
  box-shadow: 8px 3px 5px #888;
  text-decoration-style: double;

}

#leaderboard {
  background: 
  linear-gradient(135deg, #ffae61, #ff8e77, #e66060, #dfe679),
  linear-gradient(45deg, #61ffdd, #ffdf77, #e66260, #797de6);
  position: absolute;
top: 0%;
right: -5%;
  width: 300px; 
  transform: translate(-50%, -50%);
  background-color: white;
  border: 2px solid #ffffff;
  padding: 1px; 
  border-radius: 20px;
  width: 200px;
  text-align: center;
  box-shadow: 8px 3px 5px #888;
  text-decoration-style: double;
}

h3 {
  font-size: 20px; 
  text-align: center; 
}

ol {
  list-style: decimal; 
  padding: 0; 
}

li {
  font-size: 16px; 
  margin: 10px 0; 
  text-align: center;
}

#newGame {

  font-size: 50px;

  color: #fdfcfc;
  background: 
  linear-gradient(135deg, #de6f06, #ff77dd, #9760e6, #7990e6),
  linear-gradient(45deg, #61ffae, #ddff77, #e66097, #e67990);
  border: 2px solid #ffffff;
  padding: 1px; 
  border-radius: 20px;
  width: 200px;
  text-align: center;
  box-shadow: 8px 3px 5px #888;
  text-decoration-style: double;

  position: absolute;
  top: 5%;
  left: 6%;
  transform: translate(-50%, -50%);
  color: black;
  font-size: 16px;


}