html {
  box-sizing: border-box;
  overflow: hidden;
}

*, *::before, *::after {
  box-sizing: inherit;
  @-moz-viewport { width: device-width; scale: 1; }
  @-ms-viewport { width: device-width; scale: 1; }
  @-o-viewport { width: device-width; scale: 1; }
  @-webkit-viewport { width: device-width; scale: 1; }
  @viewport { width: device-width; scale: 1; }
}

body {
  height: 100vh;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-perspective: 1px;
  perspective: 1px;
  font-family: "Amatic SC", cursive;
  font-family: Nunito, sans-serif;
}

h2 {
  font-family: "Amatic SC", cursive;
  font-size: 2.25rem;
}

.nav li,
.btn {
  font-family: "Amatic SC", cursive;
  font-size: 1.5rem;
}

.skip-links {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.skip-links a {
  position: absolute;
  top: -3em;
  background-color: #000;
  color: #fff;
  padding: .75em;
  font-weight: bold;
}

.skip-links a:focus {
  top: 0;
  z-index: 2;
}

main {
  padding-left: 2rem;
  padding-right: 2rem;
}

ul {
  padding: 0;
}

.parallax-group {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.back {
  -webkit-transform: translateZ(-1px) scale(3);
  transform: translateZ(-1px) scale(3);
  position: relative;
  top: -1vh;
}

.front {
  background-color: #f2f2f2;
  padding: 1em 2.5em 5em;
}

.cropped {

  overflow: hidden;
}

.cropped img {
  margin-top: -5em;
}

.banner {
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  background-color: white;
  padding-top: 1em;
}

h1 {
  margin-bottom: 0;
  font-family: "Amatic SC", cursive;
  font-size: 3.375rem;
}

p {
  margin-top: 0;
}

nav {
  background-color: #fff;
  width: 100%;
}

.nav {
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  background-color: #f9f9f9;
}

.nav-check {
  position: absolute;
  top: -3em;
}

.nav-check:checked ~ .nav {
  display: block;
}

.nav-label {
  cursor: pointer;
  font-size: 1.25rem;
  width: 40px;
  display: inline-block;
  position: absolute;
  z-index: 5;
  right: 3px;
  top: 10px;
}

.nav-open,
.nav-closed {
  display: block;
  width: 100%;
}

.nav-close {
  display: none;
}

.nav-check:checked ~ .nav-label .nav-open {
  display: none;
}

.nav-check:checked ~ .nav-label .nav-close {
  display: block;
}

.sizing {
  margin-top: 300px;
}

.style {
  background: white;
  text-align: center;
}

nav li {
  border-bottom: 3px solid black;
  font-size: 1em;
  width: 100%;
  list-style-type: none;
  text-align: center;
}

.btn:hover {
  background-color: grey;
}

a {
  text-decoration: none;
  color: black;
}

nav a {
  width: 100%;
  display: block;
}

.btn {
  padding: 1rem;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 3px;
}

.center {
  text-align: center;
  padding-top: 1em;
}

.grid-large {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1rem;
  grid-gap: 2rem;
}

.grid-small {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 60px auto auto;
  row-gap: 1rem;
}

article p {
  margin-top: 1em;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.about {
  width: 100%;
  margin-top: 1rem;
  padding-left: 1em;
  padding-right: 1em;
}

.section {
  width: 100%;
}

.section p {
  margin-top: 10em;
}

.section h2 {
  margin-top: 2em;
}

.text-block {
  gap: 1rem;
}

img {
  width: 100%;
  display: block;
}

.icon {
  max-width: 50px;
  place-self: center;
}

.grid-foot {
  z-index: 6;
  display: grid;
  grid-template-areas: "mail instagram";
  margin: 60px 10px;
}

.mail {
  grid-area: mail;
}

.instagram {
  grid-area: instagram;
}

.logo {
  top: 10px;
  left: 5px;
}

.logo-sized {
  width: 40px;
  height: 150px;
  z-index: 5;
  position: absolute;
  margin: 10px 20px;
}

.title {
  padding-left: 30px;
}

.button {
  text-decoration: none;
}

.popup {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 200%;
  background-color: rgba(0, 0, 0, .6);
  display: none;
  padding: 90px;
}

#img-popup-gd-main .popup-content {
  position: relative;
  border: 5px solid #fff;
}

.popup-content {
  position: relative;
}

.close {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #222;
  border-radius: 50%;
  border: 3px solid #fff;
  color: #fff;
  text-decoration: none;
  line-height: 0;
  padding: 9px 0 11px;
  width: 25px;
  text-align: center;
}

.popup:target {
  display: block;
}

.popup:target > body {
  height: 100vh;
  overflow-y: hidden;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  font-size: 2rem;
}

.bottom {
  bottom: 0;
}

.relative:hover > .absolute {
  display: block;
}

.relative:hover {
  opacity: .35;
}

@media only screen and (min-width: 23em) {

  .title {
    padding-left: 0;
  }

}

@media only screen and (min-width: 28em) {

  .logo-sized {
    width: 100px;
  }

}

@media only screen and (min-width: 34em) {

  .grid-small {
    grid-template-rows: 95px auto auto;
  }

  .style {
    width: 100%;
  }

  .nav-label {
    display: none;
  }

  .section {
    width: 50%;
    padding-left: .5em;
    padding-right: .5em;
    align-items: stretch;
  }

  .banner {
    top: 4em;
    padding: 0;
    height: 500px;
  }

}

@media only screen and (min-width: 43.75em) {

  .nav {
    display: flex;
    justify-content: space-around;
    margin: 0 2rem;
    padding: 0 0 0 2rem;
    background-color: #f9f9f9;
  }

  .logo {
    top: 72px;
    left: 5px;
  }

  .front {
    margin: 0 3.5rem;
  }

}

@media only screen and (min-width: 45em) {

  .grid-small {
    grid-template-rows: 80px auto auto;
  }

}

@media only screen and (min-width: 50em) {

  .cropped img {
    margin-top: -17em;
  }

}

@media only screen and (min-width: 60em) {

  .cropped img {
    margin-top: -30em;
  }

  .grid-large {
    column-gap: 5rem;
    padding: 2rem 5rem;
    grid-template-columns: 1fr 1fr;
  }

  .about {
    padding: 0 5rem;
  }

  .front {
    margin: 0;
  }

}