/* styling of basic components */
html { 
  background: url("https://media2.giphy.com/media/U3qYN8S0j3bpK/giphy.webp?cid=790b76119b80dadec7df9030ec6f4f38fc34b2e41e469c0a&rid=giphy.webp");}
body { 
margin:0;}
div {
  overflow: hidden;
  box-sizing: border-box;}
a { 
  text-decoration:none;
  text-transform:none;
  color:black;}
p { 
    border: solid black 2px;
    max-width:75px;
    padding:3px;}
blockquote {
      width: 500px;
      font: 3.65em CallunaRegular;
      letter-spacing: .075em;
      float:auto;
      padding: 0;
      margin: 0;}
blockquote:first-line {
          font: 1.45em "Sketch Block";}
blockquote:first-letter {
          font-size: 2.2em;
          text-transform: lowercase;
          float: left;
          line-height: 0.52em;
          margin-right: -20px;
          position: relative;}
 
/* classes in order from back to front */
.container {
  display: flex;
  /* background of webpage */
  justify-content:center;
  padding-top: 85px;}
.base {
  background-color: #e7e2e2;
  display: flex;
  height:90vh;
  width:700px;
  justify-content:center;
  align-items:center;}
.child { 
  background-color: #858080;
  display:flex;
  justify-content: center;
  align-items:center;
  height:80vh;
  width:600px;
  border:groove 3px;}
.gamecontainer {
  background-color: #379c64;
  display:flex;
  justify-content: center;
  height:70vh;
  border: inset 3px;
  text-align:center;}
.screen { 
  background-color: #84b378;
  display:flex;
  justify-content: center;
  align-items:center;
  height:500px;
  width:500px;
  border:groove 3px;
  flex-direction:column;}
.box {
      width: 350px;
      margin: 0px auto;
      position: relative;
      display:flex;
      flex-direction:column;}
.subbox { 
      width: 350px;
      margin: 10px auto;
      position: relative;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      align-content:center;}
.subbox2 { 
        width: 100%;
        margin: 10px auto;
        position: relative;
        display:flex;
        justify-content:center;
        flex-flow: column;
        text-align:center;
        align-items:center;}

/* now onto the ids */

#curvedtopbordersonly { 
  border-top-left-radius:8px;
  border-top-right-radius:8px;}         

/*interactions*/
p:hover {
            background-color:#8178b3;}

@font-face {
              font-family: 'Sketch Block';
              src: url('http://tangledindesign.com/codepen/fonts/sketch_block-webfont.eot');
              src: url('http://tangledindesign.com/codepen/fonts/sketch_block-webfont.eot?#iefix') format('embedded-opentype'),
                   url('http://tangledindesign.com/codepen/fonts/sketch_block-webfont.woff') format('woff'),
                   url('http://tangledindesign.com/codepen/fonts/sketch_block-webfont.ttf') format('truetype'),
                   url('http://tangledindesign.com/codepen/fonts/sketch_block-webfont.svg#SketchBlockBold') format('svg');}
@font-face {
              font-family: 'Museo 700';
              src: url('http://tangledindesign.com/codepen/fonts/Museo700-Regular-webfont.eot');
              src: url('http://tangledindesign.com/codepen/fonts/Museo700-Regular-webfont.eot?#iefix') format('embedded-opentype'),
                   url('http://tangledindesign.com/codepen/fonts/Museo700-Regular-webfont.woff') format('woff'),
                   url('http://tangledindesign.com/codepen/fonts/Museo700-Regular-webfont.ttf') format('truetype'),
                   url('http://tangledindesign.com/codepen/fonts/Museo700-Regular-webfont.svg#SketchBlockBold') format('svg');}
@font-face {
              font-family: 'CallunaRegular';
              src: url('http://tangledindesign.com/codepen/fonts/Calluna-Regular-webfont.eot');
              src: url('http://tangledindesign.com/codepen/fonts/Calluna-Regular-webfont.eot?#iefix') format('embedded-opentype'),
                   url('http://tangledindesign.com/codepen/fonts/Calluna-Regular-webfont.woff') format('woff'),
                   url('http://tangledindesign.com/codepen/fonts/Calluna-Regular-webfont.ttf') format('truetype'),
                   url('http://tangledindesign.com/codepen/fonts/Calluna-Regular-webfont.svg#CallunaRegular') format('svg');}