body{
    background-image:url(/files/listdots.png);
    background-size:20px;
}
button{
    color: #836953;
    background-color: #f0eee9;
    border: 1.5px solid #836953;
    border-radius:3px;
}
#extra{
    top:16px;
}
#more{
    top:33px;
}
#quiz{
    top:49px;
}
#read{
    top:65px;
}
.navicups{
    float:left;
    width: 142px;
    height:310px;
    margin-left:25%;
    margin-top:5%;
}
.hovercups {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
a.hovercups {
    border-bottom:none;
}
.hovercups span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 11px;
  font-family:'jgs5';
  color: #f0eee9;
  filter: drop-shadow(1px 1px 0 #836953) 
    drop-shadow(-1px 1px 0 #836953)
    drop-shadow(1px -1px 0 #836953)
    drop-shadow(-1px -1px 0 #836953);
}
.hovercups:hover span, .hovercups:focus span {
  opacity: 1;
}
.container {
  position: absolute;
  background-color:transparent;
  width:50%;height: 400px;left:142px;
  margin-left:25%;
  margin-top: 5%;
}
iframe{
width:50%;height:500px;border:none; top:5%; left:5%;position:absolute;
}
.elem {
  position:absolute;
  background-color:#f0eee9;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  border-radius:10px;
  width:250px;height:250px;top:50px;
}
.rat #img1{content:url(/stuff/cup/result1.png); width:100%;}
.shoey #img1{content:url(/stuff/cup/result2.png);width:100%;}
.snail #img1{content: url(/stuff/cup/result3.png);width:100%;}
.cactus #img1{content:url(/stuff/cup/result4.png);width:100%;}
.star #img1{content:url(/stuff/cup/result5.png);width:100%;}
#results {display: none;}
#error {display: none;}
ul {list-style-type: none;margin: 0;padding: 0;}

@media only screen and (max-width: 800px) {
    .container {width:70%; margin: auto;}
    iframe{width: 100%;}
    .navicups{margin: auto;}
}