/* basic elements */
* { padding: 0; 
    margin: 0; }
  html { 
    background: url("https://media2.giphy.com/media/U3qYN8S0j3bpK/giphy.webp?cid=790b76119b80dadec7df9030ec6f4f38fc34b2e41e469c0a&rid=giphy.webp"); } 
  div {
    overflow: hidden;
    box-sizing: border-box;}
  p { 
        border: solid black 2px;
        width:100px;
        padding:3px;}
  a { 
    text-decoration:none;
    text-transform:none;
    color:black;}
  
  blockquote {
        width: 500px;
        font: 3.65em CallunaRegular;
        letter-spacing: .075em;
        float:auto;
        padding: 0;
        margin: 0;}
  blockquote:first-line {
            font: 1.85em "Sketch Block";}
  blockquote:first-letter {
            font-size: 2.9em;
            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;
    flex-direction:column;}
  .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;
        align-items:flex-start;}
  .subbox { 
        width: 400px;
        margin: 10px auto;
        height:70%;
        position: relative;
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-content:center;}
  .subbox2 { 
          width: 100px;
          margin: 10px auto;
          position: relative;
          display:flex;
          justify-content:center;}
  
  /*interactions*/
  p:hover {
    background-color:#8178b3;}
  
  /* now onto the ids */
  #curvedbottomrightborder {
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    border-bottom-left-radius:8px;
    border-bottom-right-radius: 40px;}
  #curvedtopbordersonly { 
    border-top-left-radius:8px;
    border-top-right-radius:8px;}
  #instructions { 
    background-color: #c9769f;}
  /* font styles */
  @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');}