gameboy 0.1.5

/* 
 * The original structure of the gameboy was retired
 * from Daniel Snows Gameboy codepen
 * https://codepen.io/daniel-snows/pen/ExYvvBG 
 */

/* COLORS */
:root {
 --pink: #F38BA3;
 --blue: #F38BA3;
 --stroke: navy; 
 --green: #C2E688;
 --red: #8bf3db;
 --light-brow: #8bf3db;
 --gray: #8bf3db;
 --fonts-regular:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

/* RESET */
* { box-sizing: border-box; }
html, body { 
  min-height: 100vh; margin: 0;   
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  font-family: var(--fonts-regular);
}
button {outline:0 !important; cursor: 
 pointer;}
button:focus {
box-shadow: inset 0 0 !important;
}

body {
 background-color: #F9F4DA;
}
.theater {
  position: absolute;
  top: 0;
  width: 100%;
  background-color: #8bf3db;
  height: 300px;
  z-index: 0;
}

a, button, input {
  text-decoration: none;
  font-weight: thin;
  color: #FFF;
  padding: 5px 10px;
  border-radius: 5px;
  background: #F38BA3;
  cursor: pointer;
  text-shadow: none;
  border: none;
}

button:disabled,
button[disabled] {
  opacity: 0.5;
  cursor: default;
}

a:hover {
  color: #F38BA3;
  background: #F9F4DA;
}

.container {
  margin: auto;
  width: 50%;
  position: relative;
  z-index: 1;
}

.helper {
  position: absolute;
  right:0;
  top:0;
  text-align: right;
  padding: 0 30px 0 0;
}

.menu {
  position: absolute;
  left:0;
  top:0;
  text-align: left;
  padding: 0 0 0 30px;
}

.gameboy {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gameboy-body {
 background-color: var(--blue);
 background-image: url("/images/noise-light.png");
 width: 320px;
 height: 590px;
 border-radius: 20px 20px 50px;
 border: 10px solid var(--stroke);
 box-shadow: inset 10px 0 rgba(255,255,255,0.7), inset -10px 0 rgba(0,0,0,0.2) ;
 position: relative;
/*  display: flex; */
}
header {
 width: 100%;
 height: 36px;
 border-bottom: 6px solid var(--stroke); 
/*  display: block; */
 position: relative;
 box-shadow: 0 6px rgba(0,0,0,0.2) ;
}
header:after, header:before {
 content: "";
 height: 100%;
 width: 6px;
 background-color: var(--stroke);
 position: absolute;
}
header:before {left: 30px;}
header:after {right: 30px;}

.screen {
 width: 246px;
/*  height: 280px; */
 background-color: var(--light-brow);
 margin: 30px 0 0 30px;
border: 6px solid var(--stroke);
 padding: 30px;
 border-radius: 10px 10px 30px;
 position: relative;
}
.screen .glass {
 width: 100%;
 height: 160px;
 background-color: var(--green);
 border: 6px solid var(--stroke);
 box-shadow: inset 6px 6px rgba(0,0,0,0.2);
 overflow: hidden;
 position: relative;
}
.glass:after, .glass:before {
 content: "";
 height: 200%;
 width: 30px;
 background-color: rgba(255,255,255,0.4);
 position: absolute;
 transform: rotate(45deg);
 top: -80px;
}
.glass:after {right: -20px; width: 50px !important;}
.screen span {
 width: 10px;
 height: 10px;
 background-color: var(--red);
 position: absolute;
 left: 10px;
 border-radius: 50%;
 border: 2px solid var(--stroke);
 top:50%;
 margin-top: -10px;
}
.screen:after, .screen:before {
 content:"";
 height: 3px;
 position: absolute;
 top: 12px;
 background-color: var(--stroke); 
}
.screen:before {
 width: 100px;
 left: 10px;
}
.screen:after {
 width: 30px;
 right: 10px;
}

.actions {
/*  display: flex; */
 padding: 30px 14px 0;
}
.directions {
width: 120px;
height: 120px;
 border: 6px solid transparent;
 position: relative;
 display: flex;
 float: left;
}
.directions button {
 border: 6px solid var(--stroke);
 background-color:var(--light-brow);
 width: 30px;
 height: 30px;
 position: absolute;
 z-index: 9;
}
.arrow-left {
 border-right: none !important;
 box-shadow: inset 0 4px #fff, inset 0 -4px rgba(0,0,0,0.2);
 top: 50%;
 margin-top: -15px;
 left: 13.5px;
}
.arrow-top {
 border-bottom: none !important;
 box-shadow: inset 0 4px #fff;
 left: 50%;
 margin-left: -15px;
 top: 13.5px;
}
.arrow-right {
 border-left: none !important;
 box-shadow: inset 0 4px #fff, inset 0 -4px rgba(0,0,0,0.2);
 top: 50%;
 margin-top: -15px;
 right: 13.5px;
}
.arrow-bottom {
 border-top: none !important;
 box-shadow: inset 0 -4px rgba(0,0,0,0.2);
 left: 50%;
 margin-left: -15px;
 bottom: 13.5px;
}

.directions:after {
 content: "";
 width: 30px;
 height: 30px;
 background-color: var(--light-brow);
 position: relative;
 top: 50%;
 left: 50%;
 margin: -15px;
 z-index: 1;
}
.buttons {
 border: 6px solid transparent;
 float: right;
 position: relative;
 transform: rotate(-20deg);
 top: 30px;
}
.buttons button {
 background-color: var(--red);
 border: 6px solid var(--stroke);
 border-radius: 50%;
 width: 50px;
 height: 50px;
 padding: 0;
 box-shadow: inset 4px 0 rgba(255,255,255,0.7), inset -4px 0 rgba(0,0,0,0.2) ;
 margin: 0 5px;
}
.start-reset  {
 list-style: none;
 text-align: center;
 width: 100%;
 float: left;
}
.start-reset li {
 display: inline-block;
 margin: 0 15px;
 
}
.start-reset li button {
 border: 6px solid var(--stroke);
 background-color:var(--light-brow);
 width: 20px;
 height: 50px;
 padding: 0;
 border-radius: 10px;
 box-shadow: inset 3px 0 #fff, 3px 0 rgba(0,0,0,0.2);
 transform: rotate(60deg);
 position: relative;
 left: -25px;
 top: -10px;
}
.points {
 text-align: center;
 position: absolute;
 right: 20px;
 bottom: 20px;
}
.points span {
 font-size: 25px;
 line-height: 0px;
 letter-spacing: 3px;
 margin-top: -3px;
 display: block;
 color: var(--stroke); 
}


@media only screen and (max-width: 780px) {
  .helper, .menu {
    display: none;
  }
}