/* this section formats the main styling of our page */
* {
  box-sizing: border-box;
  font-family: 'Montserrat';
}

body {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  /* height: 100%; */
  width: 100%;
}

/* this formats the header and subheaders, inputs, and buttons on the left section of the page.*/
header {
  background-color: #46424D;
  color: #FFF;
  margin-top: 0;
  height: 72px;
  width: 100%;
}

h1 {
  font-size: 23px;
  padding-top: 8px;
  text-align: center;
  text-transform: uppercase;
}

h4 {
  color: #fff;
  font-size: 18px;
}

.left-subheader {
  color: #CBC9CF;
}

.select {
  padding-left: 11%;
  padding-top: 30px;
}

/* main holds the hidden timer portion of the page as well as the right section that
you see upon loading the page, keeping sizing consistent  */
main {
  background-color: #2B2733;
  display: flex;
  flex-wrap: wrap;
  padding: 7px 2% 15px 2%;
  width: 65%;
}

.left-section {
  background-color: #46424D;
  border-radius: 8px;
  box-shadow: 8px 3px #26222D;
  padding-bottom: 57%;
  margin-bottom: 50px;
  margin-top: 5px;
  padding-bottom: 55%;
  width: 100%;
}

/* this section styles the buttons both default, seen upon loading,
and active when they have been clicked */
.buttons-div {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 0px 6% 0px 6%;
}

.btn {
  background-position: top;
  background-repeat: no-repeat;
  background-size: 18%;
  border-radius: 3px;
  font-size: 17px;
  height: 74px;
  padding-top: 30px;
  width: 21%;
}

.study-default {
  background-color: #46424D;
  background-image: url(./assets/study.svg);
  border: 2px solid #FFF;
  color: #FFF;
}

.study-active {
  background-color: #46424D;
  background-image: url(./assets/study-active.svg);
  border: 2px solid #B3FD78;
  color: #B3FD78;
}

.meditate-default {
  background-color: #46424D;
  background-image: url(./assets/meditate.svg);
  border: 2px solid #FFF;
  color: #FFF;
}

.meditate-active {
  background-color: #46424D;
  background-image: url(./assets/meditate-active.svg);
  border: 2px solid #C278FD;
  color: #C278FD;
}

.exercise-default {
  background-color: #46424D;
  background-image: url(./assets/exercise.svg);
  border: 2px solid #FFF;
  color: #FFF;
}

.exercise-active {
  background-color: #46424D;
  background-image: url(./assets/exercise-active.svg);
  border: 2px solid #FD8078;
  color: #FD8078;
}
.activity {
  display: flex;
  justify-content: flex-end;
  margin: 50px 11% 55px 0px;
  width: 100%;
}

#start-activity {
  background-color: #FFFFFF;
  border-radius: 3px;
  font-size: 14px;
  height: 40px;
  margin-top: 15px;
  text-align: center;
  text-transform: uppercase;
  width: 28%;
}

/* This formats the inputs seen upon loading */
.forms {
  display: flex;
  justify-content: center;
  width: 100%;
}

.inputs {
  display: flex;
  flex-wrap: wrap;
}

.all-form {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding-left: 11%;
}

.info {
  padding-top: 39px;
  width: 100%;
}

.times {
  padding-top: 50px;
  width: 50%;
}

.all-input {
  background-color: #46424D;
  border: none;
  border-bottom: 2px solid #CBC9CF;
  color: #FFF;
  font-size: 18px;
  height: 40px;
}

.big-input {
  width: 86%;
}

.small-input {
  width: 79%;
}

/* This styles and hides/unhides error message */
.error-message {
  color: #EFB7EC;
}

#error-category {
  margin-left: 115px;
}

.hidden-warning {
  display: none;
}

#warning-icon {
  height: 15px;
  margin-right: 8px;
}

