html, body {
    height: 100%; /* Full height for body */
    margin: 0; /* Remove default margin */
}

body {
    font-family: 'Times New Roman', Times, serif; /* Use Times New Roman */
    margin: 0;
    padding: 0;
    background-image: url('logo.gif'); /* Set background image */
    background-size: cover; /* Cover the entire background */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack children vertically */
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Spacing between items */
    padding: 10px 20px;
    background-color: transparent; 
}

.navbar a {
    color: black; /* Text color */
    text-decoration: none; /* Add underline */
    margin-left: 20px; /* Space between links */
    font-size: 16px; /* Font size */
    font-weight: bold; /* Make text bold */
}

.logo-button {
    background-color: transparent; /* No background */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor on hover */
    padding: 0; /* No padding */
    outline: none; /* Remove outline */
}

.logo-button img {
    width: 50px; /* Size of the logo */
    height: auto; /* Maintain aspect ratio */
}

.NYoutube-button {
    background-color: transparent; /* No background */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor on hover */
    padding: 0; /* No padding */
    outline: none; /* Remove outline */
}

.NYoutube-button img {
    width: 50px; /* Size of the logo */
    height: auto; /* Maintain aspect ratio */
}

.container {
    text-align: center; /* Center text */
    margin-top: 50px; /* Space from the top */
}

h1 {
    color: #333; /* Text color */
}

.writing-button, .youtube-button, .t-button {
    background-color: #28a745; /* Green background for buttons */
    color: white; /* Text color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 20px; /* Padding inside buttons */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    margin: 10px; /* Space between buttons */
    transition: background-color 0.3s; /* Smooth transition */
}

.writing-button:hover, .youtube-button:hover {
    background-color: #218838; /* Darker green on hover */
}

footer {
    background-color: #303030; /* Grey background */
    color: white; /* Text color */
    display: flex; /* Use flexbox */
    justify-content: space-between; /* Space between items */
    align-items: center; /* Center items vertically */
    padding: 20px; /* Spacing */
}

.social-links {
    display: flex; /* Flexbox for social icons */
    align-items: center; /* Center icons vertically */
}

footer a {
    color: white; /* Link color */
    margin: 0 10px; /* Spacing between icons */
}

footer img {
    width: 30px; /* Icon size */
    height: 30px; /* Icon size */
}

main {
    flex: none; /* Prevent it from growing */
    height: 777px; /* Set a fixed height */
    overflow: auto; /* Add scrollbars if content overflows */
}