@import url('https://fonts.googleapis.com/css?family=Supermercado+One');
@import url('https://fonts.googleapis.com/css?family=Lato');

* {
  margin: 0;
  box-sizing: border-box;
  justify-content: center;
  font-family:'Lato';
  text-align: center;
}

section {
  cursor: pointer;
}

img {
  top: 300px;
  left: 37%;
  position: absolute;
  z-index: 10;
}

.pizza {
  top: 200px;
  left: 37%;
  position: absolute;
  z-index: 10;
}


/* introduction */
a:hover {
  color: red;
}

.apple {
  top: 550px;
  left: 37%;
  position: absolute;
  z-index: 10;
}

.burger {
  top: 550px;
  left: 37%;
  position: absolute;
  z-index: 10;
}

.hotdog {
  top: 550px;
  left: 37%;
  position: absolute;
  z-index: 10;
}


.intro {
  position: absolute;
  right: 25%;
  width: 315px;
}

.fridgeinfo {
  position: absolute;
  right: 25%;
  width: 300px;
}

.gone {
  position: absolute;
  right: 25%;
  width: 300px;
}

.skip {
  position: absolute;
  bottom: 100px;
  right: 100px;
  right: 25%;
  width: 300px;
  z-index: 20;
}

.mtext {
  position: absolute;
  right: 25%;
  width: 300px;
}
/* food description */

.bmuffinf {
  position: absolute;
  right: 25%;
  width: 300px;
}

.bmuffind {
  position: absolute;
  right: 25%;
  width: 300px;
}

.pbjd {
  position: absolute;
  right: 25%;
  width: 300px;
}

.muffind {
  position: absolute;
  right: 25%;
  width: 300px;
}

.pizzad {
  position: absolute;
  right: 25%;
  width: 300px;
}

.bananad {
  position: absolute;
  right: 25%;
  width: 300px;
}

.gone {
  position: absolute;
  right: 25%;
  width: 300px;
}

.muffinno {
  position: absolute;
  right: 25%;
  width: 300px;
}

.bananano {
  position: absolute;
  right: 25%;
  width: 300px;
}

.done {
  position: absolute;
  top: 500px;
  right: 25%;
  width: 300px;
}

.microwave {
  width: 655px;
  height: 130px;
  background: url(images/closed.png) -137px 0px;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  z-index: 0;
  cursor: pointer;
}

.freezer {
  width: 655px;
  height: 155px;
  background: url(images/closed.png) -137px -130px;
  position: absolute;
  margin-top: 130px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  z-index: 20;
  cursor: pointer;
}

.fridge {
  width: 655px;
  height: 315px;
  background: url(images/closed.png) -137px -285px;
  position: absolute;
  margin-top: 285px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  z-index: 20;
  cursor: pointer;
}

#sorry {
  background-color: white;
  font-size: 2em;
  position:absolute;
  z-index: 20;
  display: none;
}

#microwave {
    width: 655px;
    height: 130px;
    background: url(images/microwave.png) -137px 0px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    z-index: 20;
    cursor: pointer;
}

#freezer {
    width: 655px;
    height: 155px;
    background: url(images/open.png) -136px -130px;
    position: absolute;
    margin-top: 130px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    z-index: 0;
    cursor: pointer;
}

#fridge {
    width: 655px;
    height: 315px;
    background: url(images/open.png) -136px -285px;
    position: absolute;
    margin-top: 285px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    z-index: 0;
    cursor: pointer;
}

/* clock text */
#txt {
	color: red;
	font-family: 'Supermercado One', cursive;
	text-align: center;
	font-size: 4em;
	font-style: italic;
	padding-top: 5%;
}

/* subtitle!! */
p {
  margin-bottom: 3%;
}

/* dramatic lighting!!! */
#spotLight {
  width: 100%;
  height: 100%;
  z-index: -9;
  position: absolute;
  display: none;
}

/* make clock flicker*/
#flick {
  animation: text-flicker 2s linear infinite;
}

@keyframes text-flicker {
  0% {
    opacity:0.1;
    text-shadow: 0px 0px 20px red;
  }
 
  2% {
    opacity:1;
    text-shadow: 0px 0px 20px red;
  }
  8% {
    opacity:1;
    text-shadow: 0px 0px 20px red;
  }
  9% {
    opacity:1;
    text-shadow: 0px 0px 20px red;
  }
  12% {
    opacity:0.1;
    text-shadow: 0px 0px red;
  }
  20% {
    opacity:1;
    text-shadow: 0px 0px 20px red
  }
  25% {
    opacity:0.3;
    text-shadow: 0px 0px 20px red
  }
  30% {
    opacity:1;
    text-shadow: 0px 0px 20px red
  }
 
  70% {
    opacity:1;
    text-shadow: 0px 0px 20px red
  }
 
  72% {
    opacity:.4;
    text-shadow:0px 0px 20px red
  }
 
  77% {
    opacity:1;
    text-shadow: 0px 0px 20px red
  }
  100% {
    opacity:1;
    text-shadow: 0px 0px 20px red
  }}

/* end of clock flicker */

@media only screen and (max-width: 550px) {
    #sorry {
        display: block;
    }
}