.btn-dark {
    border-radius: 5px;
    border-color: white;
    border-style: solid;
    background-color: none;
}



#topics{
    overflow:visible;
    max-height: 1000px;
}
.offcanvas {
    position: fixed;
    bottom: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-color: black;
    background-clip: padding-box;
    outline: 0;
    transition: transform .3s ease-in-out;
}

.whitey {
    background-color: white;
    color:black;
}

.offcanvas-bottom {
    right: 0;
    left: 0;
    height: 80vh;
    max-height: 100%;
    border-top: 1px solid rgba(0,0,0,.2);
    transform: translateY(100%);
    
}

.row {
    --bs-gutter-x:  5px;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}


body {
    background-color: black!important;
    color:white!important;
    
    
}

.card {
    background-color: black;
    
}

.accordian {
    background-color: black;
    color:white;
}

a {
    text-decoration: none!important;
    color:white;
    padding: 1px 6px;
    
}

.nav-link:focus, .nav-link:hover {
    color: gray;
}

h3 {
    font-family: 'Eater', cursive!important;
}

li {
    font-family: 'Eater', cursive!important;
}

p.pt-5.mt-5.mb-4.display-6.lh-1.fw-bold {

    text-shadow:2px 2px 15px black, 1px 1px 15px black;
    font-family: 'Fjalla One', sans-serif!important;
}

.nav-item {
    font-family: 'Fjalla One', sans-serif!important;
    text-transform: capitalize!important;
}

a.navi {
text-decoration: none!important;
color:white;
padding: 1px 6px;
appearance: auto;
user-select: none;
white-space: pre;
align-items: flex-start;
text-align: center;
cursor: default;
box-sizing: border-box;
background-color: transparent;
color: -internal-light-dark(black, white);
padding: 1px 6px;
border-width: 2px;
border-style: none;
border-color: none!important;
border-image: initial;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
font-family: 'Fjalla One', sans-serif!important;
text-transform: capitalize!important;
}


.tag {
    border-radius: 10px;
    border-style: groove;
    border-color: white;
    padding: 5px;
    margin: 2px;
}


a.nav-link.text-dark {
    color:white!important;
    font-family: 'Fjalla One', sans-serif!important;
    text-transform: capitalize!important;
}

.accordion-button:not(.collapsed) {
    color: black;
    background-color: gray;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

.accordion-body {
    padding: 1rem 1.25rem;
    background-color: #201F1D;
    color:white;
}

.accordion-item {
    background-color: black;
    border: 1px solid rgba(0,0,0,.125);
    color:black;
}


.accordion-button {
    font-size: medium;
    font-weight: bold;
    font-style: oblique;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: white;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    font-family: 'Fjalla One', sans-serif!important;
    text-transform: capitalize!important;
}

a:hover {
    color: white!important;
}

@media only screen and (max-width: 600px) {
    input.nav-link  {
        font-size: 4vw;
        font-family: 'Eater', cursive!important;
    }
    .lh-1 {
        font-size: 5vw;
    }
  
    .lead {
      font-size: 3vw;
    }
    .tiny {
        font-size: 2vw;
      }
    .h5, h5 {
        font-size: 4vw !important;
        font-family: 'Fjalla One', sans-serif!important;
    }

    

    .card-title {
        font-size: 4vw;
        font-family: 'Fjalla One', sans-serif!important;
    }

    h5.card-title {
        font-family: 'Fjalla One', sans-serif!important;
        font-weight: bold;
    }

    .img-fluid {
        min-width: 100%!important;
    }

#custom-cards {
    max-height: 10%;
}



    .img-tiny {
        max-width:25px;
          }


          input.nav-link {
            appearance: auto;
            user-select: none;
            white-space: pre;
            align-items: flex-start;
            text-align: center;
            cursor: default;
            box-sizing: border-box;
            background-color: transparent;
            color: -internal-light-dark(black, white);
            padding: 1px 6px;
            border-width: 2px;
            border-style: none;
            border-color: none!important;
            border-image: initial;
            margin-left: 5px;
            margin-right: 5px;
            font-size: 2.5vw;
            font-family: 'Fjalla One', sans-serif!important;
            text-transform: capitalize!important;
           
        
        }

        a.navi {
            font-size: 2.5vw;
            text-decoration: none!important;
            color:white;
            padding: 1px 6px;
appearance: auto;
user-select: none;
white-space: pre;
align-items: flex-start;
text-align: center;
cursor: default;
box-sizing: border-box;
background-color: transparent;
color: -internal-light-dark(black, white);
padding: 1px 6px;
border-width: 2px;
border-style: none;
border-color: none!important;
border-image: initial;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    font-family: 'Fjalla One', sans-serif!important;
    text-transform: capitalize!important;
        }

        a {
            text-decoration: none!important;
            color:#0dcaf0;
            padding: 1px 6px;
            
        }


  }

