.card{
    border-radius: 6px;
}
.card-header{
    padding: 8px;
}
.card-title{
    text-align: center;
}
h2{
    font-size: 115%;
}

footer div{
    text-align: center;
    background-color: grey;
    padding: 36px;
    margin: 2em 0 0 0;
}
/* Temporary - TODO: Remove when features are added */
.card input{
    display: none;
}
.form-switch, .form-check{
    padding: 0px;
}

.logo{
    margin-left: -6px !important;
}
#logo-dark{
    display:none;
}
#logo-light{
    display: block;
}

a{
    color: #6C00F8;
    text-decoration: none;
}
a:hover, a:visited{
   color: #3D00BB;
}
a:active{
   color: #27016F;
}


/* Dark Mode */
@media (prefers-color-scheme: dark){
   body{
       background-color:#211E20; 
       color: #EBEAEA;
   } 
   #logo-dark{
    display: block;
   }
   #logo-light{
      display: none;
   }
   .card-header{
        background-color: #373536;
   }
   .card{
       border-color: #373536;
       background-color: #211E20;
   }
   a{
        color:#C483FF;
   }
   a:hover, a:visited{
       color: #E3B0FF;
   }
   a:active{
       color: #F4E7FF;
   }
   footer div{
     background-color: #373536;  
   }
}


@media only screen and (max-width: 576px) {
    .le-fit{
        padding-right: 12px;
        padding-left: 12px;
    }
    #tagline{
        font-size:90%;
    }
}
@media only screen and (min-width: 576px) { 
    .le-fit{
        padding-right: 20px;
        padding-left: 20px;
    }    #tagline{
        font-size:90%;
    }
    
 }
 /* @media only screen and (min-width: 768px) { 
   
 } */
 @media only screen and (min-width: 992px) { 
    .le-fit{
        padding-right: 40px;
        padding-left: 40px;
    }
 }
 @media only screen and (min-width: 1200px) { 
    .le-fit{
        padding-right: 80px;
        padding-left: 80px;
    }
 }
 @media only screen and (min-width: 1400px) { 
    .le-fit{
        padding-right: 100px;
        padding-left: 100px;
     }
 }