/* CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}

@font-face {
    font-family: tirto-writter;
    src: url(assets/tirtowritterregular-eajrl.ttf);
}

/* Basic Set Up */
  html {
    font-size: 16px;
    overflow-x: hidden;
    scroll-behavior: smooth;
  }

  body {
    background-image: url(assets/background.jpg);
    background-size: contain;
    color: black;
    font-family: "sofia-pro-soft", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  h1 {
    font-family: "tirto-writter", serif;
    font-weight: 1000;
    font-size: 3em;
    padding: 0.25em;
    text-transform: uppercase;
  }

  h2 {
    font-weight: 500;
    font-size: 2.5em;    
    text-transform: uppercase;
    margin: 0.5em 0;
  }

  h3 {
    font-weight: 500;
    font-size: 1.55em;    
    margin: 0.25em;
    text-transform: uppercase;
  }

  p {
    font-weight: 500;
    font-size: 1em;
    line-height: 1.25em;
  }

  a {
    text-decoration: none;
    color: #000000;
  }

  a:hover {
    color: #1e1e1e;
  }

  /* Buttons Set Up*/
    button {
      position: relative;
      display: inline-block;
      margin: 0 0.5em;
      vertical-align: middle;
      font-family: inherit;
      font-size: 1em;
      color: black;
      padding: 0.75em 2em;
      background: #e9e9e9;
      border: 2px solid black;
      border-radius: 0.75em;
      transform-style: preserve-3d;
      transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
    }

    button::before {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #c7c7c7;
      border-radius: inherit;
      box-shadow: 0 0 0 2px black, 0 0.625em 0 0 #9f9f9f74;
      transform: translate3d(0, 0.75em, -1em);
      transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
    }

    button:hover {
      background: #e0e0e0;
      transform: translate(0, 0.25em);
    }

    button:hover::before {
      box-shadow: 0 0 0 2px black, 0 0.5em 0 0 #9f9f9f74;
      transform: translate3d(0, 0.5em, -1em);
    }

    button:active {
      background: #c1c1c1;
      transform: translate(0em, 0.75em);
    }

    button:active::before {
      box-shadow: 0 0 0 2px black, 0 0 #9f9f9f74;
      transform: translate3d(0, 0, -1em);
  }

/* Navigation */
  .nav {
    padding: 2em 10em;
    display: block;
  }

  .nav :first-child {
    float: left;
  }

  .nav :last-child{
    float: right;
  }

  .homebutton{
    padding: 0.75em 1em;
   }

/* Heading */
  .header {
    margin: 18em 0 0;
    text-align: center;
    align-items: center;
    display: block;
  }

  .title {
    width: 60em;
  }

  .homepage {
    display: contents;
  }

  /* Hides mobile heading */
  .titlemobile {
    width: 80%;
    display: none;
  }

/* Bookshelf */
  .bookshelf { /* change 80px to the sum of bookshelf height and any additional space */
    height: 57.5vw;
    width: 200%;
    left: -23%;
    position: relative;
    background-image: url(assets/homebackground.png);
    background-size: contain;
    background-size: 60%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .etchasketch {
    width: 8vw;
    position: absolute;
    top: 52vw;
    left: 40%;
    cursor: pointer;
  }

  .rockpaperscissors {
    width: 7vw;
    position: absolute;
    top: 31.25vw;
    left: 34%;
    cursor: pointer;
  }

  .harrypotter {
    position: absolute;
    top: 28.5vw;
    left: 17.25%;
    cursor: pointer;
  }

  .harrypotter img {
    width: 4vw;
  }
  
/* About Section */
  .about{
    display: flex;
    margin: -3% 20% 0;
  }

  .about img {
    padding: 0 3%;
    width: 28%;
    height: 43%;
  }

  .abouttext {
    padding: 1% 2% 0;
  }

  .skills {
    text-align: center;
    padding: 4em 0 0;
  }

  .skills img{
    width: 3em;
    padding: 2em 2em;
  }

  .resume {
    text-align: center;
    display: block;
    margin: 1em;
  }

  .resume button{
    text-align: center;
    padding: 0.75em 15em;
  }

/* Contact */
  .contact {
    margin: 6% 25% 0;
    text-align: center;
    padding: 3em;
    border: 0.25em solid black;
  }

  .contact h2 {
    padding: 1em 0;
  }

  .contact input, select, textarea {
    color: #5A5A5A;
    font: inherit;
    margin: 0;
  }

  input {
    line-height: normal;
  }

  textarea {
    overflow: auto;
  }

  .underline {
    border-bottom: solid 0.25em #474544;
    margin: -0.512em auto;
    width: 80px;
  }

  .icon_wrapper {
    margin: 50px auto 0;
    width: 100%;
  }

  .icon {
    display: block;
    fill: #474544;
    height: 50px;
    margin: 0 auto;
    width: 50px;
  }

  .email {
      float: right;
      width: 45%;
  }

  input[type='text'], [type='email'], [type='tel'], select, textarea {
      background: none;
      border: none;
      border-bottom: solid 2px #474544;
      color: #757575;
      font-size: 1.000em;
      font-weight: 400;
      letter-spacing: 1px;
      margin: 0em 0 1.875em 0;
      padding: 0 0 0.875em 0;
      width: 100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      -o-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
  }

  input[type='text']:focus, [type='email']:focus, [type='tel'], textarea:focus {
      outline: none;
      padding: 0 0 0.875em 0;
  }

  .message {
      float: none;
  }

  .name {
      float: left;
      width: 45%;
  }

  .subject {
    width: 100%;
    padding: 1.75em 0 0;
  }

  .telephone {
    width: 100%;
  }

  textarea {
      line-height: 150%;
      height: 150px;
      resize: none;
      width: 100%;
  }

  .formbutton {
    padding: 0.75em 15vw;
    margin: 2em 0;
  }

  /* pop up */

  #contactcontent {
    display: contents;
  }

  #popup {
    display: none;
  }

  #popup button {
    padding: 0.75em 15em;
    margin: 0 0 2em 0;
  }

