main.css

header {
  padding: 10px 15px 7px;
  background: #333;
  color: white;
  font-family: Georgia, Times, serif;
  font-size: 15px;
  font-style: italic;
}
header h1,
header p {
  display: inline-block;
}
header h1 {
  margin-bottom: 5px;
}
header p {
  color: #bed4dc;
}
header p a {
  color: #67b1cd;
  text-decoration: none;
  border-bottom: 1px dotted;
}
@media (max-width: 400px) {
  header {
    padding: 15px;
  }
}
.entry {
  text-align: center;
  min-height: 400px;
  position: relative;
}
.entry div {
  position: absolute;
  left: 50%;
  top: 50%;
}
.entry div:before,
.entry div:after {
  display: block;
  content: '';
  position: absolute;
}
@media (max-width: 400px) {
  .entry div {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}
.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}
@media all and (min-width: 960px) {
  .entry {
    float: left;
    width: 50%;
  }
  .entry.wide {
    width: 100%;
  }
}
#camera {
  background: #ffa500;
}
#camera div {
  width: 300px;
  height: 130px;
  margin-left: -150px;
  margin-top: -65px;
  z-index: 1;
  background: linear-gradient(to right, #111 0%, #444 15%, #444 85%, #111 100%);
  border-top: 15px solid #ccc;
  border-bottom: 12px solid #ccc;
  border-image: linear-gradient(to right, #444, #ccc, #ccc, #ccc, #ccc, #444) 1% stretch;
  box-shadow: 0 3px 4px -2px rgba(0,0,0,0.6), 0 10px 7px -2px rgba(0,0,0,0.4);
}
#camera div:before {
  width: 33px;
  height: 18px;
  margin-left: 30px;
  top: -30px;
  left: 50%;
  z-index: 2;
  background: #333;
  box-shadow: 0 0 0 2px #eee, -1px -1px 1px 3px #333, -95px 6px 0 0 #ccc, 30px 3px 0 12px #ccc, -18px 37px 0 46px #ccc, -96px -6px 0 -6px #555, -96px -9px 0 -6px #ddd, -155px -10px 1px 3px #888, -165px -10px 1px 3px #999, -170px -10px 1px 3px #666, -162px -8px 0 5px #555, 85px -4px 1px -3px #ccc, 79px -4px 1px -3px #888, 82px 1px 0 -4px #555;
}
#camera div:after {
  width: 100px;
  height: 100px;
  margin-left: -20px;
  top: 15px;
  left: 50%;
  z-index: 3;
  background: linear-gradient(45deg, #ccc 40%, #ddd 100%);
  border-radius: 50%;
  box-shadow: 0 3px 2px #999, 1px -2px 0 white, -1px -3px 2px #555, 0 0 0 15px #c2c2c2, 0 -2px 0 15px white, -2px -5px 1px 17px #666, 0 10px 10px 15px rgba(0,0,0,0.3), -90px -51px 1px -43px #aaa, -90px -50px 1px -40px #888, -90px -51px 0 -34px #ccc, -90px -50px 0 -30px #aaa, -90px -48px 1px -28px rgba(0,0,0,0.2), -124px -73px 1px -48px #eee, -125px -72px 0 -46px #666, -85px -73px 1px -48px #eee, -86px -72px 0 -46px #666, 42px -82px 1px -48px #eee, 41px -81px 0 -46px #777, 67px -73px 1px -48px #eee, 66px -72px 0 -46px #666, -46px -86px 1px -45px #444, -44px -87px 0 -38px #333, -44px -86px 0 -37px #ccc, -44px -85px 0 -34px #999, 14px -89px 1px -48px #eee, 12px -84px 1px -48px #999, 23px -85px 0 -47px #444, 23px -87px 0 -46px #888;
}
#bloody-mary {
  background: #b0e0e6;
}
#bloody-mary div {
  width: 180px;
  height: 100px;
  margin-left: -90px;
  margin-top: 10px;
  z-index: 2;
  background: linear-gradient(to right, #eee 0%, #db493e 3%, #b8423a 5%, #53646e 7%, #b8423a 9%, #53646e 11%, #53646e 14%, #bfc9ca 33%, #eee 41%, #eee 75%, #95a4a3 85%, #556168 90%, #7c8285 98%, white 100%);
  border-bottom-left-radius: 80px 10px;
  border-bottom-right-radius: 80px 10px;
  border-bottom: 2px solid #ddd;
  box-shadow: 0 3px 4px -3px rgba(0,0,0,0.4), 0 8px 7px -3px rgba(0,0,0,0.2);
}
#bloody-mary div:before {
  width: 40px;
  height: 95px;
  margin-left: 40px;
  top: -140px;
  left: 50%;
  z-index: 1;
  background: #d7e17f;
  background: linear-gradient(to right, #cdeca8 10%, #a2d269 18%, #a2d269 25%, #bde192 45%, #bde192 55%, #95c260 75%, #95c260 82%, #bde192 90%);
  border-top-left-radius: 20px 3px;
  border-top-right-radius: 20px 3px;
  border-top: 5px solid #95c260;
  box-shadow: -65px 111px 0 14px #eee;
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
}
#bloody-mary div:after {
  width: 177px;
  height: 170px;
  margin-left: -90px;
  top: -105px;
  left: 50%;
  z-index: 3;
  background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0) 15%, rgba(255,255,255,0) 45%, rgba(255,255,255,0.3) 55%, rgba(255,255,255,0.3) 65%, rgba(255,255,255,0) 80%, rgba(0,0,0,0.2) 100%), linear-gradient(to bottom, transparent 30%, #e04435 30%, #ab2e22 100%);
  border: 1px solid #ddd;
  border-right-width: 2px;
  border-bottom-width: 5px;
  border-top-width: 2px;
  border-top-color: #eee;
  border-bottom-left-radius: 150px 15px;
  border-bottom-right-radius: 150px 15px;
  border-top-left-radius: 120px 15px;
  border-top-right-radius: 120px 15px;
}
#cpt-america {
  background: #899d4e;
}
#cpt-america div {
  width: 250px;
  height: 250px;
  margin-left: -125px;
  margin-top: -140px;
  z-index: 1;
  background: linear-gradient(45deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 65%), linear-gradient(-45deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 65%), linear-gradient(to right, rgba(0,0,0,0) 35%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 65%), linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 65%), radial-gradient(ellipse at center, #0033b0 20%, #ce0021 20%, #ce0021 35%, #bbb 35%, #bbb 55%, #ce0021 55%);
  border-radius: 50%;
  box-shadow: 0 3px 0 #a20917;
}
#cpt-america div:before {
  width: 70px;
  height: 70px;
  margin-left: -35px;
  margin-top: -35px;
  top: 50%;
  left: 50%;
  z-index: 2;
  background: rgba(0,80,170,0.5);
  border-radius: 50%;
  content: '?';
  font-size: 70px;
  color: #ddd;
  line-height: 65px;
  text-shadow: -1px 1px 0 #3e92ff, 1px -1px 0 #1e436d;
}
#cpt-america div:after {
  width: 200px;
  height: 30px;
  margin-left: -100px;
  top: 215px;
  left: 50%;
  border-radius: 50%;
  box-shadow: 0 50px 20px rgba(0,0,0,0.15);
}
#breakfast {
  background: #008b8b;
}
#breakfast div {
  width: 210px;
  height: 210px;
  margin-left: -105px;
  margin-top: -105px;
  border-radius: 50%;
  background: #f7f7f7;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.1), 0 0 0 20px white, 0 6px 0 20px #eee, 0 12px 4px 20px rgba(0,0,0,0.2);
}
#breakfast div:before {
  width: 140px;
  height: 140px;
  left: 70px;
  top: 0px;
  border-radius: 50%;
  background: #d6ab75;
  box-shadow: 0 6px 0 #f1cb9a, 0 8px 2px rgba(0,0,0,0.2), -132px 40px 0 -61px #f6c83e, -128px 40px 0 -54px #edb815, -128px 42px 2px -54px rgba(0,0,0,0.2), -115px 30px 0 -30px white, -62px 90px 0 -61px #f6c83e, -65px 90px 0 -54px #edb815, -65px 92px 2px -54px rgba(0,0,0,0.2), -80px 90px 0 -32px white, -115px 33px 2px -30px rgba(0,0,0,0.1), -80px 93px 2px -32px rgba(0,0,0,0.1), -8px 110px 0 -45px #8c7842, -8px 113px 2px -45px rgba(0,0,0,0.2), 25px 103px 0 -45px #806c35, 25px 106px 2px -45px rgba(0,0,0,0.2), -93px -40px 0 -45px #e4a5b6, -93px -39px 0 -42px #c97d91, -93px -37px 2px -42px rgba(0,0,0,0.2);
}
#breakfast div:after {
  width: 30px;
  height: 30px;
  left: 120px;
  top: 50px;
  border-radius: 2px;
  background: #fbf6bc;
  box-shadow: 1px 1px 0 2px #dfd888, 2px 2px 3px 2px rgba(0,0,0,0.2);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
