@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Permanent+Marker&display=swap');

:root {
    --primary-color: #2563eb; 
    --off-white:#f3f4f6;
    --dark-gray: #6b7280;
}

/** body **/
.body{
    text-align: center;
}

/** input box **/

#input-box{
    
    border-radius: 0.5rem;
    border: 2px solid var(--primary-color);
    margin: auto;
    padding: 0.5rem;
}

/** check button **/

#is-tri-button{

    font-size: larger;
    border-radius: 0.5rem;
    border: 2px solid var(--primary-color);
    margin: auto;
    padding: 0.5rem;
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
}

.btn-check{

    font-size: larger;
    border-radius: 0.5rem;
    border: 2px solid var(--primary-color);
    margin: auto;
    padding: 0.5rem;
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
}

.center{
    text-align: center;
}

/** h2 **/

.h2{
    color: var(--primary-color);
}

/** container **/
.container{
    padding: 0rem 1rem;
}

.container-center{
    max-width: 600px;
    margin: auto;
}


/* links */

.link {
    box-sizing: border-box;
    text-decoration: none;
    padding: 0.5rem 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.link-primary {
    background-color: var(--primary-color);
    border-radius: 0.5rem;
    color: white;
}

.link-secondary {
    color: var(--primary-color);
    border-radius: 0.5rem;
    border: 1px solid var(--primary-color);
}

z
/** lists **/

.list-non-bullet {
    list-style: none;
}

.list-item-inline{
    display: inline;
    padding: 0rem 0.5rem;
    text-decoration: none;

}


/** navigation **/

.navigation{
    background-color: var(--primary-color);
    color: white;
    padding: 0.5rem;
    border-bottom-left-radius: 1rem;
}

.navigation .nav-brand{
 font-size: larger;
 font-weight: bold;
 font-family: 'Montserrat', sans-serif;
font-family: 'Permanent Marker', cursive;

 
}

.navigation .nav-pills{
    text-align: right;
}

.navigation .link{
    color: white;
}

.navigation .link-active{
    font-weight: bold;
}



/* footer */

.footer {
    background-color: var(--primary-color);
    padding: 2rem 1rem;
    text-align: center;
    color: white;
    border-top-right-radius: 1rem ;
}

.footer .link{
    color: white;
}

.footer .footer-header{
    font-weight: bold;
    font-size: large;
}

.footer ul{
    padding-inline-start: 0px;
}

/** Quiz **/

.quiz-main {
    margin: 2rem auto;
    width: 90%;
    text-align: center;
  }
  
  .question-container {
    width: 85%;
    margin: 1rem auto;
    font-size: larger;
    padding: 1rem 0;
  }
  
  .question-container p {
    margin: 1rem 0;
  }