* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-image: url("https://2.bp.blogspot.com/-C1lzrGQdHkM/T78dxRvrmBI/AAAAAAAAEHw/dYWj8zg6TIg/s1600/Hdhut.blogspot.com+%252835%2529.jpg");
}
main {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: #ffdd00; 
}

.dragon {
    font-size: 10rem;
    border-radius: 25%;
    box-shadow: 5px 2px;
}

.fire {
    filter: hue-rotate(300deg);
    /* transform: scaleX(-1); */
}

.ice {
    filter: hue-rotate(3.142rad);
}

.gold {
    filter: hue-rotate(-20deg);
}

.ghost {
    filter: grayscale(100%) opacity(50%);
}

.chaos {
    filter: invert(100%);
}


nav {
    display: flex;
    justify-content: space-evenly;
    border-bottom: 4mm ridge #ffdd001f;
    font-size: 1.5rem;
}

button {
    background-color: #ffdd00;
    border: none;
    border-radius: 15%;
    font-size: 16px;
    padding: 1.75px;
    box-shadow: 0px 0px 2px 2px rgb(0,0,0);
    min-height: 1rem;
    min-width: 3rem;

}

.directive {
    position: absolute;
    left: 34%;
}

h2 {
    color: #ffdd00;
    font-size: 1rem;
}
p {
    font-size: 2.5rem;
    color: #ffdd00;
    margin: 1rem 1rem;
}

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