@font-face {
  font-family: "PPFragment";
  font-style: normal;
  font-weight: 400;
  src: url(./font/PPFragment-GlareRegular.otf);
}


:root {
  --web-bg-color: rgb(91, 8, 8);
  --second-color: rgb(155, 119, 119);
  --font-color: rgb(241, 229, 229); 
  --gutter: 3rem;
  --link-fontsize: 1.2rem;
}

body{
  background-color: var(--web-bg-color);
  padding-block-start: 3rem;
  padding-inline-start: 3rem;
  color: var(--font-color);
  font-family: "PPFragment", serif;
  
}

body::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 10rem;
  background-image: linear-gradient( rgba(174, 30, 30, 0) 20%, rgb(144, 12, 12)); ;
}

p{
  font-size: var(--link-fontsize);
  line-height: 2.4rem;
  max-inline-size: 40rem;
  margin-block-start: 0.4rem;
  color: var(--second-color);
}

h1{
  font-size: 2rem;
}

ul{
  margin-block-start: 4rem;
  margin-inline-start: var(--gutter);
}

li{
  margin-block: 1.6rem;
  font-size: 1.4rem;
}

li:hover{
  color: rgb(255, 119, 119);
  text-decoration: underline;
}

div.contact{
  font-size: 1.2rem;
  position: absolute;
  bottom: 3rem;
  z-index: 1;
}

@media (width < 500px){
  
  :root {
    --gutter: 0rem;
    --link-fontsize: 1rem;
  }

}