#battery {
  background: black;
}
#battery div {
  width: 250px;
  height: 120px;
  margin-left: -130px;
  margin-top: -60px;
  border-radius: 10px/30px;
  border-left: 2px solid rgba(255,255,255,0.2);
  border-right: 2px solid rgba(255,255,255,0.2);
  background-image: linear-gradient(to right, transparent 5%, #316d08 5%, #316d08 7%, #60b939 8%, #60b939 10%, #51aa31 11%, #51aa31 60%, #64ce11 61%, #64ce11 63%, #255405 63%, black 68%, black 95%, transparent 95%), linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.4) 4%, rgba(255,255,255,0.2) 7%, rgba(255,255,255,0.2) 14%, rgba(255,255,255,0.8) 14%, rgba(255,255,255,0.2) 40%, rgba(255,255,255,0) 41%, rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.4) 86%, rgba(255,255,255,0.6) 90%, rgba(255,255,255,0.1) 92%, rgba(255,255,255,0.1) 95%, rgba(255,255,255,0.5) 98%);
}
#battery div:before {
  width: 12px;
  height: 55px;
  right: -14px;
  top: 32px;
  border-top-right-radius: 6px 10px;
  border-bottom-right-radius: 6px 10px;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 14%, rgba(255,255,255,0.8) 14%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0) 41%, rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.4) 86%, rgba(255,255,255,0.6) 90%, rgba(255,255,255,0.1) 92%, rgba(255,255,255,0.1) 95%, rgba(255,255,255,0.5) 98%);
}
#battery div:after {
  width: 220px;
  height: 120px;
  left: 10px;
  border-radius: 5px/30px;
  border-left: 4px solid black;
  border-right: 4px solid black;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.3) 4%, rgba(255,255,255,0.2) 5%, transparent 5%, transparent 14%, rgba(255,255,255,0.3) 14%, rgba(255,255,255,0.12) 40%, rgba(0,0,0,0.05) 42%, rgba(0,0,0,0.05) 48%, transparent 60%, transparent 80%, rgba(255,255,255,0.3) 87%, rgba(255,255,255,0.3) 92%, transparent 92%, transparent 97%, rgba(255,255,255,0.4) 97%), linear-gradient(to left, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 2%, black 2%, black 6%, transparent 6%), linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0.3) 90%, rgba(255,255,255,0) 90%);
}
#marshmallow {
  background: #66cdaa;
}
#marshmallow div {
  width: 100px;
  height: 120px;
  margin-left: -50px;
  margin-top: -70px;
  background: white;
  background-image: radial-gradient(circle at 50% -70px, transparent 50%, #f5f5f5 50%);
  border-top-left-radius: 100px 40px;
  border-top-right-radius: 100px 40px;
  border-bottom-left-radius: 100px 40px;
  border-bottom-right-radius: 100px 40px;
  border: 4px solid #808080;
}
#marshmallow div:before {
  width: 8px;
  height: 80px;
  margin-left: -4px;
  left: 50%;
  top: 125px;
  background: #d3d3d3;
  box-shadow: 0 0 0 3px #808080, 0 -193px 0 #d3d3d3, 0 -193px 0 3px #808080;
}
#marshmallow div:after {
  width: 10px;
  height: 10px;
  left: 20px;
  top: 50px;
  background: #808080;
  border-radius: 50%;
  box-shadow: 50px 0 0 #808080, 25px 3px 0 16px #f5f5f5, 25px 13px 0 11px #808080;
}
#sushi {
  background: #87ceeb;
}
#sushi div {
  width: 250px;
  height: 100px;
  margin-left: -125px;
  margin-top: -37px;
  background: white;
  border-top-left-radius: 80px 50px;
  border-top-right-radius: 80px 50px;
  border-bottom-left-radius: 40px 50px;
  border-bottom-right-radius: 40px 50px;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.08) 32%, transparent 32%), linear-gradient(85deg, transparent 39%, rgba(0,0,0,0.05) 39%, rgba(0,0,0,0.05) 45%, transparent 45%);
  box-shadow: 0 25px 0 -20px rgba(0,0,0,0.1);
}
#sushi div:before {
  width: 260px;
  height: 25px;
  margin-left: -130px;
  left: 50%;
  border-top-left-radius: 90px 30px;
  border-top-right-radius: 80px 20px;
  background: #f19861;
  background-image: linear-gradient(to bottom, transparent 70%, rgba(0,0,0,0.05) 70%), linear-gradient(to right, transparent 41%, rgba(0,0,0,0.1) 41%, rgba(0,0,0,0.1) 50%, transparent 50%), repeating-linear-gradient(45deg, #f19861, #f19861 20px, #ffcdaf 20px, #ffcdaf 25px);
}
#sushi div:after {
  width: 40px;
  height: 103px;
  margin-left: -20px;
  left: 50%;
  top: -2px;
  background: #465b45;
  background-image: linear-gradient(to right, transparent 60%, rgba(0,0,0,0.1) 60%);
}
#brazil {
  background: #f0e68c;
}
#brazil div {
  width: 300px;
  height: 200px;
  margin-left: -150px;
  margin-top: -100px;
  background: #fee63c;
  background-image: linear-gradient(30deg, #019f6f 30%, transparent 30%), linear-gradient(-30deg, #019f6f 30%, transparent 30%), linear-gradient(210deg, #019f6f 30%, transparent 30%), linear-gradient(-210deg, #019f6f 30%, transparent 30%);
  box-shadow: 7px 7px 0 rgba(0,0,0,0.1);
}
#brazil div:before {
  width: 90px;
  height: 90px;
  margin-left: -45px;
  margin-top: -45px;
  left: 50%;
  top: 50%;
  background: #2765ae;
  background-image: radial-gradient(circle at 0 175px, transparent 71%, white 72%, white 78%, transparent 79%);
  border-radius: 50%;
}
#brazil div:after {
  width: 4px;
  height: 4px;
  top: 80px;
  left: 160px;
  background: white;
  border-radius: 50%;
  box-shadow: -45px 15px 0 0 white, -40px 30px 0 0 white, -27px 43px 0 0 white, -10px 36px 0 0 white, 13px 38px 0 0 white, -47px 32px 0 -1px white, -35px 25px 0 -1px white, -25px 20px 0 -1px white, -33px 34px 0 -1px white, -35px 40px 0 -1px white, -5px 22px 0 -1px white, -15px 26px 0 -1px white, -17px 32px 0 -1px white, -10px 29px 0 -1px white, -12px 53px 0 -1px white, 0px 42px 0 -1px white, 5px 48px 0 -1px white, 6px 43px 0 -1px white, 8px 40px 0 -1px white, 12px 45px 0 -1px white, 17px 35px 0 -1px white, 23px 37px 0 -1px white;
}
#soccer {
  background: #afeeee;
}
#soccer div {
  width: 300px;
  height: 70px;
  margin-left: -150px;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
}
#soccer div:before {
  width: 150px;
  height: 100px;
  margin-left: -80px;
  left: 50%;
  top: -95px;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, white 10px, white 11px), repeating-linear-gradient(-45deg, transparent, transparent 10px, white 10px, white 11px);
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border: 6px solid white;
  border-bottom: none;
}
#soccer div:after {
  width: 20px;
  height: 20px;
  left: 170px;
  top: 20px;
  border: 3px solid white;
  border-radius: 50%;
}
#key {
  background: #f7f7f7;
}
#key div {
  width: 80px;
  height: 100px;
  margin-left: -180px;
  margin-top: -70px;
  border: 15px solid #fdf1cd;
  border-radius: 50%;
  box-shadow: -3px -3px 0 3px #fefffa, -4px -4px 1px 3px #c68628, -6px -5px 0 4px #feedac, 3px 2px 0 3px #fdf1cd, 7px 5px 3px 3px #2e1f07, 10px 7px 0 3px #c68628, inset 4px 3px 3px #2e1f07, inset 7px 5px 0 #c68628, inset 9px 7px 2px rgba(0,0,0,0.4), inset 12px 10px 3px rgba(0,0,0,0.2), inset -2px -2px 0 #fefffa, 12px 8px 3px 3px rgba(0,0,0,0.4), 15px 12px 3px 3px rgba(0,0,0,0.2);
}
@media (max-width: 500px) {
  #key div {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    margin-left: -140px;
  }
}
#key div:before {
  width: 250px;
  height: 30px;
  left: 85px;
  top: 35px;
  background-image: linear-gradient(to bottom, #f8d675 3%, #f8d675 7%, #2e1f07 11%, #2e1f07 16%, #fefffa 23%, #fefffa 50%, #2e1f07 57%, #2e1f07 70%, #feedac 84%, #feedac 97%, #c68628 99%);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-left: 1px solid #fefffa;
  border-right: 1px solid #f8d675;
  box-shadow: -1px 0 0 #c68628, 1px 0 0 #2e1f07, 2px 0 0 #c68628, 5px 4px 2px -1px rgba(0,0,0,0.4), 11px 9px 4px rgba(0,0,0,0.2);
}
#key div:after {
  width: 40px;
  height: 40px;
  top: 30px;
  left: 112px;
  background-image: linear-gradient(to bottom, #f8d675 3%, #f8d675 7%, #2e1f07 11%, #2e1f07 16%, #fefffa 23%, #fefffa 45%, #2e1f07 52%, #2e1f07 65%, #feedac 80%, #feedac 97%, #c68628 99%);
  box-shadow: -1px 0 1px #fefffa, 1px 0 0 #f8d675, 2px 0 0 #c68628, 3px 3px 2px rgba(0,0,0,0.2), 170px 37px 0 4px #f8e6b3, 169px 37px 0 4px #fefffa, 170px 34px 0 4px #2e1f07, 171px 39px 2px 4px #2e1f07, 172px 40px 0 5px #d69941, 174px 43px 3px 4px rgba(0,0,0,0.4), 178px 45px 4px 4px rgba(0,0,0,0.2);
}
#mickey-hat {
  background: #ffb6c1;
}
#mickey-hat div {
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -70px;
  border-radius: 0 70% 0 100%;
  border-bottom: 7px solid #333;
  border-left: 7px solid #333;
  background: #222;
  background-image: radial-gradient(circle at 170px 220px, rgba(255,255,255,0) 70%, rgba(255,255,255,0.15) 90%), radial-gradient(circle at 50px 80px, transparent 60%, #000 90%);
  box-shadow: -7px 7px 6px -2px rgba(0,0,0,0.3);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
@media (max-width: 500px) {
  #mickey-hat div {
    -webkit-transform: scale(0.7) rotate(-45deg);
    transform: scale(0.7) rotate(-45deg);
  }
}
#mickey-hat div:before {
  width: 110px;
  height: 110px;
  top: -102px;
  left: 29px;
  background: #333;
  background-image: radial-gradient(circle at 80px 0px, transparent 60%, rgba(255,255,255,0.2) 90%);
  border-radius: 50%;
  box-shadow: -4px 4px 0 4px #222;
}
#mickey-hat div:after {
  width: 110px;
  height: 110px;
  top: 56px;
  left: 192px;
  background: #333;
  background-image: radial-gradient(circle at 80px 0px, transparent 60%, rgba(255,255,255,0.2) 90%);
  border-radius: 50%;
  box-shadow: -4px 4px 0 4px #222, -144px -45px 0 -44px #222, -115px -15px 0 -44px #222, -142px -22px 0 -53px #222, -138px -18px 0 -53px #222, -143px -17px 0 -54px white, -144px -16px 0 -51px #222, -142px -23px 0 -50px white, -137px -18px 0 -50px white, -151px -9px 0 -54px #e95b4f, -150px -10px 0 -52px #222, -142px -18px 0 -40px #d3b579, -141px -19px 0 -36px #222, -141px -19px 0 -28px white, -141px -18px 0 -11px #e95b4f;
}
#hobbit-door {
  background: #d2b48c;
}
#hobbit-door div {
  width: 250px;
  height: 250px;
  margin-left: -125px;
  margin-top: -140px;
  z-index: 1;
  background-color: #825034;
  background-image: linear-gradient(to right, transparent 45%, #bb7a56 45%, #bb7a56 55%, transparent 55%), linear-gradient(76deg, transparent 45%, #ae6a46 45%, #ae6a46 55%, transparent 55%), linear-gradient(-76deg, transparent 45%, #b7714b 45%, #b7714b 55%, transparent 55%), linear-gradient(60deg, transparent 45%, #bb7a56 45%, #bb7a56 55%, transparent 55%), linear-gradient(-60deg, transparent 45%, #c48b6c 45%, #c48b6c 55%, transparent 55%), linear-gradient(42deg, transparent 45%, #ca977b 45%, #ca977b 55%, transparent 55%), linear-gradient(-42deg, transparent 45%, #bb7a56 45%, #bb7a56 55%, transparent 55%), linear-gradient(-24deg, transparent 45%, #ca977b 45%, #ca977b 55%, transparent 55%), linear-gradient(25deg, transparent 45%, #985d3d 45%, #985d3d 55%, transparent 55%), linear-gradient(-9deg, transparent 45%, #c48b6c 45%, #c48b6c 55%, transparent 55%), linear-gradient(7deg, transparent 44%, #bb7a56 44%, #bb7a56 55%, transparent 55%);
  border-radius: 50%;
  box-shadow: 0 5px #985d3d;
}
#hobbit-door div:before {
  width: 190px;
  height: 190px;
  margin-left: -95px;
  margin-top: -95px;
  top: 50%;
  left: 50%;
  background: #468e60;
  background-image: repeating-linear-gradient(to right, transparent, transparent 22px, #26603b 22px, #26603b 24px, #73b38a 24px, #73b38a 25px);
  border-radius: 50%;
  box-shadow: inset 0 5px 0 #6c422c, inset 0 12px 5px rgba(0,0,0,0.3), inset 0 -4px 3px rgba(0,0,0,0.2);
}
#hobbit-door div:after {
  width: 25px;
  height: 25px;
  margin-left: -12.5px;
  margin-top: -12.5px;
  top: 50%;
  left: 50%;
  background: #ffeb8f;
  border-radius: 50%;
  box-shadow: inset 0 -6px 5px rgba(111,74,24,0.5), 0 5px 3px rgba(0,0,0,0.4);
}
#tardis {
  background: #2f4f4f;
}
#tardis div {
  width: 170px;
  height: 250px;
  margin-left: -85px;
  margin-top: -110px;
  background: #274d7e;
  background-image: linear-gradient(to right, #295185 15px, #21416a 15px, #21416a 17px, #264b7a 17px, #264b7a 20px, #21416a 20px, #21416a 22px, #274d7e 22px, #274d7e 32px, transparent 32px, transparent 83px, #1d395d 83px, #1d395d 85px, #21416a 85px, #21416a 87px, #1d395d 87px, #1d395d 89px, transparent 90px), linear-gradient(to left, #295185 15px, #21416a 15px, #21416a 17px, #264b7a 17px, #264b7a 20px, #21416a 20px, #21416a 22px, #274d7e 22px, #274d7e 32px, transparent 32px, transparent 75px, #274d7e 75px, #274d7e 95px, transparent 95px), linear-gradient(to bottom, transparent 85px, #244775 85px, #244775 130px, transparent 130px, transparent 140px, #244775 140px, #244775 185px, transparent 185px, transparent 195px, #244775 195px, #244775 240px, transparent 240px), linear-gradient(to bottom, transparent 52px, #274d7e 52px, #274d7e 54px, transparent 54px), linear-gradient(to right, transparent 44px, #274d7e 44px, #274d7e 46px, transparent 46px, transparent 60px, #274d7e 60px, #274d7e 62px, transparent 62px, transparent 108px, #274d7e 108px, #274d7e 110px, transparent 110px, transparent 124px, #274d7e 124px, #274d7e 126px, transparent 126px), linear-gradient(to bottom, transparent 30px, rgba(255,255,255,0.4) 30px, rgba(255,255,255,0.9) 75px, transparent 75px);
  border-bottom: 8px solid #2b568d;
  box-shadow: 0 12px 0 #21416a, 0 18px 8px -3px rgba(0,0,0,0.3);
}
#tardis div:before {
  width: 150px;
  height: 18px;
  margin-left: -75px;
  margin-top: -8px;
  left: 50%;
  content: 'POLICE BOX';
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 5px;
  line-height: 18px;
  color: rgba(255,255,255,0.8);
  background: #333;
  box-shadow: 0 0 0 4px #295185, 0 4px 4px 4px rgba(0,0,0,0.3), 0 -15px 0 #274d7e, 0 -27px 0 -6px #295185, 0 -32px 0 -6px #295185;
}
#tardis div:after {
  width: 15px;
  height: 20px;
  margin-left: -7.5px;
  left: 50%;
  top: -62px;
  background: rgba(255,255,255,0.7);
  background-image: linear-gradient(to right, transparent 5px, #31619f 5px, #31619f 6px, transparent 6px), linear-gradient(to bottom, transparent 5px, #31619f 5px, #31619f 6px, transparent 6px, transparent 13px, #31619f 13px, #31619f 14px, transparent 14px);
  border-bottom: 3px solid #31619f;
  border-top: 5px solid #31619f;
  box-shadow: 0 -2px 10px -1px rgba(255,255,255,0.5), -39px 155px 0 rgba(255,255,255,0.6), -24px 155px 0 rgba(255,255,255,0.6);
}
#marker {
  background: #dcdcdc;
}
#marker div {
  width: 80px;
  height: 80px;
  margin-left: -80px;
  margin-top: -110px;
  background: #f00;
  background-image: radial-gradient(circle at 25px 23px, white 7%, rgba(255,255,255,0) 40%);
  box-shadow: inset -5px -5px 10px #f00, inset -18px -23px 15px rgba(0,0,0,0.2);
  border-radius: 50%;
}
#marker div:before {
  width: 130px;
  height: 150px;
  top: 80px;
  left: 34px;
  background-image: linear-gradient(to right, #eee 3px, #777 12px, transparent 12px), linear-gradient(-20deg, rgba(178,175,175,0) 37px, #b2afaf 44px, #b2afaf 45px, rgba(178,175,175,0) 52px);
}
#marker div:after {
  width: 60px;
  height: 45px;
  top: 152px;
  left: 147px;
  background-image: linear-gradient(20deg, #b2afaf 30%, rgba(178,175,175,0) 90%);
  border-radius: 50%;
  box-shadow: -1px 2px 3px #b2afaf;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}
#crayon {
  background: #f3c114;
}
#crayon div {
  width: 250px;
  height: 40px;
  margin-left: -110px;
  margin-top: -20px;
  z-index: 1;
  background: #237449;
  background-image: radial-gradient(ellipse at top, rgba(0,0,0,0.6) 50px, transparent 54px), linear-gradient(to right, transparent 25px, rgba(0,0,0,0.6) 25px, rgba(0,0,0,0.6) 30px, transparent 30px, transparent 35px, rgba(0,0,0,0.6) 35px, rgba(0,0,0,0.6) 40px, transparent 40px, transparent 210px, rgba(0,0,0,0.6) 210px, rgba(0,0,0,0.6) 215px, transparent 215px, transparent 220px, rgba(0,0,0,0.6) 220px, rgba(0,0,0,0.6) 225px, transparent 225px), linear-gradient(to right, transparent 12px, rgba(41,237,133,0.6) 12px, rgba(41,237,133,0.6) 235px, transparent 235px), linear-gradient(to bottom, transparent 62%, rgba(0,0,0,0.3) 100%);
  border-radius: 2px;
  box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
}
#crayon div:before {
  height: 10px;
  left: -48px;
  top: 2px;
  border-right: 48px solid #237449;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
}
#crayon div:after {
  width: 251px;
  height: 23px;
  content: 'green';
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: rgba(0,0,0,0.3);
  text-align: right;
  padding-right: 47px;
  padding-top: 17px;
  left: -48px;
  background-image: linear-gradient(to right, transparent 46px, rgba(0,0,0,0.3) 48px, transparent 48px), linear-gradient(to bottom, rgba(255,255,255,0) 12px, rgba(255,255,255,0.2) 17px, rgba(255,255,255,0.2) 19px, rgba(255,255,255,0) 24px);
}
#mint {
  background: #faf0e6;
}
#mint div {
  width: 120px;
  height: 120px;
  margin-left: -60px;
  margin-top: -60px;
  background: white;
  background-image: radial-gradient(circle at center, white 35%, transparent 45%), linear-gradient(150deg, transparent 46%, #f00 48%, #f00 52%, transparent 54%), linear-gradient(120deg, transparent 46%, #f00 48%, #f00 52%, transparent 54%), linear-gradient(90deg, transparent 45%, #f00 47%, #f00 53%, transparent 55%), linear-gradient(60deg, transparent 46%, #f00 48%, #f00 52%, transparent 54%), linear-gradient(30deg, transparent 46%, #f00 48%, #f00 52%, transparent 54%), linear-gradient(0deg, transparent 45%, #f00 47%, #f00 53%, transparent 55%);
  border-radius: 50%;
  box-shadow: inset 0 -4px 6px rgba(0,0,0,0.2);
}
#mint div:before {
  width: 150px;
  height: 200px;
  left: -19px;
  top: -50px;
  background-image: linear-gradient(135deg, rgba(255,255,255,0) 50%, #ebe4db 50%), linear-gradient(-135deg, rgba(255,255,255,0) 50%, #ebe4db 50%), linear-gradient(45deg, rgba(255,255,255,0) 50%, #ebe4db 50%), linear-gradient(-45deg, rgba(255,255,255,0) 50%, #ebe4db 50%);
  background-position: top center, top center, bottom center, bottom center;
  background-size: 1.1rem 1.1rem, 1.1rem 1.1rem, 1.1rem 1.1rem, 1.1rem 1.1rem;
  background-repeat: repeat-x;
}
#mint div:after {
  width: 150px;
  height: 164px;
  left: -19px;
  top: -33px;
  background-color: rgba(0,0,0,0.05);
  background-image: linear-gradient(to bottom, rgba(255,255,255,0) 3px, rgba(255,255,255,0.3) 3px, rgba(255,255,255,0.3) 5px, rgba(255,255,255,0) 5px, rgba(255,255,255,0) 7px, rgba(255,255,255,0.3) 7px, rgba(255,255,255,0.3) 9px, rgba(255,255,255,0) 9px), linear-gradient(to top, rgba(255,255,255,0) 3px, rgba(255,255,255,0.3) 3px, rgba(255,255,255,0.3) 5px, rgba(255,255,255,0) 5px, rgba(255,255,255,0) 6px, rgba(255,255,255,0.3) 6px, rgba(255,255,255,0.3) 8px, rgba(255,255,255,0) 8px), linear-gradient(-70deg, rgba(255,255,255,0.3) 35%, rgba(255,255,255,0) 37%), linear-gradient(105deg, rgba(0,0,0,0.05) 0, rgba(0,0,0,0) 25%);
  border-top: 1px solid rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
