/*------------------------------
Root
------------------------------*/
:root {
  --blue: #38b8df;
  --blue-hover: #0090bc;
}

/*------------------------------
General
------------------------------*/

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

body,
html {
  width: 100%;
  height: 100%;
  user-select: none;
  overscroll-behavior: none;
  font-family: Neuemontreal;
  background-color: #232323;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
}

body::-webkit-scrollbar {
  display: none;
}

h1,
h2 {
  font-size: 4.4vh;
  font-weight: 500;
}

h4 {
  font-weight: 300;
  font-size: 1.3vh;
}

p {
  font-size: 2.1vh;
}

a {
  color: var(--blue);
  text-decoration: none;

  transition-property: padding;
  transition-duration: 340ms;
  transition-timing-function: ease;
}

a:hover {
  color: var(--blue-hover);
  font-style: italic;
  padding: 0 1.3vh 0 1.3vh;
}

/*------------------------------
Intro
------------------------------*/
.intro {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-content {
  width: 45%;
  height: 70%;
  display: flex;
  padding-top: 14.4vh;
  flex-direction: column;
  align-items: center;
  gap: 14.4vh;
}

/*------------------------------
Titles
------------------------------*/
.highlighter {
  text-align: center;
  color: #e0e0e0;
}

.title {
  text-align: center;
  color: var(--blue);
}

.brief {
  text-align: center;
  color: #e0e0e055;
}

.titles-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.4vh;
}

.copyright-text {
  text-align: center;
  color: #e0e0e0;
}

/*------------------------------
 
Fonts
 
------------------------------*/

@font-face {
  font-family: 'Neuemontreal';
  src: url('https://assets.codepen.io/4961275/NeueMontreal-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neuemontreal';
  src: url('https://assets.codepen.io/4961275/NeueMontreal-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}