/* Apply some basic styles */
body {
    font-family: "Georgia", "Times New Roman", serif;
    font-style: italic;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Move content to the top */
    align-items: center; 
    height: 95vh; /* Make sure the body takes up the full viewport height */
    margin: 0; /* removes default margins */
    background-image: url("../images/backgroundsmall.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment:fixed;  
    overflow: hidden;
} 

.main-content {

    flex: 1; /* This allows the main content to grow and push the footer down */
    width: 100%; /* Ensure the content takes up the full width */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    justify-content: flex-start; /* Center items vertically */
    overflow: hidden;
}

/* main Velveteins logo */
.center-content {
    text-align: center;
    position: relative;
    margin-top: 40px; /* Add some spacing from the top if needed */

}

/* logo */
.image-container {
    position: relative;
    text-align: center; /* Center the image horizontally */
}

img {
    width: 300px; /* Set the width to the desired size of LOGO */
    height: auto; /* Automatically adjust the height to maintain the aspect ratio */
    transition: opacity 0.3s; /* Add a smooth transition effect */
    margin: 0 auto; /* Center the image horizontally within its container */
}

img:hover {
    opacity: 0.01; /* Change the image's opacity when hovered */
}

/* page links */
.navigation {
    text-align: center; /* Center the text horizontally */
    margin-top: 10px;
}

.navigation a {
    text-decoration: none; /* Remove underlines from links */
    color: hsl(41, 100%, 82%); /* Set the initial text color */
    opacity: 1; /* Set initial opacity to 1 (fully opaque) */
    transition: opacity 0.3s; /* Add a smooth transition effect for opacity */
    margin: 5px; /* Add spacing between links */
    font-size: 20px; /* Increase the font size */
    padding: 10px 8px; /* Increase the padding for top/bottom and left/right */
}

.navigation a:hover {
    opacity: 0.2; /* Change the opacity on hover */
}

header {
    background-color: #ff0000;
    color: #fff;
    text-align: center;
    padding: 10px;
}

footer {
    text-align: center;
    padding: 20px;
    width: 100%;
}

.footerformat a {
    text-decoration: none;
    color: rgb(185, 185, 185);
    padding: 10px;
    font-size: 13px;
    font-style: normal;
}

.footerformat a:hover{
    font-style: italic; 
}

.trailer {
    position: absolute;
    font-size: 24px;
    color: rgb(255, 255, 255);
    pointer-events: none;
}