@font-face {
  font-family: "fredoka";
  font-style: normal;
  font-weight: 700;
  src:
    url(https://static.eldesenfrenocharanga.es/fonts/Fredoka-Bold.ttf) format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "fredoka-regular";
  font-style: normal;
  font-weight: 200;
  src:
    url(https://static.eldesenfrenocharanga.es/fonts/Fredoka-Regular.ttf) format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "inter";
  font-style: normal;
  font-weight: 800;
  src:
    url(https://static.eldesenfrenocharanga.es/fonts/inter.ttf) format("truetype");
  font-display: swap;
}

body {
  font-family: fredoka;
  margin: 0;
  padding: 0;
  background-color: #F1F1F1;
}

img,
source {
  width: 100%;
  max-height: 100%;
  border-radius: 50%;
}

#bodylogo {
  height: 10vh;
  margin: 5vh auto 0;
  display: block;
  width: 10vh;
}

#fuo {
  color: #1F1F1F;
  text-align: center;
}

.link {

  align-content: center;
  width: 40%;
  padding: 0 0 1vh 0;
  height: 6vh;
  margin: 1.5vh auto;
  display: block;
  font-size: small;
  text-align: center;
  border: solid 0.2vh #1F1F1F;
  color: #1F1F1F;
  border-radius: 1vh;
}

.link>p {
  margin: 1vh;
  padding: 0;
}

a {
  color: #1F1F1F;
  display: inline-block;
  text-decoration: none;
}
a:hover{color: #008cff;}
#wdiv,#leavear{ padding: 0;}
#wpp:hover{color: #2fef2e;}

@media(width < 1000px) {
  .link {
    width: 60%;

    margin-top: 3vh;
  }
}
@media(width <= 400px) {
  #fuo{font-size: 2vh; margin-top: 1vh;}
  .link {
    width: 80%;
  }
}
@media(prefers-color-scheme:dark) {
  body{
    background-color: #1F1F1F;
    color: #F1F1F1
  }
  #fuo,link,a,.link>p{
    color: #F1F1F1;
  }
.link{  border: solid 0.2vh #F1F1F1;}
a:hover{color: #008cff;}
#wdiv,#leavear{ padding: 0;}
#wpp:hover{color: #2fef2e;}
}