:root {
  --glitched-duration: 1s;
}

body {
  font-family: sans-serif
}

.container {
  display: grid;
  height:95vh;
  grid-template-rows:5% 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns:25% 10% 10% 10% 10% 10% 25% ;
}

contact {
  grid-column-start:2;
  grid-column-end:7;
  grid-row-start:7;
  grid-row-end:8;
  align-items: center;
  display: grid;
  height:20px;
  grid-template-rows:100%;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
}

headline{
  grid-column-start:2;
  grid-column-end:7;
  grid-row-start:2;
  grid-row-end:2;
  align-items: center;
}

headline name{
  font-size: 6vw;
  display: block;
}

bio_professional {
  grid-column-start:4;
  grid-column-end:7;
  grid-row-start:4;
  grid-row-end:5;
  font-size: 1.15em;
}

bio_private {
  grid-column-start:4;
  grid-column-end:7;
  grid-row-start:5;
  grid-row-end:6;
  font-size: 1.15em;
}

bio_professional span,
bio_private span {
  display: block;
  padding: 20px;
}

bio_image {
  grid-column-start:2;
  grid-column-end:4;
  grid-row-start:4;
  grid-row-end:6;
  align-items: center;
}

bio_image img {
  width: 100%;
  height: auto;
  max-height: 250px;
  max-width: 250px;
}

section.cyber,
img.cyber {
  border: 30px solid rgb(172, 172, 172);
  border-left: 5px solid rgb(172, 172, 172);
  border-right: 3px solid #8ae66e;
  border-bottom: 15px solid rgb(172, 172, 172);
  clip-path: polygon(0px 25px, 26px 0px, calc(60% - 25px) 0px, 60% 25px, 100% 25px, 100% calc(100% - 10px), calc(100% - 15px) calc(100% - 10px), calc(80% - 10px)  calc(100% - 10px), calc(80% - 15px) calc(100% - 0px), 10px  calc(100% - 0px), 0% calc(100% - 10px));
  background-color: rgb(172, 172, 172);
  margin-top: 10px;
}

h1.cyber {
  font-size: 2rem;
  line-height: 2.2rem;
  font-weight: 200;
  position: relative;
  padding-bottom: 15px;
}

h1.cyber:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 2px;
    width: 100%;
    height: 10px;
    background-color: #000;
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
}

h1.cyber.glitched {
  animation-name: h1glitched;
  animation-duration: calc(var(--glitched-duration) * 1.3);
  animation-iteration-count: 2.5;
  animation-timing-function: linear;
}

section.cyber {
  animation-name: h1glitched;
  animation-duration: calc(var(--glitched-duration) * 0.6);
  animation-iteration-count: 2.5;
  animation-timing-function: linear;
}

@keyframes h1glitched {
  0% {
    transform: skew(-20deg);
    left: -4px;
  }
  10% {
    transform: skew(-20deg);
    left: -4px;
  }
  11% {
    transform: skew(0deg);
    left: 2px;
  }
  50% {
    transform: skew(0deg);
  }
  51% {
    transform: skew(10deg);
  }
  59% {
    transform: skew(10deg);
  }
  60% {
    transform: skew(0deg);
  }
  100% {
    transform: skew(0deg);
  }
}

h1.cyber:after,
p.cyber:after {
  content: "_";
  animation-name: hxafter;
  animation-duration: var(--glitched-duration);
  animation-iteration-count: 10;
  animation-timing-function: linear;
}

@keyframes hxafter {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

a.cyber {
  --background-color: #414141;
  display: block;
  border: none;
  border-radius: 0%;
  font-size: 1.5rem;
  line-height: 100%;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  font-family: "Advent Pro", arial;
  padding: 35px 75px;
  margin: 10px;
  position: relative;
  color: #fff;
  border-right: 3px solid #8ae66e;
  clip-path: polygon(
    -15px 0%,
    calc(100% + 15px) 0%,
    calc(100% + 15px) 100%,
    20px 100%,
    -15px calc(100% - 35px)
  );
  cursor: pointer;
  background-color: var(--background-color);
  outline: none;
}

a.cyber:hover,
a.cyber:focus {
  animation-name: hover;
  animation-duration: var(--glitched-duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

a.cyber:hover:after,
a.cyber:focus:after {
  animation-name: hoverafter;
  animation-duration: var(--glitched-duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

a.cyber:before {
  --outside: 4px;
  content: "";
  position: absolute;
  display: none;
  background-color: var(--background-color);
  width: calc(100% + (var(--outside) * 2));
  height: 12px;
  top: 0px;
  left: calc(0px - 1px - var(--outside));
  border-left: 2px solid #8ae66e;
  border-right: 2px solid #8ae66e;
}

a.cyber:hover:before,
a.cyber:focus:before {
  display: block;
  animation-name: hoverbefore;
  animation-duration: var(--glitched-duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes hover {
  0% {
    transform: skew(0deg);
  }
  60% {
    transform: skew(0deg);
  }
  61% {
    transform: skew(10deg);
  }
  70% {
    transform: skew(10deg);
  }
  71% {
    transform: skew(0deg);
  }
  100% {
    transform: skew(0deg);
  }
}

@keyframes hoverbefore {
  0% {
    display: none;
    top: 0px;
  }
  10% {
    display: none;
    top: 0px;
  }
  11% {
    display: block;
    top: 10px;
    left: calc(0px - 0px - var(--outside));
  }
  29% {
    top: 10px;
  }
  30% {
    display: none;
    top: 0px;
  }
  50% {
    display: none;
    top: 0px;
  }
  51% {
    display: block;
    top: 55px;
    filter: blur(1px);
    height: 22px;
  }
  90% {
    display: block;
    top: 55px;
    height: 22px;
  }
  91% {
    filter: blur(0px);
    display: none;
    top: 0px;
    height: 12px;
  }
  100% {
    display: none;
    top: 0px;
  }
}

@keyframes hoverafter {
  0% {
    right: 45px;
  }

  10% {
    right: 45px;
  }
  11% {
    right: 35px;
  }
  20% {
    transform: skew(0deg);
  }
  21% {
    transform: skew(-10deg);
  }
  40% {
    transform: skew(-10deg);
  }
  41% {
    transform: skew(0deg);
  }
  49% {
    right: 35px;
  }
  50% {
    right: 55px;
  }

  60% {
    right: 55px;
  }
  61% {
    right: 35px;
  }
  70% {
    transform: skew(0deg);
  }
  71% {
    transform: skew(10deg);
  }
  80% {
    transform: skew(10deg);
  }
  81% {
    transform: skew(0deg);
  }
  100% {
    right: 35px;
  }
}

@media (max-width: 1337px) {
  bio_professional {
    grid-column-start:2;
    grid-column-end:7;
    grid-row-start:6;
    grid-row-end:7;
    font-size: 1.15em;
  }
  
  bio_private {
    grid-column-start:2;
    grid-column-end:7;
    grid-row-start:7;
    grid-row-end:8;
    font-size: 1.15em;
  }
  
  bio_professional span {
    display: block;
    padding: 20px;
  }
  
  bio_image {
    grid-column-start:3;
    grid-column-end:6;
    grid-row-start:4;
    grid-row-end:5;
    align-items: center;
  }

  contact {
    grid-column-start:2;
    grid-column-end:7;
    grid-row-start:10;
    grid-row-end:11;
    align-items: center;
    display: grid;
    height:20px;
    grid-template-rows:100%;
    margin-top: 50px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
    padding-bottom: 80px;
  }
}