/* This styles the hidden timer that is revealed upon filling all fields
and starting activity it includes the actual timer, the uplifting message,
and the button to start the timer and log activites */
.run-timer {
  align-items: center;
  background-color: #46424D;
  border-radius: 8px;
  box-shadow: 8px 3px #26222D;
  display: flex;
  flex-direction: column;
  margin: auto;
  margin-top: 5px;
  margin-bottom: 50px;
  padding-bottom: 50%;
  width: 100%;
}

h3 {
  color: #FFF;
  font-size: 24px;
  padding-top: 17px;
}

.all-timer {
  color: #FFF;
  font-size: 90px;
  font-weight: 400;
  margin-top: -30px;
}

.timer-button {
  background-color: #46424D;
  border: 4px solid #FFF;
  border-radius: 100%;
  color: #FFF;
  font-size: 26px;
  height: 250px;
  margin-bottom: 150px;
  margin-top: -50px;
  text-transform: uppercase;
  width: 235px;
}

.timer-button:focus {
  outline: 0;
}

.hidden {
  display: none;
}

.log {
  font-size: 18px;
  margin-bottom: 80px;
  text-transform: uppercase;
}

/* This styles the right side of the page that doesn't change until
logging activities */
.right_side {
  background-color: #2B2733;
  border-left: 4px solid #46424D;
  display: flex;
  flex-flow: column wrap;
  font-size: 16px;
  padding: 10px 35px 0px 35px;
  width: 35%;
}

.right-subheader {
  color: #CBC9CF;
  width: 100%;
}

.default-message {
  color: #CBC9CF;
  letter-spacing: 0px;
  line-height: 200%;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
}

/* This styles the cards created when an activity is logged */
.card {
  background-color: #46424D;
  border-radius: 4px;
  box-shadow: 8px 3px #26222D;
  color: #FFF;
  display: flex;
  flex-direction: column;
  height: 112px;
  margin: 4px;
  padding: 1px;
  padding-top: 8px;
}

.time {
  padding: 3px;
  width: 100%;
}

.reason {
  font-weight: bolder;
  padding: 3px;
}

.userInput {
  font-size: 13px;
  margin-top: 10px;
  padding: 3px;
}

.indicator {
  background-color: #FFF;
  float: right;
  height: 23px;
  margin-right: 8px;
  margin-top: 8px;
  width: 5px;
}

.hide-card {
  display: none;
}

@media screen and (max-width: 780px) {
  .buttons-div {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    background-image: none;
    font-size: 20px;
    height: 40px;
    margin: auto;
    margin-bottom: 10px;
    padding: 0px;
    width: 70%;
  }

  .card {
    background-color: #46424D;
    border-radius: 4px;
    box-shadow: 8px 3px #26222D;
    color: #FFF;
    display: flex;
    flex-direction: column;
    height: 60px;
    margin: 3px;
    padding: 1px;
    padding-top: 2px;
  }

  .time {
    font-size: 12px;
    padding: 2px;
    width: 100%;
  }

  .reason {
    font-size: 10px;
    font-weight: bolder;
    padding: 1px;
  }

  .userInput {
    font-size: 8px;
    margin-top: 5px;
    padding: 1px;
  }

  .indicator {
    background-color: #FFF;
    float: right;
    height: 17px;
    margin-right: 2px;
    margin-top: 2px;
    width: 4px;
  }

  .hide-card {
    display: none;
  }
}

@media screen and (max-width: 550px){
  body {
    flex-direction: column;
  }

  main {
    width: 100%;
  }

  .left-section {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .right_side {
    border-top: 4px solid #46424D;
    border-left: none;
    padding-bottom: 50px;
    width: 100%;
  }

  .run-timer {
    margin-bottom: 10px;
    padding-bottom: 10%;
  }

  .btn {
    background-image: none;
    font-size: 15px;
    height: 35px;
    margin-bottom: 10px;
    padding: 0px;
    width: 65%;
  }
}