body {
    background-color: black;
    font-family: 'Syne Mono', monospace;
    color: white;
}

a {
    color: white;
    text-decoration: none;
}

a:hover {
    color: rgb(249, 147, 168);
    text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

#flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

#crochet-projects {
    display: flex;
    flex-direction: row;

}

#mushroom-box {
    width: 500px;
    height: 500px;
    position: relative;
    display: flex;
    flex-direction: column;
}

#mushroom {
    border: solid 10px #898989;
    box-shadow: 5px 5px 10px #9eff81;
    border-radius: 5px;
    border-style: outset;
    width: 50%;
}

#mushroom-cutout {
    width: 250px;
    height: 300px;
    position: absolute;
    top: 100px;
    left: 150px;   
    rotate: 15deg; 
}

#creeper-hat-box {
    max-width: 600px;
    display: flex;
    flex-direction: column;
}

#creeper-hat {
    border: solid 10px #898989;
    border-radius: 5px;
    border-style: outset;
    width: 50%;
    box-shadow: 5px 5px 10px #9eff81;
}

#creeper-hat:hover {
    content: url("images/creeperhat.gif");
}

@media only screen and (max-width: 800px) {

    #flex {
        flex-direction: column;
        align-items: flex-start;
    }

    #crochet-projects {
        flex-direction: column;
        align-items: flex-start;
    }

    #mushroom-box, #creeper-hat-box {
        width: 100%;
        max-width: 250px;
    }

    #mushroom, #creeper-hat {
        width: 100%;
    }
}