body {
    background-image: url(5297078.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

/* Headings with text shadow (#6 Text shadow) */
h1 {
color: hsl(0, 87%, 47%);
text-shadow: 3px 3px 5px rgb(235, 231, 231), 3px 3px 5px rgb(239, 124, 9);
text-align: center;
}

h2 {
color: #b73a3a;
text-shadow: 10px 10px 10px rgb(177, 12, 72);
text-align: center;
}

/* #3 Border */
.border-example {
border: 8px solid #1570ac;
margin: 20px auto;
padding: 20px;
width: 80%;
color: #dc3e13;
}

/* #4 Rounded Borders */
.rounded-example {
border: 5px dotted #1580c7;
border-radius: 15px;
margin: 20px auto;
padding: 20px;
width: 50%;
color: hwb(0 9% 13%);
text-align: center;
}

/* #5 Graphic Border */
.graphic-border {
    width: 300px;
    margin: 20px auto;
    padding: 15px;
    border: 15px solid transparent;
    border-image: url(hacker.jpg);
}



/* #8 radial graient */
button { 
background-color: #071700;
min-height: 1vh;
display: flex;
justify-content: center;
align-items: center;
}
button {
    padding: 1em 2em;
    background-color: rgb(22, 0, 0);
    border: none;
    color: rgb(247, 249, 250);
    border-radius: 100px;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
}
button::after {
    content: '';
    position: absolute;
    height: 107%;
    width: 102%;
    border-radius: 1000px;
    background-image: linear-gradient(to bottom right, #e5b403, #ff2600);
    z-index: -1;
}
button:hover {
    z-index: 0;
    box-shadow: 40px 0 100px #00ff2f, 
    -40px 0 100px #17d617;
}

/* #9 Opacity */
.opacity-example {
width: 200px;
height: 200px;
background-color: rgb(137, 22, 22);
margin: 20px auto;
opacity: 0.5;
text-align: center;
}

/* #12 Image Map (styling image box) */
.map-example img {
width: 400px;
border: 2px solid rgb(247, 232, 232);
}