@import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');

@font-face {
    font-family: "Noto Sans Regular";
    src: url(NotoSans-Regular.ttf);
}

@font-face {
    font-family: "Noto Sans Bold";
    src: url(NotoSans-Bold.ttf);
}

@font-face {
    font-family: "Noto Sans Thin";
    src: url(NotoSans-Thin.ttf);
}

/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
    border-right: 5px white solid;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #2faced;
    border-right: 5px white solid;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #FFB400;
}

html {
  font-size: 62.5%; /* 10px, for the sake of rem calculations */
  height: 100%;
}

body {
  background-color: #1d1d1d;
  height: 100%;
  font-size: 2rem;
  margin: 0px;
  padding: 0px;
  position: static;
  overflow-x: hidden;
}

#nav {
  color: #2faced;
  border-bottom: 0.3rem solid #2faced;
  font-family: "Noto Sans Bold";
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #1d1d1d;
  padding: 1rem;
  text-align: center;
  z-index: 999;
}

#nav a {
  border: 0.1rem solid #2faced;
  display: inline-block;
  letter-spacing: 0.1rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  min-width: 7rem;
}

#nav a:hover {
  border: 0.1rem solid #FFB400;
}

#main {
  background-color: #fff;
  font-family: "Noto Sans Regular";
  width: 110rem;
  margin: auto;
  min-height: 100vh;
  max-height: none;
  padding: 4rem;
  padding-top: 8rem;
  overflow: hidden;
}

#main img {
  max-width: 110rem;
}

a, a:visited {
  color: #2faced;
  text-decoration: none;
  font-family: "Noto Sans Bold";
}

a:hover {
  color: #FFB400;
}

#footer {
  color: #FFB400;
  border-top: 0.3rem solid #FFB400;
  font-family: "Noto Sans Bold";
  width: 100%;
  background-color: #1d1d1d;
  text-align: center;
  padding: 1rem;
}

#footer img {
  max-height: 3rem;
  margin-bottom: -1rem;
}

#contact-byline {
  border-bottom: 0.1rem solid #000;
  text-align: right;
  padding-bottom: 1rem;
}

#portrait {
  float: left;
  padding-right: 2rem;
  margin-left: -1rem;
  border-radius: 100%;
}

.banner {
  border-radius: 15%;
}

#contactme {
  background-color: #fff;
  margin: auto;
  width: 50rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
  border: 0.3rem solid #000;
}

b, h2 {
  font-family: "Noto Sans Bold";
  letter-spacing: 0.1rem;
}

#contactme b {
  border-bottom: 0.3rem solid #000;
  padding-bottom: 1rem;
  margin-bottom: -0.5rem;
  display: block;
}