* {
  padding: 0;
  margin: 0;
}

body {
  --heading-font-1: 700 5rem century-gothic, sans-serif;
  --heading-font-2: 700 8rem century-gothic, sans-serif;
  --heading-font-contact: 700 4rem century-gothic, sans-serif;

  --nav-links: 400 1.125rem century-gothic, sans-serif;
  --nav-sublinks: 700 1rem century-gothic, sans-serif;

  --paragraph-font: 1rem pt-serif-pro, sans-serif;
  --label-font: 700 1.5rem century-gothic, sans-serif;

  --element-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  
  --body-gap: 15vw;

  --off-white: #E0E0E0;
  --urban-color: #202020;
  --corporate-color: #fff0f0;
  --nature-color: #043927;
  --event-color: #400000;
  --portrait-color: #000040;
  --accent-red: #ff3333;

  background: var(--off-white);
  overscroll-behavior-y: none;
}

.scroll-lock {
  overflow: hidden;
}

#mobile-alert {
  position: absolute;
  top: 0; left: 0;
  z-index: 20;
  width: 100vw;
  height: 100vh;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: black;
  background: white;
  text-align: center;
  padding: var(--body-gap);
}

nav {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  display: flex;
  background: rgba(0,0,0,0.1);
  justify-content: flex-end;
  align-items: center;
  transition: background 500ms;
}

nav:hover {
  background: black;
  transition: background 500ms;
}


#nav-logo {
  position: absolute;
  z-index: 2;
  height: 80px;
  display: flex;
  align-items: center;
  left: var(--body-gap);
  padding: 0;
  margin: 0;
}

#nav-logo img{
  width: auto;
  height: 40px;
}

nav a {
  color: white;
  font: var(--nav-links);
  line-height: 80px;
  padding: 0 2.5vw;
  white-space: nowrap;
  -webkit-transition: 500ms -webkit-filter linear;
}

nav > a:last-child {
  padding-right: var(--body-gap);
}

#nav-portfolio {
  display: flex;
  height: 80px;
  -webkit-transition: 500ms -webkit-filter linear;
}

#nav-portfolio__link {
  height: 100%;
}

#nav-portfolio__sub-links {
  position: absolute;
  z-index: 1;
  background: black;
  top: 60px;
  left: 0;
  width: 100vw;
  height: 60px;
  display: flex;
  justify-content: flex-end;
  visibility: visible;
  opacity: 1;
  transition: all 300ms;
}

#nav-portfolio__sub-links.hidden {
  visibility: hidden;
  opacity: 0;
  transition: all 300ms;
}

#nav-portfolio__sub-links a {
  font: var(--nav-sublinks);
  color: white;
  white-space: nowrap;
  line-height: 60px;
  padding: 0 1.5vw;
  -webkit-transition: 200ms -webkit-filter linear;
}

#nav-portfolio__sub-links a:last-child {
  padding-right: calc(20px + var(--body-gap));
}

nav .fa-external-link-alt {
  position: relative;
  font-size: 0.5rem;
  top: -6px;
  left: 2px;
}

.text-blur {
   filter: blur(1.75px);
}

.sublink.text-blur {
  filter: blur(1.4px);
}

#title-showcase h1 {
  font: var(--heading-font-1);
}

header {
  position: relative;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#page-title {
  font: var(--heading-font-2);
  color: white;
  /* text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191,
        1px 5px 1px #919191,
        1px 6px 1px #919191,
        1px 7px 1px #919191,
        1px 8px 1px #919191,
        1px 9px 1px #919191,
        1px 10px 1px #919191,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4); */
}

.p-img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 65vh;
}

header.p-img {
  height: 100vh;
}

/* GRID */
#main-urban-grid {
  padding: 50px var(--body-gap) 0 var(--body-gap);
  margin-bottom: -100px;
}

.grid-container {
  display: grid;
  grid-gap: 1rem;
}

.grid-container div.test {
  background: black;
  border: 0.5rem solid white;
  box-sizing: border-box;
}

.img-container {
  display: flex;
  min-width: 0;
  min-height: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  border: 0.5rem solid white;
  box-sizing: border-box;
}

.img-container:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.grid-photo {
  object-position: center;
  object-fit: cover;
  width: 100%;
  height: 100%;
}


a {
  color: inherit;
  text-decoration: inherit;
  outline: inherit;
}


/* FOOTER */
footer {
  width: 100%;
  height: 200px;
  font: var(--paragraph-font);
  font-size: 0.8rem;
}

footer .container {
  position: relative;
  padding: 10px var(--body-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer ul {
  list-style: none;
  display: flex;
  margin: 5px 0;
}

footer ul li {
  margin: 0 15px;
  text-decoration: underline;
  color: blue;
}

footer .fa-external-link-alt {
  position: relative;
  font-size: 0.5rem;
  top: -4px;
  left: 1px;
}

#footer-logo {
  height: 100px;
  width: auto;
}


#footer-socials {
  position: absolute;
  bottom: calc(50px + 1rem - 2.5px);
  left: calc(50% + 190px);
  font-size: 2rem;
  display: flex;
  align-items: center;
}

