/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

/* Credit to Pawel Grzybek, https://pawelgrzybek.com/the-css-reset-again/ for base reset */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  hanging-punctuation: first allow-end last;
}

/* Main styling below */
body {
  background-color: #1a1a1a;
  color: #eeeeee;

  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

a {
  color: #eeeeee;
}

p {
  margin-bottom: 1rem;
}

.huge-title {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;

  font-size: 4.5rem;
  line-height: 5rem;
  padding-bottom: 1rem;
}

.huge-subtitle {
  margin-bottom: 2.5rem;
  font-size: 1.5rem;

  color: #f0f0f0;
}

.huge-title-container {
  padding-left: 5vw;
}

h1, h2, h3, h4 {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.dot-text {
  font-family: "Doto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "ROND" 0;
}

.header {
  height: 2rem;
}

.footer {
  font-size: .8rem;
  margin-left: 3vw;
}

.container {
  margin-left: 5vw;
  margin-right: 8vw;
}

.home-container {
  font-size: 1.3rem;
  text-align: left;

  margin-bottom: 2rem;
}

.home-container>p:first-child {
  font-size: 1.3rem;
  text-align: center;

  margin-bottom: 2.5rem;
}

.home-container>p {
  margin-bottom: 2rem;
}

.email-block {
  font-family: "Doto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "ROND" 0;

  font-size: 1.7rem;
  font-weight: 900;

  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-left: .5rem;
  padding-right: .5rem;

  margin-bottom: 2rem;

  border: #f0f0f0 dashed 2px;
}

.email-block:hover {
  background-color: #333333;
}

.email-block>span {
  font-size: 2rem;
  font-weight: 600;

  margin-left: .5rem;

  vertical-align: bottom;
}