/* Box sizing rules */
* {
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: inherit;
}

/* Remove margin and padding from elements */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
dd,
figure,
figcaption,
dl,
dd,
dt {
  margin: 0px;
  padding: 0px;
}



h1, h2, h3, h4, h5, h6
{

  font-family: 'Montserrat', sans-serif;
  letter-spacing: .5rem;
  margin-bottom: .5em;
}

h1
{
  font-size: 3em;
  text-align: center;
  text-transform: uppercase;

}

p
{
  margin-bottom: .5em;

}

body {
  font-family: 'Lato', sans-serif;
  /* Hide persistent scrollbar in IE (10/11) and Edge */
  -ms-overflow-style: -ms-autohiding-scrollbar;

  /* Anchor links will transition rather than skip */
  scroll-behavior: smooth;

  /* Reset font size to 1rem, in case it has a pixel value */
  font-size: 1.4rem;


  background-color: #1d1e22;
  color: white;
  min-height: 100vh;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
  text-decoration-skip-ink: auto;
  cursor: pointer;
}

a
{
  text-decoration: underline;
}

button {
    text-align: center;
    border: 0;
    padding: 1rem 2rem;
    margin: 0 auto;
    display: block;
    font-size: 1rem;
    color: black;
    background: white;
    border-radius: 2px;
}

/* Turn off the recent search in WebKit. */
::-webkit-search-decoration {
  display: none;
}

/* Normalise form field line-height in WebKit */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
  line-height: normal;
}

/* Make a search box appear like a text box */
input[type='search'] {
  -webkit-appearance: textfield;
}

/* Make images responsive */
img {
  max-width: 100%;
}

/* Remove _all_ animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) 
{
  * {
    -webkit-animation: none !important;
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}






a
{
  color: white;
}


%header-footer-background-color {
  background-color: rgba(0, 0, 0, .3);
}


footer
{
  @extend %header-footer-background-color;
} 




wrapper
{
  display:grid;
  grid-template-rows: auto .1rem auto;
  grid-auto-rows: auto;
  max-width: 100vw;
  overflow: hidden;

}

main
{
  grid-column: 1 / -1;
  grid-row: 2 / span 2;
  max-width: 100vw;
  overflowx: hidden;
}


header
{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;

  grid-column: 1 / -1;
  grid-row: 1 / span 2;



  nav
  {
    // @extend %header-footer-background-color;
    display: flex;
    justify-self: stretch;
    padding-bottom: 5rem;

    background: 
      linear-gradient(
        to top,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.35)
      );

    background: 
      linear-gradient(
        to top, 
        rgba(0, 0, 0, 0),
        rgba(0,0,0,.35) 72%,
        rgba(0,0,0,.35) 100%);




    ul
    {
      display:flex;
      flex-wrap: wrap;
      list-style:none;
      width: 100%;



      li
      {
        display: flex;
        margin: 1rem 0rem;

        span
        {
          font-size: 60%;
          font-family: "Lato";
        }

        &:first-of-type 
        {
          margin-right: auto;
          font-size: 200%;

          img
          {
            max-height: 4rem;
            width: auto;
          }
        }

        a
        {
          display: flex;
          align-self: stretch;
          align-items: center;
          text-decoration: none;
          text-transform: uppercase;
          padding: 0 2rem;
          letter-spacing: 3px;
          transition: 
            background .4s, 
            color .4s;
          border-radius: 2px;

          &:hover:not(.logo)
          {
            background: white;
            color: black;
          }

          &.logo
          {
            flex-direction: column;
            align-items: flex-start;
            letter-spacing: 0px;
            font-family: "Montserrat", arial;
            padding: 0 0 0 1rem;

          }

        }
      }
    }
  }

  .hero, nav
  {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }
  nav
  {
    grid-row: 1 / span 1;
  }


  section.hero
  {
    height: 100vh;
    overflow: hidden;
    z-index: -1;

    img{
      min-height: 100vh;
      min-width: 100vw;
      object-fit: cover;
    }
  }
}



.intro
{
  text-align: center;
  background-color: pink;
  padding: 8rem 4rem;
  color: black;
  background: white;
  transform: 
    rotateZ(.0035turn)
    translateX(-55%);


  width: 110vw;
  margin-left: 55vw;
  overflow: hidden;



  h1, p
  {
    transform: rotateZ(-.0035turn);
  }
}


.portfolio
{
  padding: 3rem;


  ol
  {
    display:flex;
    flex-wrap:wrap;
    margin-bottom: 3rem;

    li
    {
      flex-basis: 400px;
      flex-grow: 2;

      max-width: 800px;

      display: grid;
      grid-template-column: 1fr;
      grid-template-row: 1fr;

      div, img
      {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
      }
      
      h1
      {
        font-size: 2rem;
        text-align: left;
        padding: 0;
        margin: 0;
        line-height: 2rem;
      }
    

      div
      {
        align-self: end;
      }
      
     
      
      img
      {
        z-index: -1;
        object-fit: cover;
        height: auto;
        width: 100%;
        max-height: 400px;
      }
    }
  }
}


button
{
  text-align: center;
  border: 0;
  
}