.body-basic, body {
  margin: 0em;
  background-color: #333333;
  font-family: "Gentium Plus", serif;
  font-style: normal;
  height: 100%;
}

html {
  height: 100%;
}

div.site-logo {
  margin: 4em auto auto 4em;
  position: absolute;
}
div.site-logo img {
  width: 50px;
  height: 50px;
}

div.self-introduce {
  left: 50%;
  top: 40%;
  position: absolute;
  margin: auto;
  transform: translateX(-50%);
  display: block;
  overflow: auto;
}

div.main-text {
  font-size: 5em;
  color: #D8D8D8;
  text-align: center;
  margin: auto;
}
div.main-text p {
  margin: 0;
}

div.sub-text1 {
  font-size: 1em;
  color: #7A7A7A;
  text-align: left;
  margin-left: 5em;
  margin-bottom: 0.5em;
}
div.sub-text1 p {
  margin: 0;
}

div.sub-text2 {
  font-size: 1em;
  color: #7A7A7A;
  text-align: left;
  margin-left: 15em;
  margin-top: 0.5em;
}
div.sub-text2 p {
  line-height: 1.5em;
  margin: 0;
}

div.social-account-logos {
  margin: auto auto auto 5em;
  position: absolute;
  top: 65%;
}
div.social-account-logos img {
  width: 20px;
  height: 20px;
}

div.social-logo {
  margin-bottom: 1.5em;
}

footer.copyright {
  margin: 0, 0, 1em, 0;
  position: fixed;
  background-color: #333333;
  width: 100%;
  line-height: 1.5em;
  font-size: 0.7em;
  text-align: center;
  bottom: 0;
  color: #D8D8D8;
  border-top: 1px solid #D8D8D8;
}

@media only screen and (max-width: 600px) {
  div.main-text {
    font-size: 2.5em;
  }

  div.sub-text1 {
    font-size: 0.7em;
    margin-left: 4.5em;
  }

  div.sub-text2 {
    font-size: 0.7em;
    margin-left: 12em;
  }

  div.social-account-logos {
    margin: auto auto auto 2em;
    top: 70%;
  }
  div.social-account-logos img {
    width: 15px;
    height: 15px;
  }

  div.site-logo {
    margin: 1.5em auto auto 1.5em;
  }
  div.site-logo img {
    width: 40px;
    height: 40px;
  }
}
@media only screen and (max-height: 740px) {
  div.social-account-logos {
    top: 65%;
  }
}