@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@200;300;400;600&display=swap');

body{
    background-image: url('Plus.png');
background-size: cover;
background-position: center center;
min-height: 80vh;
background-repeat: no-repeat;
font-family: 'Nunito', sans-serif;
padding: 0;

}

h1{
    font-size: 4rem;
}

.fredoka, h1, h2, h3, h4, h5, h6 {
    font-family: 'Fredoka One', cursive;
}

.nunito, p, input, .btn{
font-family: 'Nunito', sans-serif;
}

.teal{
    color:#64DFDF;
}

.purple{
    color:#6546EC;
}

.yellow{
    color:#FFF48F;
}

.white{
    color: white;
}

.teal__bg{
    background-color:#64DFDF;
}

.teal_light__bg{
    background-color:#64DFDF;
}

.purple__bg{
    background-color:#6930C3;
}

.lilac__bg{
    background-color:#B980F0;
}

.yellow__bg{
    background-color:#FFF48F;
}

.tomato__bg{
    background-color: #ED8E7C;
}

.green__bg{
    background-color: #93D9A3;
}

.grey__bg{
    background-color: #EEEEEE;
}

nav{
    background-color: #6930C3;
    
}

.navbar-brand{
    font-family: 'Fredoka One', cursive;
    color: white;
    font-size: 2rem;
}

