/*everything*/
* {
    margin: 0;
    padding: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}

/*general text*/
body {
    padding: 0;
    margin: 0;
    color: #254f75;
    font-size: 1.2em;
}

/*TARSEILLES*/
h1 {
    padding: 2rem;
    text-align: center;
    background: #254f75;
    color: #fffce3;
    font-size: 2em;
    font-family: Georgia, Times, serif;
}

/*intro paragraph*/
#intro {
    padding: 3rem;
    font-family: Arial, Helvetica, sans-serif;
}

/*DESIGNED FOR MOBILE; TABLET*/
/*form div*/
.f {
    padding-left: 3rem;
    display: inline-block
}

/*input box*/
.box {
    font-size: 1em;
    color: #574e45;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px;
    background: #fffce3;
    border-radius: 28px;
    border: 1px solid;
}

/*current card*/
.answer {
    color: #574e45;
    font-family: Arial, Helvetica, sans-serif;
    padding: 3rem;
}

#response {
    padding-bottom: 0.75rem;
}

/*card meaning dropdown*/
#dropdown {
    font-size: 1em;
    color: #574e45;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px;
    background: #fffce3;
    border-radius: 28px;
    border: 1px solid;
}

#description {
    color: #574e45;
    padding-top: 3rem;
    padding-bottom: 3rem;
    width: 25rem;
    font-family: Arial, Helvetica, sans-serif;
}

/*History section*/
.old {
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 4.5rem;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

/*history label*/
#label {
    padding: 3rem;
    padding-bottom: 0;
    font-size: 1.8em;
    font-family: Georgia, Times, serif;
}

#line {
    border: none;
    background-color: #254f75;
    height: 0.08em;
}

/*history; cards that were pulled*/
#history {
    padding: 1.2rem;
    padding-left: 3rem;
    line-height: 1.8em;
    font-family: Arial, Helvetica, sans-serif;
}