/* program1.css */


/* Body styling */
body {
    font-family: Georgia, Garamond, serif;
    background-color: #d8d50c;
    margin: 0;
    padding: 0;
    color: #333333;
    
}
/*
        Author: Ahmed Alaboodi
    /*
/* Navigation bar styling */
.navbar {
    background-color: #131131;
    overflow: hidden;
    text-align: center; /* Center align the nav links */
}

.navbar a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    background-color: #73630b; 
    font-family: 'Century Gothic', Futura, Verdana, sans-serif;
    margin: 0 10px; /* Space between links */
}

.navbar a:hover {
    background-color: #ddd;
    color: rgb(5, 57, 199);
}

/* Main content styling */
.main-content {
    
    padding: 20px;
    margin: 20px auto; /* Center content */
    background-color: #e2cc09;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(232, 198, 5, 0.1);
    max-width: 800px; /* Constrain the width */
}

h1, h2 {
    font-family: 'Century Gothic', Futura, Verdana, sans-serif;
    color: #A4A400 ;
    background-color: #f2f2f2;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    margin-top: 0;
}

h3, h4, h5, h6 {
    font-family: 'Century Gothic', Futura, Verdana, sans-serif;
    color: #A4A400;
    background-color: #F0F0F0;
    padding: 10px;
    border-radius: 5px;
    margin-top: 0;
}

h1 {
    letter-spacing: 0.1em;
}

h2 {
    letter-spacing: 0.08em;
}

/* Footer styling */
.footer {
    background-color: #333;
    color: #f2f2f2;
    text-align: center;
    padding: 2px 1;
    position: fixed;
    width: 100%;
    bottom: 0;
    
}

/* Table styling */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: #CC9933 ;
    color: #030ad9;
    margin-top: 20px;
    
}

th, td {
    border: 2px solid #ebecf3;
    padding: 5px;
    text-align: left;
    text-align: center;

}

th {
    background-color: #003366;
    color: #FFFFFF ;
    font-weight: bold;
    margin-top: 10px;
    
    

    
    

}


caption {
    font-family: 'Century Gothic', Futura, Verdana, sans-serif;
    color: #04d786;
    background-color: #F0F0F0;
    font-weight: bold;
    padding: 10px;


}

/* Container to control the space for the animation */
.animated-image-container {
    width: 100%; /* Full width */
    height: 200px; /* Height of the container */
    position: relative; /* Position relative to allow absolute positioning of the image */
    overflow: hidden; /* Hide the image when it moves out of the container */
}

/* Image styling and animation */
.animated-image {
    position: absolute; /* Absolute positioning to animate within the container */
    top: 50%; /* Center vertically */
    left: -200px; /* Start position (outside the left of the container) */
    transform: translateY(-50%); /* Center the image vertically */
    width: 200px; /* Adjust the image size */
    height: auto; /* Maintain aspect ratio */
    animation: moveLeftToMiddle 10s forwards; /* Apply the animation */
}

/* Keyframes for the animation */
@keyframes moveLeftToMiddle {
    0% {
        left: -200px; /* Start position (outside the left of the container) */
    }
    50% {
        left: calc(50% - 100px); /* Middle position (center of the container minus half the image width) */
    }
    100% {
        left: calc(50% - 100px); /* Stay in the middle */
    }
}



/* Background image for both pages */
body {
    background: url('greek-chickpea-salad-b_60.jpg') repeat;
}