input.nav-link {
    appearance: auto;
    user-select: none;
    white-space: pre;
    align-items: flex-start;
    text-align: center;
    cursor: default;
    box-sizing: border-box;
    background-color: transparent;
    color: -internal-light-dark(black, white);
    padding: 1px 6px;
    border-width: 2px;
    border-style: none;
    border-color: none!important;
    border-image: initial;
    margin-left: 5px;
    margin-right: 5px;
    font-family: 'Fjalla One', sans-serif!important;
    text-transform: capitalize!important;

}

div.row.flex-lg-row-reverse.align-items-center.g-5.py-5 {
    margin: 0!important;
    padding: 0!important;
}


.collapse {
    min-width: 100%;
}

div.card.card-body {
    min-width: 100%;
    background-color: black;
}

.rounded-start {
    max-height: 100%;
}

.col-md-8 {
    flex: 0 0 auto;
    width: 30%;
    
}

.col-md-4 {
    flex: 0 0 auto;
    width: 60%;
    
   
}


.reg {
    background-color: #0dcaf0;
    border:none!important;
    box-shadow: white 1px 2px;
}

.pw {
    background-color: #0998b4;
    border:none!important;
    box-shadow: white 1px 2px;
}

.dd {
    background-color: #066375;
    border:none!important;
    box-shadow: white 1px 2px;
}

.sd {
    background-color: #02252c;
    border:none!important;
    box-shadow: white 1px 2px;
}

.m {
    background-color: #000a0c;
    border:none!important;
    box-shadow: white 1px 2px;
}


.img-fluid {
    margin-bottom: 5px;
    
    
}

footer {
    background-color: black;
}


.theme {
    color: #0dcaf0;
    
}

.theme-button {
    background-color: #0dcaf0;
    width: 100%;
    font-size: calc(1vw + 1vh);
}

#timer {
   
    
    background-color: #0dcaf0;
  }
  
  #controls {
   
   
    background-color: #0dcaf0; 
  }
  
  #controls button {
   
    background-color: #0dcaf0;
  }


ul {
    list-style-type: none;
    padding-left: 0;
}

strong {
    color: #0dcaf0;
}

strong.notes {
    color:rgb(194, 115, 115);
}

p{
    font-size: small;
     font-weight: bold;
    font-family: 'Fjalla One', sans-serif!important;
    letter-spacing: 2px;
}

.users {

    width: 100%!important;
}

.input-group {
    min-width: 100%!important;
}

ol {

    background-color: #201F1D;
}

.list-group-item {
    background-color: #201F1D;
    color: white;
}


.alert-primary {
    color: black;
    background-color: #0dcaf0;
    border-color: #0dcaf0;
    font-weight: 800;
}

.btn-primary {
    background-color: #0dcaf0;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: black;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: black;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: black;
  }

  /* Handle */
::-webkit-scrollbar-thumb {
    background: black; 
    border-radius: 10px;
  }
  

  .img-tiny {
max-width:350px;
  }

  .img-fluid {
    max-width:45%;
    float: left;
    margin-right: .5%;
    margin-left: .5%;
    min-width: 45%;
  }
.form-control {
    margin: 2px;
}
  
button.special {
    appearance: auto;
    user-select: none;
    white-space: pre;
    align-items: flex-start;
    text-align: center;
    cursor: default;
    box-sizing: border-box;
    background-color: transparent;
    color: -internal-light-dark(black, white);
    padding: none;
    border-width: 2px;
    border-style: none;
    border-color: none!important;
    border-image: initial;
    margin-left: none;
    margin-right: none;
}