#footer-socials a {
  padding: 5px;
  margin: 0 2.5px;
  border-radius: 50%;
}

.fa-instagram:hover {
  color: #e4405f;
}

.fa-facebook:hover {
  color: #3b5999;
}

.fa-youtube:hover {
  color: #c4302b;
}

#footer-info {
  align-self: flex-start;
}

footer p {
  font-size: 0.5rem;
  margin-left: var(--body-gap);
}


/* CONTACT */
#contact {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(224,224,224,0.25);
  transform: scale(0.9);
  overflow: hidden;
  visibility: visible;
  opacity: 1;
  transition: all 300ms;
}

#contact .fa-envelope {
  color: var(--accent-red);
}

#contact:hover {
  background: var(--off-white);
  transform: scale(1);
  transition: all 300ms;
}

#contact.animate-in {
  opacity: 0;
  transform: translateX(20px);
  transform: translateY(10px);
  transform: scale(0.5);
  
  
  opacity: 1;
  transform: translateX(0);
  transform: translateY(0);
  transform: scale(0.9);
}

#contact .fa-envelope {
  font-size: 3.75rem;
  line-height: 90px;
  padding: 0 25px;
}

#contact__form-container {
  position: absolute;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: transparent;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 300ms;
}

#contact__form-container.form-active {
  background: rgba(0, 0, 0, 0.6);
  visibility: visible;
  transition: all 300ms;
}

#contact__form {
  width: 750px;
  height: 750px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: repeating-linear-gradient(90deg, hsla(263,0%,84%,0.06) 0px, hsla(263,0%,84%,0.06) 1px,transparent 1px, transparent 71px),
              repeating-linear-gradient(135deg, hsla(263,0%,84%,0.06) 0px, hsla(263,0%,84%,0.06) 1px,transparent 1px, transparent 71px),
              repeating-linear-gradient(45deg, hsla(263,0%,84%,0.05) 0px, hsla(263,0%,84%,0.05) 1px,transparent 1px, transparent 36px),
              repeating-linear-gradient(90deg, hsla(263,0%,84%,0.05) 0px, hsla(263,0%,84%,0.05) 1px,transparent 1px, transparent 36px),
              repeating-linear-gradient(45deg, hsla(263,0%,84%,0.05) 0px, hsla(263,0%,84%,0.05) 1px,transparent 1px, transparent 16px),
              repeating-linear-gradient(135deg, hsla(263,0%,84%,0.05) 0px, hsla(263,0%,84%,0.05) 1px,transparent 1px, transparent 16px),
              linear-gradient(90deg, hsl(72,13%,7%),hsl(72,13%,7%));
  border: 2px solid black;
  border-radius: 5px;
  transform: scale(0.9);
  visibility: hidden;

}

#contact__form.form-active {
  transform: scale(1);
  visibility: visible;
  transition: all 300ms;
}

#contact__form a {
  align-self: flex-end;
  margin: -1rem -1rem 0 0;
  border-radius: 50%;
}

.fa-times-circle {
  color: black;
  background: white;
  font-size: 2rem;
  border: 2px solid white;
  border-radius: 50%;
}

#contact__form h1 {
  padding: 10px 0;
  font: var(--heading-font-contact);
  color: white;
}

#contact__form > div {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  width: 600px;
}

#contact__form label {
  font: var(--label-font);
}

#contact__form input, #contact__form textarea {
  font: var(--paragraph-font);
  height: 30px;
  padding: 0 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  
}

#contact__form textarea {
  height: 180px;
  border: none;
  padding-top: 5px;
}

#btnSend {
  background: none;
  outline: none;
  border: 3px solid white;
  font: 400 2rem century-gothic, sans-serif;
  font-size: 2rem;
  color: white;
  padding: 10px 30px;
  margin-top: 40px;
  transition: all 300ms;
  cursor: pointer;
}

#btnSend:hover {
  color: var(--accent-red);
  background: white;
}


@media only screen and (max-width: 1560px) {
  body {
    --heading-font-1: 700 4rem century-gothic, sans-serif;
    --heading-font-2: 700 7rem century-gothic, sans-serif;
    --heading-font-contact: 700 2.5rem century-gothic, sans-serif;
    --label-font: 700 1.25rem century-gothic, sans-serif;

    --body-gap: 5vw;
    /* --paragraph-font: 1rem pt-serif-pro, sans-serif; */

    --nav-links: 400 1.125rem century-gothic, sans-serif;
    --nav-sublinks: 700 1rem century-gothic, sans-serif;

  }

  #contact__form {
    width: 600px;
    height: 600px;
  }

  #contact__form > div {
    width: 500px;
  }

  #contact__form input, #contact__form textarea {
    margin-bottom: 10px;
  }

  #btnSend {
    font-size: 1.25rem;
    margin-top: 10px;
  }
}

@media only screen and (max-width: 900px) {
  #mobile-alert {
    display: flex;
  }
}