/* 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-details.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;
  }

  h4 {
    font-weight: 500;
    font-size: 1em; 
  }

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

  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 13em;
    display: block;
  }

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

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

  .homebutton{
    padding: 0.75em 1em;
   }

/* Header */
  #titles {
    text-align: center;
    margin: 6em 0 0;
  }

/* Content */
  #projectInfo {
    justify-content: center;
    align-items: center;
    margin: 5em 20vw;
  }

  #thumbnail {
    width: 40%;
  }

  #description {
    padding: 2em;
  }

  #gallery {
    margin: 0 15vw 3em;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  #gallery img {
    object-fit: contain;
    padding: 1em 0;
    max-width: 100%;
    max-height: 40vw;
  }

/* Button */
  .viewmore {
    text-transform: uppercase;
    padding: 0.75em 22%;
    margin: 0 22.5%;
  }

/* 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;
  }


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

}

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

  .nav {
    padding: 2em 4%;
  }
  
}

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

  .nav {
    padding: 2em 4%;
  }

  .homepage {
    display: none;
  }

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

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

  .footerlinks{
    padding: 6em 5%;
  }

  #projectInfo {
    justify-content: center;
    align-items: center;
    margin: 5em 2vw;
  }

}