.mb-sm {
  margin-bottom: 1rem;
}

.mb-md {
  margin-bottom: 3rem;
}

.mb-lg {
  margin-bottom: 5rem;
}

.mb-hg {
  margin-bottom: 8rem;
}

.mt-sm {
  margin-top: 1rem;
}

.mt-md {
  margin-top: 3rem;
}

.mt-lg {
  margin-top: 5rem;
}

.mt-hg {
  margin-top: 8rem;
}

.break--5 {
  width: 15rem;
}

.header-section {
  text-align: center;
  font-family: inherit;
  width: 100%;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(20%, transparent), color-stop(rgba(14, 17, 17, 0.9)), color-stop(80%, transparent));
  background-image: -webkit-linear-gradient(left, transparent 20%, rgba(14, 17, 17, 0.9), transparent 80%);
  background-image: -o-linear-gradient(left, transparent 20%, rgba(14, 17, 17, 0.9), transparent 80%);
  background-image: linear-gradient(to right, transparent 20%, rgba(14, 17, 17, 0.9), transparent 80%);
  padding: 2rem 0;
  font-size: 2.4rem;
  font-weight: 800;
  color: white;
  text-decoration: none;
  -webkit-transition: text-shadow .2s, -webkit-transform .2s;
  transition: text-shadow .2s, -webkit-transform .2s;
  -o-transition: transform .2s, text-shadow .2s;
  transition: transform .2s, text-shadow .2s;
  transition: transform .2s, text-shadow .2s, -webkit-transform .2s;
}

.header-section:target {
  color: blue;
}

/*  temporary */
.fadeIn {
  opacity: 1;
  -webkit-transition: opacity .3s;
  -o-transition: opacity .3s;
  transition: opacity .3s;
}

.fadeOut {
  opacity: 0;
  -webkit-transition: opacity .3s;
  -o-transition: opacity .3s;
  transition: opacity .3s;
}

.animation-delay--2s {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.animation-glow {
  -webkit-animation: glow-animation-kf 2s ease-in-out infinite;
          animation: glow-animation-kf 2s ease-in-out infinite;
}

@-webkit-keyframes glow-animation-kf {
  0% {
    text-shadow: none;
  }
  100% {
    text-shadow: 0 0rem 0.5rem #353839;
  }
}

@keyframes glow-animation-kf {
  0% {
    text-shadow: none;
  }
  100% {
    text-shadow: 0 0rem 0.5rem #353839;
  }
}

@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-100%) skewY(3deg);
            transform: translateX(-100%) skewY(3deg);
  }
  20% {
    -webkit-transform: translateX(0) skewY(3deg);
            transform: translateX(0) skewY(3deg);
  }
  80% {
    -webkit-transform: translateX(0) skewY(3deg);
            transform: translateX(0) skewY(3deg);
  }
  100% {
    -webkit-transform: translateX(-100%) skewY(3deg);
            transform: translateX(-100%) skewY(3deg);
  }
}

@keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-100%) skewY(3deg);
            transform: translateX(-100%) skewY(3deg);
  }
  20% {
    -webkit-transform: translateX(0) skewY(3deg);
            transform: translateX(0) skewY(3deg);
  }
  80% {
    -webkit-transform: translateX(0) skewY(3deg);
            transform: translateX(0) skewY(3deg);
  }
  100% {
    -webkit-transform: translateX(-100%) skewY(3deg);
            transform: translateX(-100%) skewY(3deg);
  }
}

