@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");

html {
    box-sizing: border-box;
    background-image: url("../assets/Valley-10s-1488px.svg");
    background-size:cover;
    background-repeat: no-repeat;
}

body {
    margin: 0;
    font-family: "Montserrat", sans-serif;
}
h2{
    margin-top:1rem;
    font-size: 1.75rem;
    text-align: center;
}
.container{
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Loader class */
.hide{
    display: none;
}
.loader-container{
  height: 80vh;
  margin:0;
  justify-content: center;
  display:flex;
  align-items: center;
}
.loader {
    width: 50px;
    height: 50px;
    display: inline-block;
    position: relative;
    transform: rotate(45deg);
  }
  .loader::before {
    content: '';  
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
    top: -24px;
    animation: animloader 4s ease infinite;
  }
  .loader::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: rgba(175, 4, 72, 0.85);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    animation: animloader2 2s ease infinite;
  }
  
  @keyframes animloader {
    0% {
      box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
    }
    12% {
      box-shadow: 0 24px rgb(0, 0, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
    }
    25% {
      box-shadow: 0 24px rgb(0, 0, 0), 24prgb(0, 0, 0)x rgb(0, 0, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
    }
    37% {
      box-shadow: 0 24px rgb(0, 0, 0), 24px 24px rgb(0, 0, 0), 24prgb(0, 0, 0)x rgb(0, 0, 0), 0px 48px rgba(255, 255, 255, 0);
    }
    50% {
      box-shadow: 0 24px rgb(0, 0, 0), 24px 24px rgb(0, 0, 0), 24px 48px rgb(0, 0, 0), 0px 48px rgb(0, 0, 0);
    }
    62% {
      box-shadow: 0 24px rgba(255, 255, 255, 0.684), 24px 24px rgb(0, 0, 0), 24px 48px rgb(0, 0, 0), 0px 48px rgb(0, 0, 0);
    }
    75% {
      box-shadow: 0 24px rgba(255, 255, 255, 0.684), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgb(0, 0, 0), 0px 48px rgb(0, 0, 0);
    }
    87% {
      box-shadow: 0 24px rgba(255, 255, 255, 0.684), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgb(0, 0, 0);
    }
    100% {
      box-shadow: 0 24px rgba(255, 255, 255, 0.684), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(0, 0, 0, 0);
    }
  }
  
  @keyframes animloader2 {
    0% {
      transform: translate(0, 0) rotateX(0) rotateY(0);
    }
    25% {
      transform: translate(100%, 0) rotateX(0) rotateY(180deg);
    }
    50% {
      transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
    }
    75% {
      transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
    }
    100% {
      transform: translate(0, 0) rotateX(0) rotateY(360deg);
    }
  }
      
.load-wrap{
    display:block;
    justify-content: center;
    align-items: center;
    margin:20px
}
/* Quotes Container */
.quote-container {
    padding: 2rem;
    width: auto;
    max-width: 900px;
    border-radius: 12px;
    box-shadow: 1px 2px 5px 1px rgb(122, 40, 169);
    text-align: center;
}

.quotes {
    font-size: 2.75rem;
}

.long-quotes {
    font-size: 2rem;
}

.quote-author {
    margin-top: 1rem;
    display: block;
    text-align: right;
    font-style: italic;
    font-size: 1.7rem;
}

.fa-quote-left {
    font-size: 4rem;
}

.fa-quote-right {
    font-size: 4rem;
}

.button-group {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
}

.button-group button {
    color: white;
    background-color: black;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    padding: 0.4rem 0.8rem;
    outline: none;
    box-shadow: 0 0.3rem 2px rgba(255, 10, 125, 0.82);
}

.button-group button:hover {
    cursor: pointer;
    background-color: rgba(35, 18, 98, 0.15);
    color: rgb(111, 16, 60);
    border: none;
}

.button-group button:active {
    transform: translate(0, 0.3rem);
    box-shadow: 0 1px 2px 0px rgba(255, 10, 125, 0.82);
}
.links{
    display:flex;
    flex-direction: row;
}
.links h5{
    font-size: medium;
}
.links a{
    padding: .2rem;
    margin:1rem .5rem;
}
footer{
    display: flex;
    justify-content: space-around;
    font-size: 1rem;
}
footer a{
    text-decoration:none;
}

@media screen and (max-width: 1000px) {
    .quote-container {
        margin: auto 15px;
    }

    .quotes {
        font-size: 2.2rem;
    }

    .quote-author {
        font-size: 1.5rem;
    }

    .button-group button {
        font-size: 0.85rem;
    }
    .container{
      height: 100vh;
    }
}