/* smores css file
   i lerned this from watching the hooman
   some of it doesnt work idk why */

body {
    background-color: #f5deb3; /* wheat color like hay */
    font-family: sans-serif;
    margin: 20px;
    /* the hooman said comic sans is "cringe" but i like it
       fine i will use regular sans-serif */
}

h1 {
    color: brown;
    /* i tried to make it bigger but then it was TOO big */
}

h2 {
    color: #8B4513;
    border-bottom: 2px dotted brown;
    /* i figured out borders! */
}

h3 {
    color: #A0522D;
}

a {
    color: green;
    /* green like lettuce. my favorite */
}

a:hover {
    color: darkgreen;
    /* the hooman showed me hover effects. cool */
}

img.me {
    max-width: 400px;
    width: 100%;
    border: 5px solid brown;
    /* i wanted rounded corners but i forgot how */
}

hr {
    border: none;
    border-top: 3px dashed #8B4513;
    margin: 20px 0;
    /* dashed lines are fun */
}

table {
    border-collapse: collapse;
    margin: 10px 0;
    /* the hooman helped me with this part
       tables are confusing */
}

td {
    padding: 8px;
    background-color: #FAEBD7;
}

button {
    background-color: orange;
    color: white;
    border: 3px solid brown;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    /* cursor pointer makes it look clickable
       i learned that from a youtube video */
}

button:hover {
    background-color: darkorange;
}

#wheek-output {
    font-size: 20px;
    color: brown;
    font-weight: bold;
    min-height: 30px;
}

marquee {
    color: #8B4513;
    font-weight: bold;
    padding: 5px;
    background-color: #FFE4B5;
    /* i know marquee is "deprecated" but it WORKS */
}

.footer {
    margin-top: 20px;
    background-color: #D2691E;
    color: white;
}

.hay {
    font-size: 30px;
    /* big hay */
}

ul {
    /* i didnt change this i just wanted a comment here */
}

small {
    color: gray;
}

/* i was going to add more but i got hungry */