:root {
  --sans:"inDter";
  --serif:"literata";

  --color1:#1c0f20; /**purpleblue**/
  --color2:#f7f0db; /**yellow**/

  overscroll-behavior: none;
  font-size:16px;
}
/*TO-DO:make website work on multiple screen sizes (no mobile tho!)*/
* {
  margin: 0px;
  padding: 0px;
  box-sizing:border-box;
}

html, body {
  width:100vw;
  height:100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  min-width:0;
  min-height:0;

  font-family:"inter";
}

body {
  padding:1rem;
  background-color:var(--color1);
  color:var(--color2);
}

h1 {
  font-size:2.5rem;

  color:var(--color2);
}

h2 {
  font-size:1.75rem;

  color:var(--color2);
}

h3 {
  font-size:1.5rem;

  color:var(--color2);
}

h4 {
  font-size:1.25rem;

  color:var(--color2);
}

p {
  text-indent:.5rem;
  font-family:var(--serif);
}

a {
  color:var(--color2);
  transition:.2s;
}

.link:hover {
  color:var(--color1);
}

.link {
  position:relative;
  font-size:1.5rem;
  width:fit-content;
  height:fit-content;
}

.link::before{
  content:'';
  position:absolute;

  top:0;
  left:0;
  width:0%;
  height:100%;
  z-index: -1;
  background: var(--color2);
  transition:.2s;
  transition-timing-function: ease-out;
}

.link:hover::before {
  width:100%;
}   

@font-face {
    font-family:"literata";
    src: url(./fonts/Literata-Variable.ttf) format('truetype');
    font-weight: 100 900;
    font-style:normal;
}

@font-face {
    font-family:"literata";
    src: url(./fonts/Literata-VariableItalic.ttf) format('truetype');
    font-weight: 100 900;
    font-style:italic;
}

@font-face {
  font-family:"inter";
  src: url(./fonts/Inter-VariableFont_opsz.ttf) format('truetype');
  font-weight: 100 900;
  font-style:normal;
}

@font-face {
  font-family:"inter";
  src: url(./fonts/Inter-Italic-VariableFont_opsz.ttf) format("truetype");
  font-weight: 100 900;
  font-style:italic;
}