@import url("https://fonts.googleapis.com/css?family=Comfortaa|Patua+One");

/*Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: #404040;
	font-family: "Comfortaa", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

/* Site */

* {
    /* CSS HSL */
    --chrome-yellow: hsla(39, 96%, 53%, 1);
    --jet: hsla(0, 0%, 20%, 1);
    --tart-orange: hsla(2, 91%, 61%, 1);
    --platinum: hsla(240, 2%, 92%, 1);
    --dark-jungle-green: hsla(178, 77%, 7%, 1);
    --steel-blue: hsla(206, 46%, 46%, 1);
}

body {
    margin: 1em;
    background-color: var(--platinum);
}

h1,h2,h3,h4,h5,h6 {
  font-family: "Patua One", serif;
  color: var(--jet);
  letter-spacing: 2px;
}

/* Journal Parent Container */

#journal-main-container {
    max-height: 95vh;
}


/* Journal Form */

.form-col {
    min-width: 20rem !important;
}

.field-span {
    min-width: 15rem;
}

button .btn,.btn-outline-dark {
    font-size: .9rem;
}

#form-mood--button, #journal-submit-btn {
    min-width: 15rem;
}

#journalEntry {
    height: 5rem;
}


/* Journal Form Instructor */

.journal-instructor {
    max-width: 15rem;
    background-color: var(--jet);
    color: var(--platinum);
    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s
}

.journal-instructor img {
    max-height: 2.5rem;
}

/* Journal Form Moods */

.form-dropdown--list {
    min-width: 15rem;
}

.moodStyle {
    max-width: 15rem;
}

    /* Excitied */
.mood-1--span {
    background-color: var(--chrome-yellow);
    color: var(--jet);
    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s
}

    /* Neutral */
.mood-2--span {
    background-color: var(--dark-jungle-green);
    color: var(--platinum);
    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s
}

    /* Overwheled */
.mood-3--span {
    background-color: var(--tart-orange);
    color: var(--platinum);
    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s
}

    /* Exahusted */
.mood-4--span {
    background-color: var(--jet);
    color: var(--platinum);
    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s
}

    /* Exhausted */
.mood-5--span {
    background-color: purple;
    color: var(--platinum);
    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s
}

/* Curious */
.mood-5--span {
    background-color: var(--steel-blue);
    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s
}

@-webkit-keyframes fadeIn {
    0% {opacity:0.5;}
    100% {opacity:1;}
}

/* Journal Notes */

.journal-notes-col {
    max-height: 95vh;
    overflow-x: hidden;
}

.journal-entry-card .journalEntry {
    min-height: 15rem;
    /* min-width: 15rem; */
    background-color: white;
}

.journal label {
    width: 100%;
    display: flex;
}

.submit {
    margin: 1em 0 ;
}