/* correct resolution */
@media screen and (min-width: 1000px){
  h1 {
    margin: 0;
    padding: 0;
  }

  /* https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu */
  .grid {
    display: grid;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100%;
    
    grid-template-columns: 98px 95%;
    grid-template-rows: 98px 50%;
  }

  .wrong_res {
    display: none;
  }
}

/* wrong resolution */
/* NEEDS FIXING - THERE'S NO PARAGRAPHS */
@media screen and (max-width: 999.9px) {
  .wrong_res {
    display: "";
    font-size: 100%;
    color: crimson;
  }

  button {
      display: none;
  }

  .grid * {
      visibility: visible;
      height: 100%;
  }

  .grid.help {
    display: none;
  }
}

/* global resolution */
.center {
  text-align: center;
}

.grey {
  color: grey;
}

.lightgreen {
  color: lightgreen;
}

.crimson {
  color: crimson;
}

.black {
  color: black;
  background-color: white;
  border-radius: 5px;
}

.repeat {
    position: relative;
    width: 100%;
    border-bottom: 1.25px dashed crimson;
}

.repeato {
    position: relative;
    width: 100%;
    border-bottom: 1.25px dashed lightgreen;
}

.gap {
    border-bottom: 1px dashed grey;
}

a {
  color: white;
}

.l {
  color: grey;
  text-decoration-color: crimson;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: monospace;
  overflow-x: hidden;
  width: 100vw;
}

html {
  color: white;
  background-color: black;
}

footer {
  z-index: -1;
  color: white;
  position: fixed;
  bottom: 0px;
  right: 0;
  padding: 1%;
}

@keyframes s1 {
  0%   {
    top: 0%;
    transform: rotate3d(0, 0, 0, 0);
  }

  100% {
    top: -10%;
    transform: rotate3d(0, 1, 0, 90deg);
  }
}

.s1 {
  animation-name: s1;
  animation-duration: 0.25s;
  animation-timing-function: linear;
}

@keyframes s2 {
  0%   {
    top: -10%;
    transform: rotate3d(0, 1, 0, 90deg);
  }

  100% {
    top: 0%;
    transform: rotate3d(0, 1, 0, 270deg);
  }
}

.s2 {
  animation-name: s2;
  animation-duration: 0.5s;
  animation-timing-function: linear;
}

@keyframes s3 {
  0%   {
    transform: rotate3d(0, 1, 0, 270deg);
  }

  100% {
    transform: rotate3d(0, 1, 0, 360deg);
  }
}

.s3 {
  animation-name: s3;
  animation-duration: 0.25s;
  animation-timing-function: linear;
}

#profile_image {
    position: relative;
    height: 75%;
    width: 75%;
    border-radius: 50%;
    background: url(./q.png);
    background-size: 100%;
    text-align: center;
    justify-items: center;
    margin: 15%;
}

@keyframes co {
  0%   {
    left: 0%;
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    left: 100vw;
    opacity: 0;
  }
}

.content_outro {
  animation-name: co;
  animation-duration: 1s;
}

@keyframes ci {
  0% {
    left: 100vw;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100%   {
    left: 0%;
    opacity: 1;
  }
}

.content_intro {
  animation-name: ci;
  animation-duration: 1s;
}

.content_grid {
  display: grid;
  grid-template-columns: 1fr;
}

.title {
  grid-row-start: 1;
  grid-column-start: 1;
  position: relative;
  align-self: center;
}

.description {
  grid-row-start: 1;
  grid-column-start: 1;
  position: relative;
  white-space: pre-wrap;
}

#prof_sel {
  text-align: center;
}