/* Footer */
  footer {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 0 0 1em 0;
  }

  .footerlinks{
    padding: 4em;
  }

  .footerlinks:hover{
    animation: sh0 0.5s ease-in-out both;
  }

  @keyframes sh0 {
    0% {
      transform: rotate(0deg) translate3d(0, 0, 0);
    }

    25% {
      transform: rotate(7deg) translate3d(0, 0, 0);
    }

    50% {
      transform: rotate(-7deg) translate3d(0, 0, 0);
    }

    75% {
      transform: rotate(1deg) translate3d(0, 0, 0);
    }

    100% {
      transform: rotate(0deg) translate3d(0, 0, 0);
    }
  }

/* Responsive */
  @media only screen and (max-width: 1200px) {
    html {
      font-size: 14px;
    }

    /* Bookshelf */
      .bookshelf {
        background-size: 100%;
        width: 100%;
        left: 0;
      }

      .etchasketch {
        top: 43vw;
        left: 66%;
      }
    
      .rockpaperscissors {
        top: 25.6vw;
        left: 55.5%;
      }

      .harrypotter {
        top: 23.5vw;
        left: 28.5%;
      }
      .harrypotter img {
        width: 3.5vw;
      }
    
      .card {
        width: 9vw;
        height: 14.5vw;
        top: 21.5vw;
        left: 50%;
        gap: 3px;
      }

      .card p {
        font-size: 0.5vw;
      }

    /* About */
      .about {
        margin: -3% 11.5% 0;
      }

  }

  @media only screen and (max-width: 1007px) {
    html {
      font-size: 14px;
    }

    /* Header */
      .header {
        margin: 10em 0 3em;
      }

      .title {
        display: none;
      }
      
      .titlemobile {
        display:inline-block;
      }

    .nav {
      padding: 2em 4%;
    }

    /* About */
      .about {
        margin: -3% 6% 0;
      }

    /* Contact */
      .contact {
        margin: 10% 10% 0;
      }

  }

  @media only screen and (max-width: 641px) {
    html {
      font-size: 12px;
    }

    .nav {
      padding: 2em 4%;
    }
  
    .nav :first-child {
      float: left;
    }
  
    .nav :last-child{
      float: right;
    }

    .about {
      display: block;
      text-align: center;
    }

    .about img {
      width: 38%;
      height: 46%;
    }

    .footerlinks{
      padding: 6em 5%;
    }

    .homepage {
      display: none;
    }

    .etchasketch {
      top: 42.25vw;
      left: 66%;
    }
  
    .rockpaperscissors {
      top: 25.45vw;
      left: 55.5%;
    }
  
    .card {
      top: 21vw;
      left: 50%;
      gap: 1px;
    }

    .resume button{
      text-align: center;
      padding: 0.75em 10em;
    }
  }