/* Global styling for the body element */
body {
    /* Add styles here to affect the entire page */
    background-image: url('../images/aurora-borealis.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* Styling for the div and header elements, affecting the width, margin, border, and background color */
div,
header {
    width: 80%;
    /* Sets the width to 80% of the parent container */
    margin: 20px auto;
    /* Centers the element horizontally and adds 20px margin to the top and bottom */
    border: 3px solid gold;
    /* Sets a 3px solid gold border */
    background: rgba(0, 0, 0, .7);
    /* Sets a semi-transparent black background */
    overflow: auto;
    padding: 15px;
}

/* Specific styling for all div elements, setting a minimum height */
div {
    min-height: 250px;
    /* Ensures the div is at least 250px tall */
}

/* Styling for h1 and h2 headings, controlling the text alignment and color */
h1,
h2 {
    text-align: center;
    /* Centers the text horizontally */
    color: gold;
    /* Sets the text color to gold */
}

/* Placeholder for the background styling, add your specific styles here */
#background {
    /* Add background-specific styles here */
    min-height: 500px;
    background-image: url('../images/tree.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* Placeholder for the image map styling, add your specific styles here */
#img-map img {
    /* Add image map-specific styles here */
/* the styles code I added here
broke the map, so I removed it
good to know though */
}

/* Placeholder for floating left, add your specific styles here */
#float-left img {
    /* Add floating left-specific styles here */
    float: left;
    margin: 20px;
    width: 40%;
}

#float-left{
    color: aqua;
}

/* Placeholder for floating right, add your specific styles here */
#float-right img {
    /* Add floating right-specific styles here */
    float: right;
    margin: 25px;
    width: 40%;
}

#float-right{
    color:gold;
    overflow: auto;
    padding: 15px;
}
/* Placeholder for picture tag, add your specific styles here */
#picture-tag img {
    /* Add picture tag-specific styles here */
    width: 50%;
    display: block;
    margin: 10px auto;
}

/* Placeholder for linked image, add your specific styles here */
#linked-image img {
    /* Add linked image-specific styles here */
    width: 50%;
    display: block;
    margin: 10px auto;
}

/* Placeholder for image as a link, add your specific styles here */
#img-as-link img {
    /* Add image as link-specific styles here */
    width: 50%;
    display: block;
    margin: 25px auto;
}

/* iframe specific styles for compatibility */
html::-webkit-scrollbar{
    width:5px;
}
html::-webkit-scrollbar-thumb{
    background:rgb(50,50,50);
    border-radius:5px;
}
html{
    width:100%;
}