@import url("https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css");
@import url("");
@font-face {
  font-family: amsterdam;
  src: url("../font/Amsterdam 400.ttf");
}
@font-face {
  font-family: code;
  src: url("../font/CODE Light.otf");
}
@font-face {
  font-family: yumincho;
  src: url("../font/yumin.ttf");
}
*::-webkit-backdrop {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}
*, *::backdrop, *::after {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  background-color: rgba(20, 21, 27, 0.9490196078);
  color: white;
}

#particles {
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: -9999;
  pointer-events: none;
}

header {
  top: 0;
  margin-top: 2.5em;
  position: absolute;
  width: 100%;
}
header .container {
  margin-left: 1em;
  margin-right: 1em;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}
header .container ul {
  list-style-type: none;
}
header .container .header-logo {
  flex: 50%;
}
header .container a {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}
header .container a h1 {
  font-family: amsterdam;
  font-size: 1.2em;
}
header .container a img {
  filter: brightness(100);
  height: 52px;
  margin-left: 0.2em;
}
header .container nav {
  flex: 50%;
  display: flex;
  justify-content: center;
}
header .container nav li {
  float: left;
  margin-left: 0.5em;
  margin-right: 0.5em;
}
header .container nav li a {
  color: rgb(149, 162, 185);
  transition: color 1s ease;
  font-family: hack;
  padding-top: 1.2em;
}
header .container nav li a:hover {
  color: white;
}
header .container a {
  text-decoration: none;
  color: white;
}

.hero {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  text-align: center;
  height: 100vh;
}
.hero .container {
  margin-top: 15em;
  margin-left: 5em;
  margin-right: 5em;
  line-height: 2.5em;
}
.hero .prof-img {
  height: 200px;
  width: 200px;
  border: 1em solid;
  border-color: rgba(134, 134, 134, 0.1);
  border-radius: 50%;
  pointer-events: none;
}
.hero h1 {
  font-family: yumincho;
  font-size: 35px;
}
.hero p {
  font-family: code;
  letter-spacing: 0.3em;
}
.hero .hero-links {
  font-size: 25px;
}
.hero ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
}
.hero a {
  color: rgb(149, 162, 185);
  transition: color 1s ease;
  margin-left: 0.5em;
  margin-right: 0.5em;
}
.hero a:hover {
  color: white;
}
.hero a img {
  transition: filter 1s ease;
  filter: brightness(0.8);
}
.hero a img:hover {
  filter: brightness(1.2);
}

.about {
  height: 100%;
}
.about .container {
  text-align: center;
  padding-left: 5em;
  padding-right: 5em;
  padding-top: 5em;
  padding-bottom: 5em;
}
.about .container h2, .about .container h3, .about .container p {
  padding: 0.5em;
}
.about .container h2 {
  font-family: code;
  font-size: 30px;
  letter-spacing: 0.2em;
}
.about .container h3 {
  font-family: hack;
}
.about .container p {
  font-family: code;
  letter-spacing: 0.2em;
}
.about .container a {
  color: rgb(149, 162, 185);
  transition: color 1s ease;
  margin-left: 0.5em;
  margin-right: 0.5em;
  text-decoration: none;
}
.about .container a:hover {
  color: white;
}

footer {
  background-color: rgba(240, 248, 255, 0.13);
  text-align: center;
}

.loader {
  font-family: code;
  letter-spacing: 0.3em;
}
.loader:after {
  content: "_";
}/*# sourceMappingURL=style.css.map */