body {
    font-family : ‘Century Gothic,’ Arial;
}

/* Header styling */

.header {
    overflow: hidden;
    background-color: #d3cdcd;
    padding: 20px 10px;
  }
  
  /* Style the header links */
  .header a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    line-height: 25px;
    border-radius: 4px;
  }
  
  /* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
  .header a.logo {
    font-size: 25px;
    font-weight: bold;
  }
  
  /* Change the background color on mouse-over */
  .header a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Float the link section to the right */
  .header-right {
    float: right;
  }
  
  /* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
  @media screen and (max-width: 500px) {
    .header a {
      float: none;
      display: block;
      text-align: left;
    }
    .header-right {
      float: none;
    }
  }

/* Main page css */

#main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(236, 236, 236);
    padding-top: 10px;
    /* width: 1200px; */
    height: 800px;
}

h3 {
    margin-left: 18px;
    margin-bottom: 0px;
}

textarea {
    resize: none;
}

.top {
    /* border: solid 5px red; */
    display: flex;
    flex-direction: row;
    width: 1200px;
    height: 55%;
    margin-bottom: 15px;
}

.habits {
    width: 70%;
    height: 100%;
    /* margin-right: 22%; */
}   

.habit-box {
    width: 100%;
    height: 70%;
    border: solid 1px;
    border-bottom: none;
    /* margin-right: 50%; */
}

.habit-thoughts {
    width: 100%;
    height: 30%;
    /* margin-right: 22%; */
    border: solid 1px black;

}

.chart {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    flex-direction: column;
}

#submit {
    margin-top: 5px;
    /* height: 15px; */

}

.textDiv {
    height: 80px;
    /* margin-left: 50px; */
    /* border: solid 2px red; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.timer {
    /* height: 100px;
    width: 400px; */
   border: solid 1px black;
   margin-left: 20px;
    
    
} 

#intervalTimer {
    /* margin-left: 10%; */
    margin-top: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* width: 400px;
    height: 180px; */
    /* margin-left: -43%; */
    /* margin-top: 8%;  */
    
}
 #CountDown{

    /* width: 600px; */
    height: 180px;
    align-items: center;
 
} 
.bottom {
    width: 1200px;
    height: 400px;
    /* border: solid 5px purple; */
    display: flex;
    flex-direction: row;


}

.daily {
    width: 33%;
    border: solid 1px black;
    background-color:white;
    margin-right: 15px;
    /* margin-top: 7%; */
}

.my-score {
    width: 33%;
    border: solid 1px black;
    margin-right: 15px;
    /* margin-top:7%; */
}

.currentScore {
    font-size: 20px;
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;

}

/* .leaderboard {
    width: 33%;
    border: solid 1px black;
    margin-right: 15px;
     margin-top:7%; 
} */

.listings {
    /* border: solid 3px blue; */
    padding-right: 7px;
}

.topTen {
    font-size: 20px;
    word-wrap: break-word;
}

.scratch {
    width: 33%;
    border: solid 1px black;
    /* margin-top:7%; */
    

}

.scratchText {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: solid 2px red; */
    height: 85%;
}

.scratchArea {
    margin-top: 10px;
    height: 95%;
    width: 90%;

}

/* Login and Registration page css */

#loginMain {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#loginInfo {
    border: solid 2px black;
    width: 250px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 75px;
}

.loginLabel {
    margin: 0px;
    padding-bottom: 5px;
}

.emailDiv, .passwordDiv, .nameDiv {
    padding-bottom: 10px;
}

#createError, #loginError {
    /* width: 200px;
    height: 50px; */
    border: solid 2px black;
    margin-top: 10px;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    display: none;
}

#createMessage, #loginMessage {
    padding: 3px;
    margin: 0px;
}

.buttons{
    text-align: center;
    /* margin-right: 30px; */
    margin-top: 30px; 
    
}

#start, #stop, #restart, .btn {
    padding: 10px 25px;
    font-size: 15px; 
    font-family: 'Century Gothic', Arial;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    outline: none;
    color: #fff;
    background-color: #4CAF50;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
    margin-top: 5px;  
}
table {
    border-collapse: collapse;
    box-shadow: 0px 0px 10px black;
}
table th {
    text-align: left;
    background-color: #009789;
    color: #FFF;
    padding: 4px 30px 4px 8px;
}

td {
    border: 1px solid #e3e3e3;
    padding: 8px 8px;
}
tr:hover {
    background-color: black;
    color:white;
}

label input {
    display: none; /* Hide the default checkbox */
  }
  
  /* Style the artificial checkbox */
  label span {
    height: 12.5px;
    width: 12.5px;
    border: 1px solid rgb(236, 236, 236);;
    display: inline-block;
    position: relative;
    color: green
  }
  
  /* Style its checked state...with a ticked icon */
  [type=checkbox]:checked + span:before {
    content:'\2714' ;
    position: absolute;
    top: -5px;
    left: 0;
    width: 30px;
  }

  .content table {
      text-align:center

  }



#task_1{
    width: 95%;
    padding: 15px;
    margin-top: 10px;
    margin-left: 5px;
    border-left-color: blue;
    display: inline-block;
    border: 1px hidden #ccc;
    box-sizing: border-box;
}

#task_1:hover {border-width: 3px}
#task_1:hover {
    border-left: solid
}
#task_2{
    width: 95%;
    padding: 15px;
    margin-top: -15px;
    margin-left: 5px;
    display: inline-block;
    border: 1px hidden #ccc;
    box-sizing: border-box;
  }

  #task_2:hover {border-width: 3px}
  #task_2:hover {
    border-left: solid
}
  #task_3{
    width: 95%;
    padding: 15px;
    margin-top: -15px;
    margin-left: 5px;
    display: inline-block;
    border: 1px hidden #ccc;
    box-sizing: border-box;
  }

  #task_3:hover {border-width: 3px}
  #task_3:hover {
    border-left: solid
}

  #task_4{
    width: 95%;
    padding: 15px;
    margin-top: -15px;
    margin-left: 5px;
    display: inline-block;
    font-size = 24px;
    border: 1px hidden #ccc;
    box-sizing: border-box;
  }
  #task_4:hover {border-width: 3px}
    #task_4:hover {
    border-left: solid
}

  #task_5{
    width: 95%;
    padding: 15px;
    margin-top: -15px;
    margin-left: 5px;
    display: inline-block;
    font-size = 24px;
    border: 1px hidden #ccc;
    box-sizing: border-box;
  }

  #task_5:hover {border-width: 3px}
    #task_5:hover {
    border-left: solid;
}