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


:root{
  --primary-color : #3C3C3B;
  --secondary-color : #EBEBD3;
  --shadow-color : #949472;
}
body{
    background-color: var(--secondary-color);
    font-family: 'Faustina', serif;
    margin: 0px;
}


.center-div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 94vh;
    text-align: center;
}


.box-div{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
}
.hero-heading{
    text-decoration: underline #F77F00 5px;
}



.main-box{
  
  width: 100px;
  height: 100px;
  margin: .2rem .2rem .4rem;
  padding: 1rem;

  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  font-size: 1rem;
  font-weight: 600;
  text-align: center; 
  
  background-color: var(--primary-color);
  color:var(--secondary-color);
  border-radius: 30px;
  box-shadow:7px 11px 9px 2px var(--shadow-color);
}


.link{
    text-decoration: none;
}
hr{
    width: 85%;
    max-width: 600px;
}


.primary-btn{
    width: 100px;
    height: 50px;

    border-radius: 10px;
    font-size: larger;

    background-color: #ffffff;
    color: var(--primary-color);
    

}

.secondary-btn{
    display: block;
    margin: 2rem auto 2rem;
    width: 150px;
    height: 50px;
    font-size: larger;
    
    border-radius: 0px;
    background-color: var(--primary-color);
    color:var(--secondary-color)
}

.inputBox{
    max-width: max-content;
    width :100px;
    height :50px;
    margin:1rem;
}

.output{
    margin: auto;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 1rem;
    width: fit-content;
    border: 2px solid var(--primary-color);
    background-color: var(--secondary-color);
}

.radio-div{
    background-color: aquamarine;
}

.foot{
    display: block;
    margin: auto;
    text-align: center;

}
.foot-link{
    margin: 1rem;
    padding: 1rem;
    color: var(--primary-color);
    font-size: x-large;
}

.main-content{
    max-width:600px;
    width:100%;

}

.quiz-form{
    text-align: left;
}

.question{
    display: block;
}

.quiz-div{
    display: block;
    margin: 1.3rem;
    font-size: larger;
    padding: 1.5rem;
    border: 2px solid;
    background-color: var(--primary-color);
    color: var(--secondary-color);
}
.form-area{
    margin:1rem;
}
.area-label-div{
    display: flex;
    text-align: left;
}
.labelForarea{
    margin: 1rem;
    padding: 1rem;
    font-size: larger;
    
}

.area-calc-div{
    display: none;
}
.input-label{
    font-weight: bold;
    display: inline-block;
}
.out-label{
    font-weight: bold;
    display: inline-block;
}
.show-output{
    text-decoration: underline 5px #F77F00;
    display:inline-block;
}