* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
  }
  
  ::selection {
    background-color: #656565;
    color: #FDFCFA;
  }
  
  ::placeholder {
    color: #989898;
  }
  
  html {
    font-size: 16px;
  }
  
  body {
    height: 100vh;
    width: 100%;
    display: flex;
  }
  
  nav {
    background: #FDFCFA;
    height: 100%;
    width: 100%;
    max-width: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 6.25rem;
  }
  
  main {
    position: relative;
    background: #FDFCFA;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 7.22rem;
  }
  
  main > h2 {
    font-family: linotype-didot-headline, serif;
    font-weight: 700;
    font-style: normal;
    color: #656565;
    letter-spacing: .15rem;
    word-spacing: .07rem;
    /*        padding-top: 7.85rem;*/
    padding-right: 20%;
    font-size: 1.75;
  }
  
  main > p {
    font-family: 'open sans condensed', sans-serif;
    color: #656565;
    font-size: 1.06rem;
    letter-spacing: .15rem;
    word-spacing: .15rem;
    padding-top: 1rem;
    padding-right: 20%;
  }
  
  .inquire {
    padding-top: 3rem;
  }
  
  form {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: 'open sans condensed', sans-serif;
    color: #656565;
    font-size: 1.06rem;
    letter-spacing: .17rem;
    word-spacing: .15rem;
    padding-right: 20%;
  }
  
  form > label {
    padding-bottom: 1rem;
    width: 100%;
    max-width: 30rem;
  }
  
  form > label > input,
  textarea {
    display: flex;
    font-family: linotype-didot-headline, serif;
    font-weight: 700;
    font-style: normal;
    color: #656565;
    letter-spacing: .1rem;
    word-spacing: .1rem;
    font-size: 1rem;
    font-size: 1.06rem;
    width: 100%;
    max-width: 30rem;
    outline: none;
    border: #656565 solid 1px;
    margin-top: .5rem;
    padding: .25rem;
  }
  
  input[type=text]:focus,
  textarea:focus {
    outline: 1px solid #656565;
    outline-offset: 2px;
    transition: all .2s ease-in-out;
  }
  
  input[type=text]:hover,
  textarea:hover {
    outline: 1px solid #656565;
    outline-offset: 2px;
    transition: all .2s ease-in-out;
  }
  
  textarea {
    height: 7rem;
  }
  
  button {
    border-style: none;
    padding: .5rem 1rem;
    font-family: 'open sans condensed', sans-serif;
    font-weight: 700;
    color: #FDFCFA;
    letter-spacing: .1rem;
    word-spacing: .1rem;
    font-size: 1.1rem;
    background: #656565;
    transition: all .35s ease-in-out;
  }
  
  button:hover {
    color: #656565;
    background: #fdfcfa;
    outline: 1px solid #656565;
    transition: all .15s ease-in-out;
    cursor: pointer;
  }
  
  .photo-toggler > label:hover,
  .about > a:hover,
  .home > a:hover {
    text-decoration: line-through;
  }
  
  .about {
    text-indent: 1rem;
    border-left: 1px #656565 solid;
  }
  
  .photography,
  .videography,
  .webdesign,
  .home {
    padding: 0;
    transition: padding 1s ease;
  }
  
  .photography:hover,
  .videography:hover,
  .webdesign:hover,
  .home:hover {
    /*
outline: 1px #656565 solid;
outline-offset: -1px;
*/
    padding: 0 1rem;
    transition: padding .5s ease;
  }
  
  .inner-photo > li,
  .inner-video > li,
  .inner-web > li {
    padding: 0;
    transition: padding 1s ease;
  }
  
  .inner-photo > li:hover:nth-child(n),
  .inner-video > li:hover,
  .inner-web > li:hover {
    text-decoration: line-through;
    padding: 0 1rem;
    transition: padding .5s ease;
  }
  
  .mob-about {
    text-decoration: line-through;
  }
  
  @media only screen and (max-width: 768px) {
    nav {
      display: none;
    }
    main > h2 {
      padding: 0 1rem;
    }
    main > p,
    form {
      padding: 1rem;
    }
    .inquire {
      padding-top: 1rem
    }
  }
  
  button {
    margin-bottom: 1rem;
  }