body{
    background-image: url("https://image.freepik.com/free-vector/calm-mountain-forest-wild-nature-scene-landscape-monochrome-illustration_7081-1822.jpg");
    background-position: center;
    /* background-size: cover; */
    /* background-repeat:repeat; */
    /* image-rendering: -webkit-optimize-contrast; */
}
   

#timer {
    border: solid;
    position: absolute;
    top: 0;
    right: 0;
}

input[type=radio]{
    border: 0px;
    width: 100%;
    height: 2em;
    cursor: pointer;
}

textarea{
    resize: none;
}

#tasks {
    border-style: outset;
    width: 56%;
    background-color: steelblue;
    height: 470px;
}

#taskHeader {
    display: flex;
    background-color: gainsboro;
    border-style: inherit;
    color: steelblue;
    justify-content: space-around;
    flex-basis: 100%;
}

#taskBox{
    display: grid;
    grid-template-columns: 21% 68% 9%;
    justify-items: flex-start;
    align-items: center;
    background-color: steelblue;
    font-size: 20px;
    
}

#answerContainer{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    
}


#startButton{
    font-size: 50px;
    background-color: green;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

#rouletteDiv {
    height: 100px;
}

#rouletteButton{
    font-size: 50px;
    background-color: red;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

p{
    font-size: 20px;
    background-color: gainsboro;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

h3 {
    font-size: 20px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}


#terms {
    border-style: outset;
    height: 225px;
    width: 40%;
    background-color: steelblue;
}

#termHeader {
    display: flex;
    background-color: gainsboro;
    border-style: inherit;
    color: steelblue;
    justify-content: space-around;
}

#choice{
    display: grid;
    height: 150px;
    width: 98%;
    justify-content: center;
    grid-template-columns: 33% 55%;
    justify-items: flex-start;
    align-items: center;
    font-size: 28px;
    font-weight: 550;
    color: silver;
    
}



#container {
    padding: 75px 155px;
    width: 70%;
    /* height: 90vh; */
    display: grid;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3%;
    justify-items: center;
    align-content: space-evenly;
    align-items: center;
    border-style: outset;
    background-color: slategrey;
    
}


#quotes{
    text-align: center;
    color: whitesmoke;
}

#headerContainer{
    background: slategrey;
    width: 66%;
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
    align-content: center;
    align-items: center;
    border-style: outset;
}

#header {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
    color: whitesmoke;
}

#tipBox{
    margin-bottom: 4%;
    display: flex;
    justify-content: center;
    align-content: center;
    background-color: slategray;
    font-size: 30px;
    color: whitesmoke;
}


#task {
    
    font-size: 2rem;
    display: flex;
    flex-direction: column;
    border-style: solid;
    border-color: white;
    
}

#family {
    font-size: large;
    height: 50px;
    width: 100px;
    cursor: pointer;
    background-color: white;
    color: steelblue;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
}

#family:hover{
    background-color: black;
    color: white;
    border-color: white;
}

#spiritual {
    font-size: large;
    height: 50px;
    width: 100px;
    cursor: pointer;
    background-color: white;
    color: steelblue;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
}

#spiritual:hover {
    background-color: black;
    color: white;
    border-color: white;
}

#financial {
    font-size: large;
    height: 50px;
    width: 100px;
    cursor: pointer;
    background-color: white;
    color: steelblue;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
}

#financial:hover {
    background-color: black;
    color: white;
    border-color: white;
}

#fitness {
    font-size: large;
    height: 50px;
    width: 100px;
    cursor: pointer;
    background-color: white;
    color: steelblue;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
}

#fitness:hover {
    background-color: black;
    color: white;
    border-color: white;
}

#career {
    font-size: large;
    height: 50px;
    width: 100px;
    cursor: pointer;
    background-color: white;
    color: steelblue;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
}

#career:hover {
    background-color: black;
    color: white;
    border-color: white;
}

#education {
    font-size: large;
    height: 50px;
    width: 100px;
    cursor: pointer;
    background-color: white;
    color: steelblue;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
}

#education:hover {
    background-color: black;
    color: white;
    border-color: white;
}


#social {
    font-size: large;
    height: 50px;
    width: 100px;
    cursor: pointer;
    background-color: white;
    color: steelblue;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
}

#rouletteBox{
    font-size: large;
    height: 50px;
    width: 100px;
    cursor: pointer;
    background-color: white;
    color: steelblue;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
    cursor: not-allowed;
}

#social:hover {
    background-color: black;
    color: white;
    border-color: white;
}

#roulette {
    font-size: large;
    height: 50px;
    width: 100px;
    cursor: pointer;
    
}


#short-term {
    font-size: large;
    height: 50px;
    width: 100px;
    cursor: pointer;
}

#middle-term {
    font-size: large;
    height: 50px;
    width: 100px;
    cursor: pointer;
}

#long-term {
    font-size: large;
    height: 50px;
    width: 100px;
    cursor: pointer;
}

span {
    color: gainsboro;
}

#familyAnswer {
    height: 43px;
    width: 95%;
    background-color: gainsboro;
    border-style: outset;

}

#spiritualAnswer {
    height: 43px;
    width: 95%;
    background-color: gainsboro;
    border-style: outset;

}

#financialAnswer{
    height: 43px;
    width: 95%;
    background-color: gainsboro;
    border-style: outset;

}

#fitnessAnswer {
    height: 43px;
    width: 95%;
    background-color: gainsboro;
    border-style: outset;

}

#careerAnswer {
    height: 43px;
    width: 95%;
    background-color: gainsboro;
    border-style: outset;

}

#educationAnswer {
    height: 43px;
    width: 95%;
    background-color: gainsboro;
    border-style: outset;

}

#socialAnswer {
    height: 43px;
    width: 95%;
    background-color: gainsboro;
    border-style: outset;
}

#rouletteBoxAnswer {
    height: 43px;
    width: 95%;
    background-color: gainsboro;
    border-style: outset;
}

.fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
  }
  
  .fa:hover {
    opacity: 0.7;
  }
  
  
  .fa-facebook {
    background: #3B5998;
    color: white;
  }
  
  .fa-twitter {
    background: #55ACEE;
    color: white;
  }

  .fa-instagram {
    background: #125688;
    color: white;
  }

  #threat {
      color: white;
  }