@font-face {
  font-family: "Montserrat";
  src: local("Montserrat"),url("./Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight:normal;
}
@font-face {
  font-family: "PlayfairDisplay";
  src: local("PlayfairDisplay"),url("./PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
  font-weight:normal;
}

* {
  margin: 0;
  padding: 0;
}
nav{ 
  padding: 10px 20px;
}
footer{
  padding: 10px 20px;
}

html{
  --text-color-normal: #0a244d;
  --text-color-light: #b5c7df;
  --text-color-nav: #D4F2D2;
  --menus: #1D201F;
  --hovering: rgb(102,194,210);
  --active: rgb(251,251,184);
  --borderRadius: 25px;
  --cards: rgb(250,226,90);
  --buttons: rgb(255, 253, 253);
  --formBackgrounds: rgb(45,42,50);
  --background: #F7F4EA;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'PlayfairDisplay',serif;
}
p,li,ul,a,button,input{
  font-family: 'Montserrat', 'sans-serif';
  font-weight: 800;
}
form{
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 10px;
}
form input, form select{
  width: 75%;
}

textarea {
  width: 75%;
}
body{
  background: var(--background)
}

@media (prefers-color-scheme: dark){
  html{
      --text-color-normal:hsl(210, 32%, 91%);
      --background: hsl(212, 16%, 16%);
      --text-color-richer: hsl(210, 50%, 72%);
      --text-color-highlight: hsl(25, 70%, 45%);
      --text-color-light:hsl(210,50%,72%);
      --cards: rgb(250,226,90);
  }
  body{
      background: var(--background);
      color: var(--text-color-normal);
  }
  img{
      opacity: .75;
      transition: opacity .5s ease-in-out;
  }
  img:hover{
      opacity:1;
  }
}