@import url('https://fonts.googleapis.com/css2?family=Explora&family=Indie+Flower&family=Josefin+Sans:wght@300&family=Lobster&family=Lobster+Two:ital@1&family=Pacifico&family=Shadows+Into+Light&family=Ubuntu+Condensed&display=swap');




body{
    display:grid;
    font-size: 32px;
    font-family: 'Indie Flower', cursive;
    color:rgb(44, 43, 43);
    place-items:center;
    background-color:rgb(109, 141, 199);
    font-weight:bold;
}



p{
    color: rgb(64, 44, 11);
}
p:hover{
    color: rgb(240, 251, 255);
}



.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333333;
    transition: opacity 5s, visibility 5s;
  }
  
  .loader--hidden {
    opacity: 0;
    visibility: hidden;
  }
  
  .loader::after {
    content: "";
    width: 75px;
    height: 75px;
    border: 15px solid #dddddd;
    border-top-color: #009578;
    border-radius: 50%;
    animation: loading 5s ease infinite;
  }
  
  @keyframes loading {
    from {
      transform: rotate(0turn);
    }
    to {
      transform: rotate(1turn);
    }
  }
  


  button{
    background-color:rgb(113, 155, 234);
    width:25vw;
    height:5vh;
    font-size: 19px;
    font-weight:bold;
    font-family: 'Josefin Sans', sans-serif;
}
button:hover{
    background-color: black;
    color:rgb(113, 155, 234);
}