.nav-link{
    font-family:'Nunito', sans-serif;
    color: white;
    margin-top: 35px;
    font-size: 1rem;

    margin-right: 50px;
}
.nav-link:hover{
    color: #E1E8EB;
}
.rectangle{
    margin-top: 40px;
    padding: 20px;
    height: 250px;
    width: 800px;
    background-color: #FFF48F;
    border-radius: 0 500px 500px  0;
    max-width: 100%;
}
.main-home{
    font-size: 230%;
    margin-top: 10%;
    max-width: 100%;
}
.book{
    max-width: 100%;
}
.card{
    position: absolute;
width: 342px;
height: 197px;
left: 120px;
top: 542px;
transition: 1s ease-out;

z-index: 1;
max-width: 100%;
border-radius: 30px 30px 0 0;
background-color: #EEEEEE;
}
.card-body{
    font-size: .8rem;
}
.card:hover{
    top: 442px;
}
.card1{
    position: absolute;
    left: 520px;
}
.card2{
    position: absolute;
    left: 920px;
}
.rectangle2{
    position: relative;
    margin-top: 140px;
    height: 200px;
    width:100%;
    background-color: #B980F0;
    max-width: 100%;
    z-index: 2;
    
}
.file-upload {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    
  }
  

  .btn1{
      position: relative;
      top: 300px;
  }
  .file-upload__button {
    -webkit-appearance: none;
    background: #6930C3;
    border: 2px solid #6930C3;
    border-radius: 30px;
    outline: none;
    padding: 0.5em 0.8em;
    color: #FFF48F;
    font-size: 1em;
    font-family: "Quicksand", sans-serif;
    font-weight: bold;
    cursor: pointer;
    font-size: 2rem;
   position: relative;
   top: 230%;
   left: 10%;
   
    max-width: 100%;
    
  }
  .file-upload__button:hover {
    background: #B980F0;;
  }
  .file-upload__button2 {
    -webkit-appearance: none;
    background: #6930C3;
    border: 2px solid #6930C3;
    border-radius: 30px;
    outline: none;
    padding: 0.5em 0.8em;
    color: #ffffff;
    font-size: 1em;
    font-family: "Quicksand", sans-serif;
    font-weight: bold;
    cursor: pointer;
    font-size: xx-large;
    
 
    max-width: 100%;
    
  }
  .file-upload__button2:hover {
    background: #B980F0;;
  }
  
  
  
  
  
  .file-upload__label {
    position: relative;
    top: 370px;
    left: 190px;
    max-width: 100%;
    font-size: .95rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-family: "Quicksand", sans-serif;
    
  }
    
  @media only screen and (max-width: 1300px)  {

    .rectangle2{
        visibility: hidden;
        height: 0px;
        width: 0px;
    }
    .card{
        display: flex;
        justify-content: center;
        border-radius: 30px;
        height: 297px;
        position: relative;
        width: 202px;
        height: 197px;
        left: 10px;
        top: 50px;
        margin-bottom: 5%;
        padding-bottom: 0%;
        transition: .2s ease-in;
        
    }
    .card-body{
        width: 90%;
        font-size: .9rem;
    }
  
    .card:hover{
        position: relative;
        top: 60px;
        
    }
    
}
@media only screen and (max-width: 1124px)  {

    .rectangle2{
        visibility: hidden;
        height: 0px;
        width: 0px;
    }
    .card{
        display: flex;
        justify-content: center;
        border-radius: 30px;
        height: 297px;
        position: relative;
        width: 202px;
        height: 197px;
        left: 10px;
        top: 50px;
        margin-bottom: 5%;
        padding-bottom: 0%;
        transition: .2s ease-in;
        
    }
    .card-body{
        width: 90%;
        font-size: .7rem;
    }
  
    .card:hover{
        position: relative;
        top: 60px;
        
    }
    
}
@media only screen and (max-width: 1124px)  {

    .rectangle2{
        visibility: hidden;
        height: 0px;
        width: 0px;
    }
    .card{
        display: flex;
        justify-content: center;
        border-radius: 30px;
        height: 297px;
        position: relative;
        width: 202px;
        height: 197px;
        left: 10px;
        top: 50px;
        margin-bottom: 5%;
        padding-bottom: 0%;
        transition: .2s ease-in;
        
    }
    .card-body{
        width: 90%;
        font-size: .6rem;
    }
  
    .card:hover{
        position: relative;
        top: 60px;
        
    }
    
}


  @media only screen and (max-width: 770px)  {

    .rectangle2{
        visibility: hidden;
        height: 0px;
        width: 0px;
    }
    .card{
        display: flex;
        justify-content: center;
        border-radius: 30px;
        height: 197px;
        width: 1px;
       
        position: relative;
        
        left: 10px;
        top: 50px;
        margin-bottom: 5%;
        padding-bottom: 0%;
        transition: .2s ease-in;
        
    }
  .card-body{
      width: 110%;
      font-size: .3rem;
  }
  .card:hover{
    position: relative;
   top: 60px;
}

    
}
  
  @media only screen and (max-width: 425px)  {

    .rectangle2{
        visibility: hidden;
        height: 0px;
        width: 0px;
    }
    .card{
        display: flex;
        justify-content: center;
        border-radius: 30px;
        height: 297px;
        position: relative;
        width: 202px;
        height: 197px;
        left: 10px;
        top: 50px;
        margin-bottom: 5%;
        padding-bottom: 0%;
        transition: .2s ease-in;
        
    }
    .card-body{
        width: 90%;
        font-size: 1rem;
    }
  
    .card:hover{
        position: relative;
        top: 60px;
        
    }
    
}

@media only screen and (max-width: 425px) {
    .login__img img{
        width: 50%;
    }
}
.thankyou{
    background-image: url('/assets/bg.png');
}
.thanks{

position: absolute;
width: 40%;
height: 369px;
left: 839px;
top: 250px;

font-family: Nunito;
font-style: normal;
font-weight: normal;
font-size: 60px;
line-height: 1.5;

color: #000000;
}
.yay{
    position: relative;
    top: 90px;
    height: 600px;
    width: 800px;
}
.bt2{
    
    background: #B980F0;
    border: 2px solid #B980F0;
    border-radius: 30px;
    outline: none;
    padding: 0.5em 0.8em;
    color: #ffffff;
    font-size: 1em;
    font-family: "Quicksand", sans-serif;
    font-weight: bold;
    cursor: pointer;
    font-size: xx-large;
    position: relative;
    top: 200px;
    left: 35px;
    
}
.btn2{
    text-decoration: none;
    color: #ffffff;
}
.btn2:hover{
    color: #E1E8EB;
}
.remove{
    text-decoration: none;
    color: #E1E8EB;
}