@keyframes slideInLeft {
  0% {
    -webkit-transform: translate(-100%, -7rem);
            transform: translate(-100%, -7rem);
  }
  100% {
    -webkit-transform: translate(0, -7rem);
            transform: translate(0, -7rem);
  }
}

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeInAndResizeOnTop {
  0% {
    opacity: 0;
    z-index: 250;
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
  }
  100% {
    opacity: 1;
    z-index: 250;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes fadeInAndResizeOnTop {
  0% {
    opacity: 0;
    z-index: 250;
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
  }
  100% {
    opacity: 1;
    z-index: 250;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

html {
  font-size: 62.5%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  scroll-behavior: smooth;
}

@media screen and (max-width: 1300px) {
  html {
    font-size: 50%;
  }
}

@media screen and (max-width: 1120px) {
  html {
    font-size: 37.5%;
  }
}

@media screen and (max-width: 700px) {
  html {
    font-size: 25%;
  }
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  html {
    font-size: 50%;
  }
}

body {
  position: relative;
  font-family: 'Josefin-Sans', sans-serif;
}

#a {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  visibility: hidden;
}

.scrollable {
  opacity: 0;
  will-change: opacity;
}

.is-visible {
  background-color: blue;
  -webkit-transition: all .5s .25s;
  -o-transition: all .5s .25s;
  transition: all .5s .25s;
  opacity: 1;
}

.adblocker-notice {
  display: none;
  width: 30rem;
  background-color: white;
  color: #0A213B;
  font-size: 2.0rem;
  -webkit-transform: translateX(-100%) skewY(3deg);
      -ms-transform: translateX(-100%) skewY(3deg);
          transform: translateX(-100%) skewY(3deg);
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  -o-transition: transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
  position: absolute;
  top: 10rem;
  left: 0;
}

.adblocker-notice__display {
  display: block;
  -webkit-animation: slideInLeft 5s .5s;
          animation: slideInLeft 5s .5s;
}

.aboutme {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 7rem 5vw;
  padding-top: 10rem;
}

.aboutme__image {
  position: relative;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 20vw;
      -ms-flex: 0 0 20vw;
          flex: 0 0 20vw;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
              -ms-grid-row-align: center;
          align-self: center;
}

.aboutme__image:hover .aboutme__picture {
  border: 3rem solid rgba(14, 17, 17, 0.8);
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
          box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  .aboutme__image {
    display: none;
    width: 0;
  }
}

.aboutme__picture {
  width: 20vw;
  -webkit-border-radius: 100%;
          border-radius: 100%;
  border: 3rem solid rgba(14, 17, 17, 0.8);
  -webkit-box-shadow: 0 0.7rem 1.4rem rgba(0, 0, 0, 0.3);
          box-shadow: 0 0.7rem 1.4rem rgba(0, 0, 0, 0.3);
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}

.aboutme__content {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.aboutme__spiel {
  padding: 0 4rem;
  font-size: 1.8rem;
  line-height: 1.8;
  letter-spacing: .3rem;
}

.aboutme__spiel p:not(:last-child) {
  margin-bottom: 2rem;
}

.aboutme__skills {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(29rem, 1fr))[auto-fill];
      grid-template-columns: repeat(auto-fill, minmax(29rem, 1fr));
  gap: 2rem;
  padding: 4rem;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}

.aboutme__skills:hover {
  -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
          transform: scale(0.95);
}

.aboutme__skills:hover > * {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

.aboutme__github {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 4rem 4rem 0 4rem;
}

@media screen and (max-width: 1100px) {
  .aboutme__github {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

.aboutme__github--graph {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.aboutme__github--graph img {
  -o-object-fit: contain;
     object-fit: contain;
  height: 100%;
  width: 100%;
}

.aboutme__github--desc {
  -webkit-flex-basis: 30rem;
      -ms-flex-preferred-size: 30rem;
          flex-basis: 30rem;
}

@media screen and (max-width: 1100px) {
  .aboutme__github--desc {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0;
        -ms-flex: 1 0;
            flex: 1 0;
  }
}

.aboutme__github--desc p {
  font-size: 1.8rem;
  line-height: 1.8;
  letter-spacing: .3rem;
  padding: 1rem 2rem;
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  .aboutme__github {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-top: 2rem;
  }
  .aboutme__github--graph img {
    -o-object-fit: cover;
       object-fit: cover;
  }
  .aboutme__github--desc {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0;
        -ms-flex: 1 0;
            flex: 1 0;
  }
  .aboutme__github--desc p {
    padding: 1rem 0 1rem 0;
  }
}

.aboutme__skills-new {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 2rem;
}

.aboutme__skills-new > * {
  padding: 4rem;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}

.aboutme__skills-new > *:hover {
  -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
          transform: scale(0.95);
}

.aboutme__skills-new--image img {
  height: 8rem;
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  .aboutme__skills-new--image img {
    height: 5rem;
  }
}

.aboutme__skills-new--longimage img {
  height: 7rem;
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  .aboutme__skills-new--longimage img {
    height: 4rem;
  }
}

.blog__posts {
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 8rem;
  -ms-grid-columns: 20rem 1fr;
      grid-template: 8rem / 20rem 1fr;
  grid-auto-rows: 8rem;
  -webkit-box-pack: end;
  -webkit-justify-content: end;
      -ms-flex-pack: end;
          justify-content: end;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-filter: drop-shadow(0 0.4rem 0.8rem black);
          filter: drop-shadow(0 0.4rem 0.8rem black);
}

.blog__post--radio {
  visibility: hidden;
  display: none;
}

.blog__post--radio:checked + .blog__post--description {
  visibility: visible;
  max-height: 100%;
  opacity: 1;
}

.blog__post--radio:checked + .blog__post--description + .blog__post--name {
  opacity: 1;
  background-image: none;
  background-color: transparent;
  color: white;
  -webkit-transition: color .2s, background-color .2s;
  -o-transition: color .2s, background-color .2s;
  transition: color .2s, background-color .2s;
  font-weight: bold;
  -webkit-box-shadow: -0.8rem 0 0.8rem -0.2rem rgba(0, 0, 0, 0.4);
          box-shadow: -0.8rem 0 0.8rem -0.2rem rgba(0, 0, 0, 0.4);
}

.blog__post--radio:checked + .blog__post--description + .blog__post--name::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  -webkit-border-radius: 1rem;
          border-radius: 1rem;
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(14, 17, 17, 0.7)), to(rgba(220, 61, 36, 0.5)));
  background-image: -webkit-linear-gradient(left, rgba(14, 17, 17, 0.7), rgba(220, 61, 36, 0.5));
  background-image: -o-linear-gradient(left, rgba(14, 17, 17, 0.7), rgba(220, 61, 36, 0.5));
  background-image: linear-gradient(to right, rgba(14, 17, 17, 0.7), rgba(220, 61, 36, 0.5));
}

.blog__post--radio:checked + .blog__post--description + .blog__post--name:nth-of-type(1)::before {
  background-image: -webkit-gradient(linear, left top, right top, from(#0e1111), to(#dc3d24));
  background-image: -webkit-linear-gradient(left, #0e1111, #dc3d24);
  background-image: -o-linear-gradient(left, #0e1111, #dc3d24);
  background-image: linear-gradient(to right, #0e1111, #dc3d24);
}

.blog__post--radio:checked + .blog__post--description + .blog__post--name:nth-of-type(2)::before {
  background-image: -webkit-gradient(linear, right top, left top, from(#0e1111), to(#dc3d24));
  background-image: -webkit-linear-gradient(right, #0e1111, #dc3d24);
  background-image: -o-linear-gradient(right, #0e1111, #dc3d24);
  background-image: linear-gradient(to left, #0e1111, #dc3d24);
}

.blog__post--radio:checked + .blog__post--description + .blog__post--name:nth-of-type(3)::before {
  background-image: -webkit-gradient(linear, left top, right top, from(#0e1111), to(#dc3d24));
  background-image: -webkit-linear-gradient(left, #0e1111, #dc3d24);
  background-image: -o-linear-gradient(left, #0e1111, #dc3d24);
  background-image: linear-gradient(to right, #0e1111, #dc3d24);
}

.blog__post--radio:checked + .blog__post--description + .blog__post--name:nth-of-type(4)::before {
  background-image: -webkit-gradient(linear, left top, right top, from(#0e1111), to(#dc3d24));
  background-image: -webkit-linear-gradient(left, #0e1111, #dc3d24);
  background-image: -o-linear-gradient(left, #0e1111, #dc3d24);
  background-image: linear-gradient(to right, #0e1111, #dc3d24);
}

.blog__post--radio:checked + .blog__post--description + .blog__post--name:nth-of-type(5)::before {
  background-image: -webkit-gradient(linear, left top, right top, from(#0e1111), to(#dc3d24));
  background-image: -webkit-linear-gradient(left, #0e1111, #dc3d24);
  background-image: -o-linear-gradient(left, #0e1111, #dc3d24);
  background-image: linear-gradient(to right, #0e1111, #dc3d24);
}

.blog__post--radio:checked + .blog__post--description + .blog__post--name:hover {
  -webkit-filter: none;
          filter: none;
  cursor: initial;
}

.blog__post--name {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  height: 100%;
  opacity: .5;
  padding: .8rem 1rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: justify;
  font-size: 1.6rem;
}

.blog__post--name:first-of-type {
  -webkit-border-radius: 1rem 0 0 0;
          border-radius: 1rem 0 0 0;
}

.blog__post--name:last-of-type {
  -webkit-border-radius: 0 0 0 1rem;
          border-radius: 0 0 0 1rem;
}

.blog__post--name:hover {
  -webkit-filter: brightness(1.5);
          filter: brightness(1.5);
  cursor: pointer;
}

.blog__post--name:nth-of-type(1) {
  background-image: -webkit-gradient(linear, left top, right top, from(#353839), to(#0e1111));
  background-image: -webkit-linear-gradient(left, #353839, #0e1111);
  background-image: -o-linear-gradient(left, #353839, #0e1111);
  background-image: linear-gradient(to right, #353839, #0e1111);
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
}

.blog__post--name:nth-of-type(2) {
  background-image: -webkit-gradient(linear, right top, left top, from(#353839), to(#0e1111));
  background-image: -webkit-linear-gradient(right, #353839, #0e1111);
  background-image: -o-linear-gradient(right, #353839, #0e1111);
  background-image: linear-gradient(to left, #353839, #0e1111);
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
}

.blog__post--name:nth-of-type(3) {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#353839), to(#0e1111));
  background-image: -webkit-linear-gradient(top left, #353839, #0e1111);
  background-image: -o-linear-gradient(top left, #353839, #0e1111);
  background-image: linear-gradient(to bottom right, #353839, #0e1111);
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3 / 4;
}

.blog__post--name:nth-of-type(4) {
  background-image: -webkit-gradient(linear, left top, right top, from(#36393a), to(#0f1212));
  background-image: -webkit-linear-gradient(left, #36393a, #0f1212);
  background-image: -o-linear-gradient(left, #36393a, #0f1212);
  background-image: linear-gradient(to right, #36393a, #0f1212);
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
  grid-row: 4 / 5;
}

.blog__post--name:nth-of-type(5) {
  background-image: -webkit-gradient(linear, left top, right top, from(#36393a), to(#0f1212));
  background-image: -webkit-linear-gradient(left, #36393a, #0f1212);
  background-image: -o-linear-gradient(left, #36393a, #0f1212);
  background-image: linear-gradient(to right, #36393a, #0f1212);
  -ms-grid-row: 5;
  -ms-grid-row-span: 1;
  grid-row: 5 / 6;
}

.blog__post--description {
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-row: 1 / 5;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  height: 100%;
  color: white;
  -ms-grid-row-align: center;
      align-self: center;
  -ms-grid-column-align: end;
      justify-self: end;
  visibility: hidden;
  background-color: transparent;
  max-height: 0;
  text-align: right;
  font-size: 2.4rem;
  font-style: italic;
  opacity: 0;
  -webkit-transition: max-height .2s, opacity .2s .3s;
  -o-transition: max-height .2s, opacity .2s .3s;
  transition: max-height .2s, opacity .2s .3s;
  padding: 2rem 2rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr -webkit-max-content;
  -ms-grid-rows: 1fr max-content;
  -ms-grid-columns: 1fr 1fr;
      grid-template: 1fr -webkit-max-content / 1fr 1fr;
      grid-template: 1fr max-content / 1fr 1fr;
  -webkit-column-gap: 2.5rem;
     -moz-column-gap: 2.5rem;
          column-gap: 2.5rem;
  row-gap: 1rem;
}

.blog__post--text {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
              -ms-grid-row-align: center;
          align-self: center;
  overflow-y: hidden;
  max-height: 100%;
  font-size: 2.2rem;
}

@media screen and (max-width: 1280px) {
  .blog__post--text {
    font-size: 2rem;
  }
}

@media screen and (max-width: 1080px) {
  .blog__post--text {
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 950px) {
  .blog__post--text {
    font-size: 1.6rem;
  }
}

.blog__post--image {
  position: relative;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / 3;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
              -ms-grid-row-align: center;
          align-self: center;
  overflow: hidden;
  -webkit-border-radius: 1rem 2rem;
          border-radius: 1rem 2rem;
  -webkit-filter: drop-shadow(0 0.2rem 0.4rem black);
          filter: drop-shadow(0 0.2rem 0.4rem black);
}

.blog__post--tags {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.blog__post--tag {
  font-size: 1.4rem;
  border: 0.2rem solid rgba(0, 0, 0, 0.4);
  padding: .3rem .6rem;
}

.blog__post--tag:not(:last-of-type) {
  margin-right: 1rem;
}

.blog__post--picture {
  position: relative;
  width: 100%;
}

footer {
  width: 100%;
  -webkit-box-shadow: 0 -.2rem .4rem black;
          box-shadow: 0 -.2rem .4rem black;
  background-color: #0e1111;
  padding: 1rem 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  footer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

.footer {
  font-size: 1.4rem;
  font-style: italic;
  justify-self: center;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  width: 40rem;
  padding: 13rem 1rem 13rem 2rem;
  max-height: -webkit-min-content;
  max-height: -moz-min-content;
  max-height: min-content;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.footer p {
  margin-bottom: 1rem;
  line-height: 2rem;
  letter-spacing: .15rem;
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  .footer {
    padding: 1rem;
  }
}

.contact {
  position: relative;
  font-size: 1.6rem;
}

.contact__form {
  position: relative;
  width: 40rem;
  margin-bottom: 1rem;
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  .contact__form {
    margin: 0 auto;
  }
}

.contact__send {
  -webkit-animation: fadeIn 1s ease-in-out 0s 1 forwards;
          animation: fadeIn 1s ease-in-out 0s 1 forwards;
  margin-bottom: 1rem;
  color: black;
  font-size: 1.8rem;
  opacity: 1;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  width: 100%;
  -webkit-border-radius: 1rem;
          border-radius: 1rem;
  text-align: center;
}

.contact__text {
  padding: 1rem 0;
  font-size: 2rem;
  font-weight: bold;
  text-align: right;
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  .contact__text {
    display: none;
  }
}

.contact__field-name {
  text-align: left;
  -webkit-align-self: baseline;
      -ms-flex-item-align: baseline;
          align-self: baseline;
  padding: .5rem;
}

.contact__field-input {
  margin-bottom: .5rem;
}

.contact__input {
  width: 100%;
  -webkit-border-radius: 1rem;
          border-radius: 1rem;
  letter-spacing: .1rem;
  padding: .6rem 1.2rem;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.contact__textarea-input {
  height: 10rem;
}

.contact__submit-button {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  width: 15rem;
  padding: 1rem 2rem;
  -webkit-border-radius: 1rem;
          border-radius: 1rem;
  background-color: #353839;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  -webkit-box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.6);
          box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.6);
}

.contact__submit-button:hover {
  cursor: pointer;
  -webkit-transform: translateY(-0.3rem);
      -ms-transform: translateY(-0.3rem);
          transform: translateY(-0.3rem);
  background-color: #0e1111;
  -webkit-box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.6);
          box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.6);
}

.contact__sent {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0rem;
  max-height: .2rem;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-border-radius: 1rem;
          border-radius: 1rem;
  background-color: #dc3d24;
  text-align: center;
  padding: 0 0;
  -webkit-animation: openBoxWidth .3s ease-in-out 0s 1 forwards, openBoxHeight .2s ease-in-out .35s 1 forwards;
          animation: openBoxWidth .3s ease-in-out 0s 1 forwards, openBoxHeight .2s ease-in-out .35s 1 forwards;
  font-size: 1.8rem;
}

.contact__sent p {
  opacity: 0;
  -webkit-animation: fadeIn .5s ease-in-out .5s 1 forwards;
          animation: fadeIn .5s ease-in-out .5s 1 forwards;
}

@-webkit-keyframes openBoxWidth {
  0% {
    width: 0rem;
  }
  100% {
    width: 20rem;
  }
}

@keyframes openBoxWidth {
  0% {
    width: 0rem;
  }
  100% {
    width: 20rem;
  }
}

@-webkit-keyframes openBoxHeight {
  0% {
    max-height: .2rem;
    padding: 0 0;
  }
  100% {
    max-height: 8rem;
    padding: 1rem 2rem;
  }
}

@keyframes openBoxHeight {
  0% {
    max-height: .2rem;
    padding: 0 0;
  }
  100% {
    max-height: 8rem;
    padding: 1rem 2rem;
  }
}

.spinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 1rem;
  -webkit-border-radius: 1rem;
          border-radius: 1rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.spinner::after {
  content: ". . .";
  width: 4rem;
  height: 4rem;
  background-color: #dc3d24;
  border: .2rem solid white;
  -webkit-border-radius: 1rem;
          border-radius: 1rem;
  -webkit-animation: spins .5s ease-in-out 0s infinite alternate;
          animation: spins .5s ease-in-out 0s infinite alternate;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.fadeout {
  -webkit-animation: fadeOut .5s ease-in-out 0s 1 forwards;
          animation: fadeOut .5s ease-in-out 0s 1 forwards;
}

@-webkit-keyframes fadeOut {
  100% {
    opacity: 0;
    width: 0rem;
    display: none;
    overflow: visible;
  }
}

@keyframes fadeOut {
  100% {
    opacity: 0;
    width: 0rem;
    display: none;
    overflow: visible;
  }
}

@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes spins {
  0% {
    -webkit-transform: rotateY(0deg) scale(1);
            transform: rotateY(0deg) scale(1);
  }
  100% {
    -webkit-transform: rotateY(720deg) scale(1.2);
            transform: rotateY(720deg) scale(1.2);
  }
}

@keyframes spins {
  0% {
    -webkit-transform: rotateY(0deg) scale(1);
            transform: rotateY(0deg) scale(1);
  }
  100% {
    -webkit-transform: rotateY(720deg) scale(1.2);
            transform: rotateY(720deg) scale(1.2);
  }
}

header {
  -webkit-filter: drop-shadow(0 1rem 1rem black);
          filter: drop-shadow(0 1rem 1rem black);
}

.header {
  position: relative;
  height: 50vw;
  max-height: 80vh;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(14, 17, 17, 0)), color-stop(90%, #353839)), url(../../images/walkator-klMii3cR9iI-unsplash.jpg);
  background-image: -webkit-linear-gradient(left, rgba(14, 17, 17, 0) 0, #353839 90%), url(../../images/walkator-klMii3cR9iI-unsplash.jpg);
  background-image: -o-linear-gradient(left, rgba(14, 17, 17, 0) 0, #353839 90%), url(../../images/walkator-klMii3cR9iI-unsplash.jpg);
  background-image: linear-gradient(to right, rgba(14, 17, 17, 0) 0, #353839 90%), url(../../images/walkator-klMii3cR9iI-unsplash.jpg);
  -webkit-background-size: cover;
          background-size: cover;
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  .header {
    height: 100vh;
    max-height: 100vh;
  }
}

.header__logo {
  position: absolute;
  top: 50%;
  left: 99%;
  width: 100%;
  -webkit-transform: translate(-100%, -50%);
      -ms-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
  font-weight: 700;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: right;
  padding: 1rem 2rem 2rem 2rem;
  -webkit-border-radius: 10px;
          border-radius: 10px;
}

.header__name {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  font-size: 10rem;
  color: transparent;
  background-image: -webkit-gradient(linear, left top, right bottom, from(white), to(white));
  background-image: -webkit-linear-gradient(top left, white, white);
  background-image: -o-linear-gradient(top left, white, white);
  background-image: linear-gradient(to bottom right, white, white);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-animation: fadeIn 2s 1s forwards;
          animation: fadeIn 2s 1s forwards;
  opacity: 0;
  overflow: hidden;
  -webkit-filter: drop-shadow(0.2rem 0.2rem 0.2rem white);
          filter: drop-shadow(0.2rem 0.2rem 0.2rem white);
  line-height: 1.2;
  padding: 2rem 0 2rem 5rem;
}

@media screen and (max-width: 64em) {
  .header__name {
    font-size: 8rem;
  }
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  .header__name {
    font-size: 6rem;
    letter-spacing: .4rem;
  }
}

.header__text {
  font-size: 1.6rem;
  letter-spacing: .3rem;
  line-height: 1.5;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
}

.header__forename {
  font-weight: lighter;
}

.header__surname {
  font-weight: bolder;
}

.header__title {
  font-size: 2rem;
  position: relative;
  overflow: hidden;
  height: 5rem;
}

.header__title--fadeIn, .header__title--fadeOut {
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: forwards;
          animation-direction: forwards;
}

.header__title--fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}

.header__title--fadeOut {
  -webkit-animation-name: fadeOut;
          animation-name: fadeOut;
}

.header__title--basic {
  color: #dc3d24;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  font-size: 4rem;
  letter-spacing: .3rem;
}

.header__title--basic > :nth-child(4) {
  width: 1rem;
}

.header__title--wordle {
  color: white;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-column-gap: .3rem;
     -moz-column-gap: .3rem;
          column-gap: .3rem;
}

.header__title--wordle > * {
  width: 4rem;
  height: 4rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-shadow: 0.1rem 0 0.2rem rgba(0, 0, 0, 0.5);
          box-shadow: 0.1rem 0 0.2rem rgba(0, 0, 0, 0.5);
  -webkit-animation: rotate 1.5s ease-in-out 0s infinite alternate;
          animation: rotate 1.5s ease-in-out 0s infinite alternate;
}

.header__title--wordle > :nth-of-type(0) {
  background-color: green;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.header__title--wordle > :nth-of-type(1) {
  background-color: orange;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.header__title--wordle > :nth-of-type(2) {
  background-color: orange;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.header__title--wordle > :nth-of-type(3) {
  background-color: gray;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.header__title--wordle > :nth-of-type(4) {
  background-color: green;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.header__title--wordle > :nth-of-type(5) {
  background-color: orange;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.header__title--wordle > :nth-of-type(6) {
  background-color: orange;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.header__title--wordle > :nth-of-type(7) {
  background-color: green;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.header__title--wordle > :nth-of-type(8) {
  background-color: gray;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.header__title--wordle > :nth-of-type(9) {
  background-color: gray;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.header__title--wordle > :nth-of-type(10) {
  background-color: orange;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.header__title--wordle > :nth-of-type(11) {
  background-color: gray;
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}

.header__title--wordle > :nth-of-type(12) {
  background-color: green;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.header__title--wordle > :nth-of-type(13) {
  background-color: gray;
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}

.menu {
  width: 100%;
  height: 7rem;
  background-color: rgba(14, 17, 17, 0.6);
  -webkit-transform: translate(-100%, -7rem);
      -ms-transform: translate(-100%, -7rem);
          transform: translate(-100%, -7rem);
  -webkit-animation: slideInLeft .5s .5s forwards;
          animation: slideInLeft .5s .5s forwards;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 7rem;
  z-index: 100;
}

.menu img {
  height: 4rem;
  margin-top: .75rem;
}

.menu img:hover {
  cursor: pointer;
  -webkit-filter: brightness(1.1);
          filter: brightness(1.1);
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  .menu {
    display: none;
  }
}

.menu a {
  position: relative;
  padding: 1rem 3rem;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: .1rem;
  color: white;
  text-decoration: none;
  -webkit-transition: text-shadow .2s, -webkit-transform .2s;
  transition: text-shadow .2s, -webkit-transform .2s;
  -o-transition: transform .2s, text-shadow .2s;
  transition: transform .2s, text-shadow .2s;
  transition: transform .2s, text-shadow .2s, -webkit-transform .2s;
}

.menu a:not(:nth-child(n+4))::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0%;
  height: .2rem;
  z-index: -1;
  -webkit-border-radius: 1rem;
          border-radius: 1rem;
  background-color: transparent;
  -webkit-transition: width .2s, height .2s .2s, top .2s .2s, left .2s, background-color .2s;
  -o-transition: width .2s, height .2s .2s, top .2s .2s, left .2s, background-color .2s;
  transition: width .2s, height .2s .2s, top .2s .2s, left .2s, background-color .2s;
}

.menu a:not(:nth-child(n+4)):hover::before {
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #dc3d24;
}

.menu a:nth-child(n+4):hover {
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
}

.info {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  background-color: rgba(227, 174, 87, 0.6);
  z-index: 200;
}

.info:target {
  opacity: 1;
  visibility: visible;
  width: 100vw;
  height: 100vh;
  -webkit-box-shadow: 0 .5rem 1rem black;
          box-shadow: 0 .5rem 1rem black;
}

.info__container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  left: 5vw;
  top: 10vh;
  width: 90vw;
  height: 80vh;
  padding: 3rem;
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(14, 17, 17, 0.9)), to(rgba(53, 56, 57, 0.9)));
  background-image: -webkit-linear-gradient(top left, rgba(14, 17, 17, 0.9), rgba(53, 56, 57, 0.9));
  background-image: -o-linear-gradient(top left, rgba(14, 17, 17, 0.9), rgba(53, 56, 57, 0.9));
  background-image: linear-gradient(to bottom right, rgba(14, 17, 17, 0.9), rgba(53, 56, 57, 0.9));
}

.info__gallery {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (10.5vh)[6];
      grid-template-rows: repeat(6, 10.5vh);
  -ms-grid-columns: (1fr)[6];
      grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  -webkit-filter: drop-shadow(0 0.5rem 1rem black);
          filter: drop-shadow(0 0.5rem 1rem black);
}

.info__image--01 {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-row: 1 / 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-column: 1 / 4;
}

.info__image--02 {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / 3;
  -ms-grid-column: 4;
  -ms-grid-column-span: 3;
  grid-column: 4 / 7;
}

.info__image--03 {
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
  grid-row: 4 / 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-column: 1 / 4;
}

.info__image--04 {
  -ms-grid-row: 3;
  -ms-grid-row-span: 2;
  grid-row: 3 / 5;
  -ms-grid-column: 4;
  -ms-grid-column-span: 2;
  grid-column: 4 / 6;
}

.info__image--05 {
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
  grid-row: 3 / 6;
  -ms-grid-column: 6;
  -ms-grid-column-span: 1;
  grid-column: 6 / 7;
}

.info__image--06 {
  -ms-grid-row: 5;
  -ms-grid-row-span: 2;
  grid-row: 5 / 7;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}

.info__image--07 {
  -ms-grid-row: 5;
  -ms-grid-row-span: 2;
  grid-row: 5 / 7;
  -ms-grid-column: 2;
  -ms-grid-column-span: 4;
  grid-column: 2 / 6;
}

.info__image--08 {
  -ms-grid-row: 6;
  -ms-grid-row-span: 1;
  grid-row: 6 / 7;
  -ms-grid-column: 6;
  -ms-grid-column-span: 1;
  grid-column: 6 / 7;
}

.info__image--checkbox {
  opacity: 0;
  visibility: hidden;
}

.info__image--checkbox:checked + .info__image--label > .info__picture {
  position: absolute;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border: 0.8rem solid rgba(14, 17, 17, 0.9);
  -webkit-animation: fadeInAndResizeOnTop .5s backwards;
          animation: fadeInAndResizeOnTop .5s backwards;
  -webkit-border-radius: 20px;
          border-radius: 20px;
  z-index: 250;
}

.info__image-container {
  height: 100%;
  width: 100%;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s;
}

.info__picture {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-border-radius: 10px;
          border-radius: 10px;
  -webkit-transition: -webkit-filter .3s, -webkit-transform .2s;
  transition: -webkit-filter .3s, -webkit-transform .2s;
  -o-transition: filter .3s, transform .2s;
  transition: filter .3s, transform .2s;
  transition: filter .3s, transform .2s, -webkit-filter .3s, -webkit-transform .2s;
}

.info__picture:hover {
  cursor: pointer;
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
  border: 1px solid rgba(14, 17, 17, 0.9);
}

.info__details {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 3rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr max-content;
      grid-template-columns: 1fr -webkit-max-content;
      grid-template-columns: 1fr max-content;
  grid-auto-rows: -webkit-min-content;
  grid-auto-rows: min-content;
  -webkit-box-align: start;
  -webkit-align-items: start;
      -ms-flex-align: start;
          align-items: start;
}

.info__title {
  font-size: 4rem;
  font-weight: 700;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}

.info__date {
  margin-top: .5rem;
  font-size: 1.4rem;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
  -webkit-transform: translateY(-1.4rem);
      -ms-transform: translateY(-1.4rem);
          transform: translateY(-1.4rem);
}

.info__tech {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
}

.info__tech--icon-tall {
  height: 6rem;
}

.info__tech--icon-long {
  height: 3rem;
}

.info__notes {
  font-family: "Lato", sans-serif;
  padding: 1rem;
  background-color: rgba(227, 174, 87, 0.6);
  color: white;
  font-size: 1.4rem;
  line-height: 1.6;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
}

.info__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 4rem;
  height: 4rem;
  font-size: 3rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  -webkit-filter: drop-shadow(0 0.1rem 0.2rem black);
          filter: drop-shadow(0 0.1rem 0.2rem black);
}

.info__close:hover {
  -webkit-filter: drop-shadow(0 0.1rem 0.2rem white);
          filter: drop-shadow(0 0.1rem 0.2rem white);
}

.portfolio {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (3)[1fr];
      grid-template-columns: repeat(1fr, 3);
  -ms-grid-rows: max-content max-content;
      grid-template-rows: -webkit-max-content -webkit-max-content;
      grid-template-rows: max-content max-content;
  gap: 1rem;
  margin: 1rem;
  margin-bottom: 5rem;
  padding-top: 5rem;
}

.portfolio__projects--major {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.portfolio__projects--minor {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  .portfolio__projects--major, .portfolio__projects--minor {
    display: block;
  }
}

.portfolio__minor--info {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(53, 56, 57, 0.7);
  width: 0%;
  height: 100%;
  -webkit-clip-path: polygon(0 0, 100% 0%, 95% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0%, 95% 100%, 0 100%);
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 600px) {
  .portfolio__minor--info {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.portfolio__minor--links {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(227, 174, 87, 0.5);
  width: 0%;
  height: 100%;
  -webkit-clip-path: polygon(19% 0, 4% 100%, 100% 100%, 100% 0);
          clip-path: polygon(19% 0, 4% 100%, 100% 100%, 100% 0);
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.portfolio__minor--link {
  font-size: 1.5rem;
  padding: .5rem 1rem;
  border: .1rem solid white;
  -webkit-box-shadow: 0.2rem 0 0.4rem rgba(0, 0, 0, 0.5);
          box-shadow: 0.2rem 0 0.4rem rgba(0, 0, 0, 0.5);
  -webkit-border-radius: .5rem;
          border-radius: .5rem;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  letter-spacing: .1rem;
  margin-right: 2.5rem;
  width: 10rem;
  text-align: center;
  color: black;
  font-weight: bold;
  text-decoration: none;
}

@media screen and (min-width: 1800px) {
  .portfolio__minor--link {
    width: 14rem;
  }
}

.portfolio__minor--link:hover {
  cursor: pointer;
  -webkit-transform: translateY(-0.2rem);
      -ms-transform: translateY(-0.2rem);
          transform: translateY(-0.2rem);
  -webkit-box-shadow: 0.4rem 0 0.8rem rgba(0, 0, 0, 0.7);
          box-shadow: 0.4rem 0 0.8rem rgba(0, 0, 0, 0.7);
  background-color: rgba(255, 255, 255, 0.3);
}

.portfolio__minor--link:not(:last-child) {
  margin-bottom: .5rem;
}

.portfolio__minor--description {
  padding: 1rem 2rem;
  padding-right: 3rem;
  font-size: 1.5rem;
  line-height: 2.4rem;
  letter-spacing: .1rem;
  color: white;
}

.portfolio__minor--skills {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 600px) {
  .portfolio__minor--skills {
    display: none;
  }
}

.portfolio__minor--skill {
  padding: .5rem 1rem;
}

.portfolio__minor--skill img {
  height: 4.5rem;
}

.portfolio__minor--skill--small img {
  height: 3.5rem;
}

.portfolio__container {
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(14, 17, 17, 0.8)), to(rgba(53, 56, 57, 0.5)));
  background-image: -webkit-linear-gradient(top left, rgba(14, 17, 17, 0.8), rgba(53, 56, 57, 0.5));
  background-image: -o-linear-gradient(top left, rgba(14, 17, 17, 0.8), rgba(53, 56, 57, 0.5));
  background-image: linear-gradient(to bottom right, rgba(14, 17, 17, 0.8), rgba(53, 56, 57, 0.5));
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 20vw;
  gap: 1rem;
  padding: 1rem 1rem;
  -webkit-box-shadow: 0 .4rem 2rem black;
          box-shadow: 0 .4rem 2rem black;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}

.portfolio__container:hover {
  -webkit-transform: scale(1.02);
      -ms-transform: scale(1.02);
          transform: scale(1.02);
  -webkit-box-shadow: 0 .6rem 3rem black;
          box-shadow: 0 .6rem 3rem black;
}

.portfolio__content {
  position: relative;
  width: 100%;
  height: 100%;
}

.portfolio__content:hover .portfolio__text {
  opacity: 1;
  visibility: visible;
}

.portfolio__item {
  -webkit-transition: -webkit-box-flex .6s, -webkit-flex .6s, -webkit-filter .6s;
  transition: -webkit-box-flex .6s, -webkit-flex .6s, -webkit-filter .6s;
  -o-transition: flex .6s, filter .6s;
  transition: flex .6s, filter .6s;
  transition: flex .6s, filter .6s, -webkit-box-flex .6s, -webkit-flex .6s, -ms-flex .6s, -webkit-filter .6s;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.portfolio__item--1 {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / span 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}

.portfolio__item--2 {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / span 2;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
}

.portfolio__item--3 {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / span 2;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3 / 4;
}

.portfolio__item--4 {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / span 2;
  -ms-grid-column: 4;
  -ms-grid-column-span: 1;
  grid-column: 4 / 5;
}

.portfolio__item--5 {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / span 2;
  -ms-grid-column: 5;
  -ms-grid-column-span: 1;
  grid-column: 5 / 6;
}

.portfolio__item:hover {
  cursor: pointer;
  -webkit-box-flex: 3;
  -webkit-flex: 3;
      -ms-flex: 3;
          flex: 3;
}

.portfolio__item:not(:hover) {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

.portfolio__image, .portfolio__video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.portfolio__text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: 1rem;
  margin-top: 1rem;
  border: 50% solid transparent;
  font-size: 2.4rem;
  font-weight: 800;
  text-shadow: 0 .2rem .2rem white;
  text-align: center;
  color: white;
  background-color: rgba(14, 17, 17, 0.9);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .3s .5s;
  -o-transition: opacity .3s .5s;
  transition: opacity .3s .5s;
  z-index: 10;
}

.portfolio__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.portfolio__site {
  position: relative;
  -webkit-border-radius: 1rem;
          border-radius: 1rem;
  overflow: hidden;
  -webkit-box-shadow: 0.3rem 0 0.6rem rgba(0, 0, 0, 0.5);
          box-shadow: 0.3rem 0 0.6rem rgba(0, 0, 0, 0.5);
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 40rem;
      -ms-flex: 1 1 40rem;
          flex: 1 1 40rem;
}

.portfolio__site:not(:last-of-type) {
  margin-right: 1rem;
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  .portfolio__site {
    margin-bottom: 2rem;
  }
}

.portfolio__site--minor {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 45vw;
  -webkit-border-radius: 1rem;
          border-radius: 1rem;
  min-height: 15rem;
  max-height: 17rem;
  -webkit-box-shadow: 0.3rem 0 0.6rem rgba(0, 0, 0, 0.5);
          box-shadow: 0.3rem 0 0.6rem rgba(0, 0, 0, 0.5);
  overflow: hidden;
  margin-bottom: 1rem;
}

.portfolio__site--minor:nth-of-type(2n) {
  margin-left: 1rem;
}

.portfolio__site--minor:hover .portfolio__minor--info {
  opacity: 1;
  visibility: visible;
  width: 80%;
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  .portfolio__site--minor:hover .portfolio__minor--info {
    width: 75.5%;
  }
}

.portfolio__site--minor:hover .portfolio__minor--links {
  opacity: 1;
  visibility: visible;
  width: 25%;
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  .portfolio__site--minor:hover .portfolio__minor--links {
    width: 30%;
  }
  .portfolio__site--minor:hover .portfolio__minor--links > * {
    margin-right: 1.5rem;
  }
}

.portfolio__site--minor:hover .portfolio__site--name {
  opacity: 0;
  visibility: hidden;
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  .portfolio__site--minor {
    margin-bottom: 2rem;
  }
  .portfolio__site--minor:nth-of-type(2n) {
    margin-left: 0rem;
  }
}

.portfolio__site--background {
  width: 100%;
  height: 100%;
  opacity: .4;
}

.portfolio__site--name {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  z-index: 10;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.portfolio__site--name img {
  max-height: 50%;
  max-width: 100%;
}

.portfolio__site--name--phys {
  color: black;
  text-shadow: .2rem 0 .4rem white;
  font-weight: bold;
  font-size: 4rem;
}

.portfolio__site--name--phys1 {
  -webkit-animation: bulge 1s ease-in-out 0s;
          animation: bulge 1s ease-in-out 0s;
}

.portfolio__site--name--phys2 {
  -webkit-animation: bulge 1s ease-in-out .15s;
          animation: bulge 1s ease-in-out .15s;
}

.portfolio__site--name--phys3 {
  -webkit-animation: bulge 1s ease-in-out .3s;
          animation: bulge 1s ease-in-out .3s;
}

.portfolio__site--name--phys4 {
  -webkit-animation: bulge 1s ease-in-out .45s;
          animation: bulge 1s ease-in-out .45s;
}

.portfolio__site--name--phys5 {
  -webkit-animation: bulge 1s ease-in-out .6s;
          animation: bulge 1s ease-in-out .6s;
}

.portfolio__site--name--phys6 {
  -webkit-animation: bulge 1s ease-in-out .75s;
          animation: bulge 1s ease-in-out .75s;
}

.portfolio__site--name--phys7 {
  -webkit-animation: bulge 1s ease-in-out .90s;
          animation: bulge 1s ease-in-out .90s;
}

.portfolio__site--name--phys8 {
  -webkit-animation: bulge 1s ease-in-out 1.05s;
          animation: bulge 1s ease-in-out 1.05s;
}

.portfolio__site--name--phys9 {
  -webkit-animation: bulge 1s ease-in-out 1.20s;
          animation: bulge 1s ease-in-out 1.20s;
}

.portfolio__site--name--phys10 {
  -webkit-animation: bulge 1s ease-in-out 1.35s;
          animation: bulge 1s ease-in-out 1.35s;
}

.portfolio__site--name--phys11 {
  -webkit-animation: bulge 1s ease-in-out 1.50s;
          animation: bulge 1s ease-in-out 1.50s;
}

.portfolio__site--name--apollo {
  color: black;
  text-shadow: .2rem 0 .4rem white;
  font-weight: bold;
  font-size: 4rem;
}

.portfolio__site--name--ags {
  color: black;
  text-shadow: .2rem 0 .4rem white;
  font-weight: bold;
  font-size: 4rem;
  width: 100%;
  text-align: center;
}

.portfolio__site--hover {
  position: absolute;
  top: 0;
  left: 200%;
  width: 100%;
  height: 100%;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  opacity: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.portfolio__site--detail {
  position: relative;
  margin: 1rem;
  background-color: rgba(200, 200, 200, 0.6);
  width: 100%;
  -webkit-border-radius: 1rem;
          border-radius: 1rem;
  padding: 1rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr -webkit-max-content;
  -ms-grid-rows: 1fr max-content;
  -ms-grid-columns: 1fr 1fr;
      grid-template: 1fr -webkit-max-content / 1fr 1fr;
      grid-template: 1fr max-content / 1fr 1fr;
}

.portfolio__site--logo {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: start;
      -ms-flex-align: start;
          align-items: start;
}

.portfolio__site--logo img {
  max-width: 100%;
}

.portfolio__site--description {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  font-size: 1.4rem;
  line-height: 2.4rem;
  letter-spacing: .1rem;
}

.portfolio__site--paragraph:not(:last-of-type) {
  margin-bottom: 1rem;
}

.portfolio__site--skills {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
}

.portfolio__site--skills--small {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: end;
      -ms-flex-pack: end;
          justify-content: end;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.portfolio__site--skills--small > * {
  padding: .5rem 1rem;
}

.portfolio__site--skills--small img {
  height: 5rem;
}

.portfolio__site--skills--long {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: end;
      -ms-flex-pack: end;
          justify-content: end;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.portfolio__site--skills--long > * {
  padding: .5rem 1rem;
}

.portfolio__site--skills--long img {
  height: 4rem;
}

.portfolio__site--links {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -webkit-box-pack: start;
  -webkit-justify-content: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: end;
  -webkit-align-items: end;
      -ms-flex-align: end;
          align-items: end;
  margin-bottom: 1rem;
  margin-right: 1rem;
}

.portfolio__site--link {
  font-size: 1.5rem;
  padding: .5rem 1rem;
  border: .1rem solid white;
  -webkit-box-shadow: 0.2rem 0 0.4rem rgba(0, 0, 0, 0.5);
          box-shadow: 0.2rem 0 0.4rem rgba(0, 0, 0, 0.5);
  -webkit-border-radius: .5rem;
          border-radius: .5rem;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  letter-spacing: .1rem;
  margin-right: 0rem;
  width: 16rem;
  text-align: center;
  color: black;
  font-weight: bold;
  text-decoration: none;
}

.portfolio__site--link:hover {
  cursor: pointer;
  -webkit-transform: translateY(-0.2rem);
      -ms-transform: translateY(-0.2rem);
          transform: translateY(-0.2rem);
  -webkit-box-shadow: 0.4rem 0 0.8rem rgba(0, 0, 0, 0.7);
          box-shadow: 0.4rem 0 0.8rem rgba(0, 0, 0, 0.7);
  background-color: rgba(255, 255, 255, 0.3);
}

.portfolio__site--link:not(:last-child) {
  margin-bottom: .5rem;
}

.portfolio__site:hover .portfolio__site--hover {
  opacity: 1;
  left: 0;
}

.portfolio__site:hover .portfolio__site--name {
  -webkit-transform: translate(-200%, -50%);
      -ms-transform: translate(-200%, -50%);
          transform: translate(-200%, -50%);
}

@-webkit-keyframes bulge {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.7);
            transform: scale(1.7);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes bulge {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.7);
            transform: scale(1.7);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.rates {
  width: 80vw;
  margin: 0 auto;
}

.rates__table {
  border-spacing: 0;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}

.rates__table th {
  font-size: 2rem;
  text-align: left;
  background-color: #dddddd;
  padding: 1.5rem;
}

.rates__table tr:hover {
  background-color: #353839;
}

.rates__table tr:nth-of-type(odd) {
  background-color: #aaaaaa;
}

.rates__table tr:nth-of-type(even) {
  background-color: #bbbbbb;
}

.rates__table td {
  padding: 1.5rem;
}

.rates__name {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.rates__description {
  font-size: 1.5rem;
  font-family: "Lato", sans-serif;
  letter-spacing: .1rem;
  line-height: 2.2rem;
}

.rates__cost {
  font-size: 1.6rem;
}

.rates__support {
  background-color: #0e1111;
}

.rates p {
  font-size: 1.6rem;
  margin: 2rem 0;
  font-family: "Lato", sans-serif;
  letter-spacing: .1rem;
  line-height: 2.2rem;
}

.video-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(200, 200, 200, 0.8);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}

.video-popup__display {
  opacity: 1;
  visibility: visible;
}

.video-popup__hide {
  opacity: 0;
  visibility: hidden;
}

.video-popup__video {
  position: relative;
  background-color: #353839;
  -webkit-box-shadow: 0.3rem 0 0.6rem #e3ae57;
          box-shadow: 0.3rem 0 0.6rem #e3ae57;
  padding: 1rem;
  width: 100vh;
  border: .1rem solid black;
  z-index: 2000;
}

.video-popup__video--video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (orientation: landscape) and (max-height: 600px) {
  .video-popup__video {
    padding: 0;
    width: 100vw;
    height: 100vh;
  }
  .video-popup__video--video {
    -o-object-fit: contain;
       object-fit: contain;
  }
}

.video-popup__close {
  position: absolute;
  bottom: 3rem;
  right: 3rem;
  visibility: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

@media screen and (orientation: landscape) and (max-height: 600px) {
  .video-popup__close {
    visibility: visible;
    background-color: rgba(53, 56, 57, 0.6);
    -webkit-box-shadow: 0.2rem 0 0.4rem rgba(0, 0, 0, 0.5);
            box-shadow: 0.2rem 0 0.4rem rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 50%;
            border-radius: 50%;
    height: 5rem;
    width: 5rem;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .video-popup__close:hover {
    cursor: pointer;
    background-color: #353839;
    -webkit-box-shadow: 0.3rem 0 0.6rem rgba(0, 0, 0, 0.8);
            box-shadow: 0.3rem 0 0.6rem rgba(0, 0, 0, 0.8);
  }
  .video-popup__close:hover > * {
    -webkit-filter: invert(1);
            filter: invert(1);
  }
  .video-popup__close img {
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    width: 3rem;
    height: 3rem;
  }
}

.video-popup__playpause {
  position: absolute;
  background-color: rgba(53, 56, 57, 0.6);
  -webkit-box-shadow: 0.2rem 0 0.4rem rgba(0, 0, 0, 0.5);
          box-shadow: 0.2rem 0 0.4rem rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 50%;
          border-radius: 50%;
  height: 8rem;
  width: 8rem;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.video-popup__playpause img {
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}

.video-popup__playpause:hover {
  cursor: pointer;
  background-color: #353839;
  -webkit-box-shadow: 0.3rem 0 0.6rem rgba(0, 0, 0, 0.8);
          box-shadow: 0.3rem 0 0.6rem rgba(0, 0, 0, 0.8);
}

.video-popup__playpause:hover > * {
  -webkit-filter: invert(1);
          filter: invert(1);
}

.video-popup__playpause--play {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.video-popup__playpause--play img {
  width: 3rem;
  height: 3rem;
}

.video-popup__playpause--pause {
  top: 3rem;
  left: 3rem;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  height: 5rem;
  width: 5rem;
  font-size: 5rem;
}

.video-popup__playpause--pause img {
  width: 2rem;
  height: 2rem;
}