.main {
  height: 75vh;
  margin: 12.5vh 0px 0px 0px;
  padding: 0px;
  width: 100%;
}

body {
  margin: 0px;
  padding: 0px;
}

.line {
  position: relative;
  height: 15vh;
  line-height: 15vh;  /* must be same as .line CSS height to vcenter text*/
  width: 100%;
}

.footer {
  margin-top: 4vh;
  margin-left: 1vh;
}

.text-line {
  margin: auto;
}

h1 {
  letter-spacing: -0.01em;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 700;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  white-space: nowrap;
}

h2 {
  color: #dddddd;
  font-family: 'Roboto Mono', 'Courier', monospace;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0s ease;
  background-color: black;
}

.container:hover .overlay {
  opacity: 1;
}

.overlay-text {
  color: white;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  white-space: nowrap;
}

.github {
  color: #624986;
}

.twitter {
  color: #0ea5de;
}

.quora {
  color: #a82400;
}

.linkedin {
  color: #00669c;
}

.gg {
  color: #3cba54;
}

.gy {
  color: #f4c20d;
}

.gr {
  color: #e25a5e;
}

.gb {
  color: #45a0ff;
}

.Korean {
  /*color: #e34242;*/
  /*letter-spacing: 0.25px;*/
}
.American {
  /*color: #348dff;*/
  /*letter-spacing: 0.25px;*/
}

.ex {
}

.deepmind {
}

.microsoft {
}


@media only screen { /* really old phones small screens */
  .text-line {
    width: 80vw;
  }

  h1 {
    font-size: 27px;
  }
  h2 {
    font-size: 15px;
  }
  .overlay-text {
    font-size: 17px;
  }
}

@media only screen and (min-width: 350px) {
  /*.Korean {
    text-shadow: 1.75px 0px #e34242;
  }
  .American {
    text-shadow: 1.75px 0px #348dff;
  }*/

  .text-line {
    width: 80vw;
  }

  h1 {
    font-size: 33px;
  }
  h2 {
    font-size: 18px;
  }
  .overlay-text {
    font-size: 19px;
  }
}

@media only screen and (min-width: 350px) and (min-height: 600px) {
  /* iphone X, very tall and narrow */

  /*.Korean {
    text-shadow: 1.75px 0px #e34242;
  }
  .American {
    text-shadow: 1.75px 0px #348dff;
  }*/

  .text-line {
    width: 82vw;
  }

  .main {
    height: 50vh;
    margin: 20vh 0px 0px 0px;
  }

  .line {
    height: 10vh;
    line-height: 10vh;  /* must be same as .line CSS height to vcenter text*/
  }

  h1 {
    font-size: 35px;
  }
  h2 {
    font-size: 18px;
  }
  .overlay-text {
    font-size: 21px;
  }
}

@media only screen and (min-width: 411px) { /* pixel 2 */
  /*.Korean {
    text-shadow: 1.75px 0px #e34242;
  }
  .American {
    text-shadow: 1.75px 0px #348dff;
  }*/

  .text-line {
    width: 80vw;
  }

  h1 {
    font-size: 39px;
  }
  h2 {
    font-size: 19px;
  }
  .overlay-text {
    font-size: 22px;
  }
}

@media only screen and (min-width: 700px) {
  /*.Korean {
    text-shadow: 2px 0px #e34242;
    letter-spacing: 0.5px;
  }
  .American {
    text-shadow: 2px 0px #348dff;
    letter-spacing: 0.5px;
  }*/

  .footer {
    margin-top: 7vh;
  }

  .text-line {
    width: 65vw;
  }

  h1 {
    font-size: 35px;
  }
  h2 {
    font-size: 15px;
  }
  .overlay-text {
    font-size: 25px;
  }
}


@media only screen and (min-width: 700px) and (min-height: 700px) {
  /*.Korean {
    text-shadow: 2.25px 0px #e34242;
  }
  .American {
    text-shadow: 2.25px 0px #348dff;
  }*/

  .text-line {
    width: 55vw;
  }

  h1 {
    font-size: 44px;
  }
  h2 {
    font-size: 22px;
  }
  .overlay-text {
    font-size: 30px;
  }
}

@media only screen and (min-width: 900px) {
  /*.Korean {
    text-shadow: 2.5px 0px #e34242;
  }
  .American {
    text-shadow: 2.5px 0px #348dff;
  }*/

  .text-line {
    width: 50vw;
  }

  h1 {
    font-size: 50px;
  }
  h2 {
    font-size: 22px;
  }
  .overlay-text {
    font-size: 35px;
  }
}