@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  text-decoration: none;
  list-style: none;
}

:root{
  --color-background: #F9FAFB;
  /* --color-background: #FDF2F8; */
  --grey-border: #E5E7EB;
  --color-heading: #1F2A37;
  --color-subheading: #434a54;
  --success-25: #F6FEF9;
  --success-600: #039855;
  --success-700: #048249;
  --error-50: #FEF3F2;
  --error-600: #D92D20;
  --color-primary: #1E53EE;
  --color-primary-hover: #1a48d2;
}


/* ---------Navigation--------- */

nav{
  background-color: #fff;
  max-width: 1440px;
  padding: 1rem 2rem;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav h1, p{
  color: var(--color-subheading);
}

.link-highlight{
  text-decoration: underline;
  color: var(--color-primary);
}

.divider-line{
  height: 1px;
  background-color: var(--grey-border);
}


/* ---------Container--------- */

.container{
  background-color: var(--color-background);
  padding: 2rem;
}

.heading{
  margin: 1rem auto;
  max-width: 80%;
}

.heading .title{
  font-size: 32px;
  color: var(--color-heading);
  font-weight: 600;
  text-align: center;
}


.heading .subtitle{
  padding: 0.5rem 0;
  font-size: 18px;
  color: var(--color-subheading);
  font-weight: 400;
  max-width: 60%;
  line-height: 1.5;
  margin: auto;
  text-align: center;
}

@media screen and (max-width: 780px){
.heading .subtitle{
  max-width: 80%;
}

}

.result {
  text-align: center;
  max-width: 30%;
  margin: 2rem auto;
  border-radius: 16px;
  font-size: 20px;
  font-weight: 700;
  background-color: #fff;
  border: 1px solid var(--grey-border);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.result p:first-child{
  padding: 1.2rem 1rem;
  font-weight: 600;
  font-size: 20px;
}


.reload button{
  /* background-color: var(--success-600); */
  background: rgb(71,139,255);
  background: linear-gradient(200deg, rgba(71,139,255,1) 0%, rgba(30,83,238,1) 100%);
  border: transparent;
  border-radius: 0px 0px 16px 16px;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 20px;
  padding: 1.2rem 1rem;
  width: 100%;
  transition: background-color 0.2s;
}

.reload button:hover{
  background: linear-gradient(90deg, rgba(71,139,255,1) 0%, rgba(30,83,238,1) 100%);

}


.hide{
  display: none;

}


/* ------------- Questions Div ----------- */

.question{
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;  
  /* box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; */
  background-color: #fff;
  border: 1px solid var(--grey-border);
  border-radius: 16px;
  margin: 1.35rem auto;
  max-width: 60%;
  padding: 1.5rem 2rem;
}


.question > *{
  font-size: 18px;
  color: var(--color-heading);

}

.question p{
  margin-bottom: 16px;
  /* color: var(--color-heading); */
}

@media screen and (max-width:1136px){
  .question{
    max-width: 80%;
  }
}


@media screen and (max-width:728px){
  .question{
    max-width: 90%;
  }
}

.option{
  display: flex;
  align-items: flex-start;
  align-items: center;
  margin-left: 4px;
  padding: 0.45rem 0;
}

/* -------Styling input buttons ------- */

input[type=radio]{
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

label{
   font-size: 18px;
  color: var(--color-subheading);
}

.submit{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: auto;
  
}


input[type=submit]{
  background: rgb(71,139,255);
  background: linear-gradient(200deg, rgba(71,139,255,1) 0%, rgba(30,83,238,1) 100%);
  border: transparent;
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  padding: 1.4rem 5rem;
  transition: background-color 0.2s;
}

input[type=submit]:hover{
  background: linear-gradient(90deg, rgba(71,139,255,1) 0%, rgba(30,83,238,1) 100%);

}


/* ------Validation Colors --------- */

.correct{
  background-color: var(--success-25);
  border: 1.5px solid var(--success-600);
}

.wrong{
  background-color: var(--error-50);
  border: 1.5px solid var(--error-600);
}