body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #FFF6E0;
    overflow: hidden;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-image: url('images/DSCF8884.JPG');
}

.content {
    width: 90%;
    height: 90%;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.5s ease;
    text-shadow: -52px 15px 10px rgba(0,0,0,0.8);
}

.content.show {
    opacity: 1;
}

#random-block { 
    position: fixed;
    bottom: 10px;
    left: 10px;
}

#random-block-img {
    width: 160px;
    height: 90px;
    object-fit: cover;
}

#morning-dove-images {
    position: fixed;
    bottom: 10px;
    left: 10px;
}

#morning-dove-image {
    width: 576px;
    height: 324px;
    object-fit: cover;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}
.fade-out {
    opacity: 0;
}
.fade-in {
    opacity: 1;
}

.corner-modal {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 576px;
    height: 324px;
    border: 2px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    z-index: 1000;
    background-color: white;
}

.corner-modal iframe {
    width: 100%;
    height: 100%;
}

#name-text {
    position: absolute; /* Allows positioning relative to the nearest positioned ancestor */
    top: 100px; /* Align to the top of the page */
    right: 200px; /* Align to the right of the page */
    padding: 4px; /* Optional: Add some padding for better spacing */
    background-color: #FFF6E0; /* Optional: Add a background color with some opacity */
    border-radius: 5px; /* Optional: Rounded corners for the background */
    z-index: 1000; /* Ensure it appears above other content */
    text-align: right;
}

#projects-text {
    position: absolute; /* Allows positioning relative to the nearest positioned ancestor */
    bottom: 42%; /* Align to the top of the page */
    right: 41%; /* Align to the right of the page */
    transform: translate(-50%, -50%);
    padding: 4px; /* Optional: Add some padding for better spacing */
    background-color: rgb(0,0,0,0); /* Optional: Add a background color with some opacity */
    border-radius: 5px; /* Optional: Rounded corners for the background */
    z-index: 1000; /* Ensure it appears above other content */
    text-align: left;
}

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

a.button {
    color: black;
}

a.visited {
    color: black;
    text-decoration: none;
}

a.hover {
    color: black;
}
.bandcamp-link {
    display: none;
}

/* Style the video: 100% width and height to cover the entire window */
/* #myVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

/* Media query for mobile devices */
@media (max-width: 1024px) {
    /* Show name-text and projects-text on mobile devices */
    #name-text,
    #projects-text,
    #morning-dove-images {
        display: block;
    }

    #name-text {
        position: absolute; /* Allows positioning relative to the nearest positioned ancestor */
        top: 50px; /* Align to the top of the page */
        right: 50px; /* Align to the right of the page */
        padding: 4px; /* Optional: Add some padding for better spacing */
        background-color: #FFF6E0; /* Optional: Add a background color with some opacity */
        border-radius: 5px; /* Optional: Rounded corners for the background */
        z-index: 1000; /* Ensure it appears above other content */
        text-align: right;
    }

    #morning-dove-images {
        position: fixed;
        bottom: 250px;
        left: 50px;    
        justify-content: center;
    }

    #morning-dove-image {
        width: 288px;
        height: 162px;
        object-fit: cover;
        opacity: 1;
        transition: opacity 1s ease-in-out;
    }
    .fade-out {
        opacity: 0;
    }
    .fade-in {
        opacity: 1;
    }

    
    #projects-text {
        position: absolute; /* Allows positioning relative to the nearest positioned ancestor */
        bottom: 31%; /* Align to the top of the page */
        right: 29%; /* Align to the right of the page */
        transform: translate(-50%, -50%);
        padding: 4px; /* Optional: Add some padding for better spacing */
        background-color: rgb(0,0,0,0); /* Optional: Add a background color with some opacity */
        border-radius: 5px; /* Optional: Rounded corners for the background */
        z-index: 1000; /* Ensure it appears above other content */
        text-align: left;
        color: rgb(0,0,0,0.1);
    }

    .bandcamp-link {
        display: block;
    }

    #bandcamp-embeds {
        display: none;
    }
    
    a {
        color: black;
    }

    a.button {
        color: black;
    }

    a.visited {
        color: black;
    }

    a.hover {
        color: black;
    }

    /* Optionally hide other content */
    #circular-menu-container,
    #arena-window,
    #radar-modal {
        display: none;
    }
	
	#content {
	  margin: 0 auto; /* Centers the container */
	  width: 80%; /* Adjusts width to 80% of the viewport */
	  max-width: 1200px; /* Sets a maximum width */
	}
	
	body {
	  text-align: center; /* Centers content in IE */
    }
	
	/* Style the video: 100% width and height to cover the entire window */
	/* #myVideo {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	} */
}