@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@500&display=swap');

:root{
    --main-bg-color: rgb(195, 206, 226);
    --font1:  gt-super, Georgia, Cambria, "Times New Roman", Times, serif;
    --font2: 'Baloo Bhai 2', cursive;
}
.font1{
    font-family: var(--font1);
}
.font2{
    font-family: var(--font2);
}
.max-width-1{

    max-width: 80vw;
   
}
.max-width-2{

    max-width: 60vw ;
}

.m-auto{
 
    margin: auto;
}

.form-input{
    padding: 4px 9px;
    font-family: var(--font1);
    margin: 0px 5px;
    border: 2px solid black;
    border-radius: 4px;
    font-size: 12px;
}


.btn {
 
    
    padding: 1px 10px;
    font-family: var(--font1);
    /* margin: 0px 1px; */
    border: 2px solid black;
    border-radius: 4px;
    cursor: pointer;
  
    /* text-transform: uppercase; */
}

.navbar-light .navbar-nav .nav-link {
    color: black;
    font-weight: bolder;
}

.active, .btn:hover {

    color:white;
 background-color: var(--main-bg-color);

  
  }

  /* tooltip */
  .tooltip {
    position: relative;
    display: inline-block;
    /* border-bottom: 1px dotted black; If you want dots under the hoverable text */
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color:white;
    color:black;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    border: 2px solid black;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }