@import url('https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css');@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');@import url('https://fonts.cdnfonts.com/css/harry-potter');


.homeCard {
    height: 40vh; 
    border-radius: 4px; 
    background-color: #000 ; 
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3vh;
    flex-direction: column;
  }
.harry-font {
  font-family: 'Harry Potter', sans-serif;

}
.jumbotron {
    background-color: #000; 
    color: #FFFFFF;
    border-radius: 0;
    align-items: center;
    font-family: 'Harry Potter', sans-serif;
  }
.jumbotron_bottom {
    background-color: #000; 
    color:#FFFFFF;
    border-radius: 0;
    align-items: center;
    width: 100%;
  }
.btn {
    background-color: #6b63b5;
    color: #FFFFFF;
    border-radius: 25px;
    min-width: 10%;
  }
.btn-clear {
    background-color:	#D3D3D3;
    color: #FFFFFF;
    border-radius: 25px
  }
.secondary_btn {
    background-color: #faf6f0;
    min-width: 10%;
    border-radius: 25px;
    border:1px solid #091B34;
    padding:6px 12px;
  }
.secondary_btn:hover {
    color: #6B62B5;
  }
.navbar {
    background-color: #000; 
    color: #FFFFFF;
    padding: 0;
    font-family: 'Harry Potter', sans-serif;
  }
.nav-parent {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
   
  }
.nav-element {
    float: left;
    top: 50%;
    height: 100%;
  }
.nav-element .active{
    background-color: #A6CFD5;
    color: #091B34;
  }
.nav-element .active:hover{
    background-color: #6B62B5;
    color: white;
    cursor: pointer;
  }
.nav-element a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border: 3px 0px solid #73AD21;
  }
.nav-element:hover{
    background-color: #6B62B5;
    cursor: pointer;
  }
.btn-link {
    background-color: transparent;
    color: #FFFFFF;
    border: none; 
  }
.card {
    background-color: #000;
    color: #FFFFFF;
  }
.universal-side-margin{
    margin-left: 5%;
    margin-right: 5%;

  }
.universal-margin{
    margin: 5%;

  }
.universal-padding{
    padding: 2%;

  }
.img-card {
    width: 100%; 
    height: 40vh; 
    display: flex;
    justify-content: center; 
    align-items: center;
  }
.card-img-top.square-img {
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
  }
.card-body {
    height: 20vh; 
    overflow-wrap: break-word; 
  }
.quiz-card {
    background-color: #000;
    color: #FFFFFF;
    margin: 0.5%;
    margin-top: 20px;
    padding: 2%;
    min-height: 300px;
    
  }
.option-btn{
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    height: auto;
    padding: 3px;
    background-color: #fff;
    border-radius: 5px;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 10px;   
  }
.option-btn:hover:enabled{
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    height: auto;
    padding: 3px;
    background-color:#6B62B5;;
    color:#FFFFFF;
    border-radius: 5px;
    box-shadow: 0px 0px 4px 1px rgb(128, 123, 123);
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 10px;
    font-weight: 600;
  }
.checked{
      background-color: #6B62B5;
      font-weight: 600;
  }
progress {
  accent-color: #6B62B5;
}
.vertical-center {
  position: relative;
  transform: translateY(50%);
}
.search {
  width: 50%;
  padding:10px;

}
.horizontal-center-btn {
  width: 15%;
  margin: 10 auto;
}
.horizontal-align {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 5px;
}
.content-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
#search-addon:hover {
  cursor: pointer;
  background-color: lightgrey;
}
.text-color{
  color:#FFFFFF;
}
.floating-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}





@keyframes move-background {
    from {
          -webkit-transform: translate3d(0px, 0px, 0px);
      }
      to { 
          -webkit-transform: translate3d(1000px, 0px, 0px);
      }
  }
  @-webkit-keyframes move-background {
    from {
          -webkit-transform: translate3d(0px, 0px, 0px);
      }
      to { 
          -webkit-transform: translate3d(1000px, 0px, 0px);
      }
  }
  
  @-moz-keyframes move-background {    
      from {
          -webkit-transform: translate3d(0px, 0px, 0px);
      }
      to { 
          -webkit-transform: translate3d(1000px, 0px, 0px);
      }
  }
  
      @-webkit-keyframes move-background {
      from {
          -webkit-transform: translate3d(0px, 0px, 0px);
      }
      to { 
          -webkit-transform: translate3d(1000px, 0px, 0px);
      }
  }
  
  .background-container{
      position: fixed;
      top: 0;
      left:0;
      bottom: 0;
      right: 0;
      z-index: -1; 
  }
  
  .stars {
   background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
   position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: block;
        z-index: 0;
  }
  
  .twinkling{
      width:10000px;
      height: 100%;
      background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
      background-size: 1000px 1000px;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 2;
      
      -moz-animation:move-background 70s linear infinite;
    -ms-animation:move-background 70s linear infinite;
    -o-animation:move-background 70s linear infinite;
    -webkit-animation:move-background 70s linear infinite;
    animation:move-background 70s linear infinite;
      
  }
  
  .clouds{
      width:10000px;
      height: 100%;
      background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;
      background-size: 1000px 1000px;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 3;
  
     -moz-animation:move-background 50s linear infinite;
    -ms-animation:move-background 50s linear infinite;
    -o-animation:move-background 50s linear infinite;
    -webkit-animation:move-background 50s linear infinite;
    animation:move-background 50s linear infinite;
  }