#moleskine {
  background: #84c3c9;
}
#moleskine div {
  width: 170px;
  height: 250px;
  margin-left: -85px;
  margin-top: -133px;
  background-image: linear-gradient(to bottom, #444 0, #222 100%);
  border-radius: 3px 10px 10px 3px;
  box-shadow: 0 5px 0 white, 0 7px 0 #222, 3px 10px 2px rgba(0,0,0,0.3);
}
#moleskine div:before {
  width: 170px;
  height: 257px;
  background-image: linear-gradient(to right, transparent 130px, #333 130px, #333 140px, transparent 140px), linear-gradient(to bottom, transparent 33%, #ff8613 33%, #ff8613 68%, transparent 68%), linear-gradient(to right, #444 3px, rgba(255,255,255,0.1) 4px, rgba(255,255,255,0) 8px);
}
#moleskine div:after {
  width: 60px;
  height: 40px;
  left: 13px;
  top: 105px;
  background: white;
  background-image: linear-gradient(to right, transparent 29px, #777 29px, #777 31px, transparent 31px);
  border: 2px solid #777;
  box-shadow: -20px 125px 0 -21px #777;
}
#macarons {
  background: #eee;
}
#macarons div {
  width: 110px;
  height: 180px;
  margin-left: -55px;
  margin-top: -90px;
  background-image: linear-gradient(to top, transparent 21px, #7b5354 21px, #7b5354 26px, transparent 26px, transparent 66px, #ffd889 66px, #ffd889 71px, transparent 71px, transparent 110px, #548355 110px, #548355 115px, transparent 115px, transparent 155px, #965537 155px, #965537 160px, transparent 160px);
}
#macarons div:before {
  width: 110px;
  height: 20px;
  bottom: 0;
  border-radius: 6px;
  border-bottom-left-radius: 80px 20px;
  border-bottom-right-radius: 80px 20px;
  background: #fa8780;
  box-shadow: 0 -45px 0 #ffba10, 0 -89px 0 #a8daa9, 0 -134px 0 #d1a574;
}
#macarons div:after {
  width: 110px;
  height: 20px;
  bottom: 25px;
  border-radius: 6px;
  border-top-left-radius: 80px 20px;
  border-top-right-radius: 80px 20px;
  background: #fa8780;
  box-shadow: 0 -44px 0 #ffba10, 0 -89px 0 #a8daa9, 0 -134px 0 #d1a574;
}
#mario-tube {
  background: #8cb4ff;
}
#mario-tube div {
  width: 170px;
  height: 250px;
  margin-left: -85px;
  margin-top: -50px;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 4%, rgba(0,0,0,0) 10%), linear-gradient(-150deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%), linear-gradient(to right, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%);
  border-left: 1px solid #236d22;
}
#mario-tube div:before {
  width: 210px;
  height: 60px;
  margin-left: -20px;
  top: -60px;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0) 1px, rgba(255,255,255,0.3) 2px, rgba(255,255,255,0.3) 3px, rgba(255,255,255,0) 4px), linear-gradient(to top, rgba(0,0,0,0.4) 3px, rgba(255,255,255,0.2) 5px, rgba(255,255,255,0) 6px), linear-gradient(to right, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%);
  border-radius: 5px;
}
#mario-tube div:after {
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, rgba(255,255,255,0) 5%, rgba(255,255,255,0.7) 20%, rgba(255,255,255,0.7) 80%, rgba(255,255,255,0) 95%);
  top: -58px;
  left: 30px;
}
@media (max-width: 400px) {
  #mario-tube div {
    margin-top: -25px;
  }
}
#mario-mushroom {
  background: #74ceff;
}
#mario-mushroom div {
  width: 170px;
  height: 140px;
  margin-left: -85px;
  margin-top: -90px;
  background-image: radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%), linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%), radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%), radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%), radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%), linear-gradient(to bottom, #ef0015 20%, #b2000c 100%);
  border-radius: 140px 140px 80px 80px;
}
#mario-mushroom div:before {
  width: 100px;
  height: 66px;
  left: 35px;
  bottom: -30px;
  background: #f1d38b;
  border-top-right-radius: 180px 100px;
  border-top-left-radius: 180px 100px;
  border-bottom-right-radius: 140px 100px;
  border-bottom-left-radius: 140px 100px;
  border-top: 1px solid #53170f;
  box-shadow: inset 0 15px 10px rgba(0,0,0,0.25), inset -12px -5px 10px rgba(0,0,0,0.2), inset 5px -2px 10px rgba(0,0,0,0.2);
}
#mario-mushroom div:after {
  width: 8px;
  height: 25px;
  top: 120px;
  left: 58px;
  background: rgba(0,0,0,0);
  box-shadow: 8px 0 #312114, 38px 0 #312114;
  border-radius: 40%;
}
#norway {
  background: lightblue;
}
#norway div {
  width: 220px;
  height: 160px;
  margin-left: -110px;
  margin-top: -80px;
  background: #ED2939;
  background-image: linear-gradient(to right, transparent 60px, white 60px, white 100px, transparent 100px);
  box-shadow: 7px 7px 0 rgba(0,0,0,0.1);
}
#norway div:before {
  width: 220px;
  height: 40px;
  margin-top: 60px;
  background-image: linear-gradient(to bottom, white 10px, #002664 10px, #002664 30px, white 30px);
}
#norway div:after {
  width: 20px;
  height: 160px;
  margin-left: 70px;
  background: #002664;
}