body {
    margin: 1%;
    padding: 1%;
    font-family: 'Roboto', sans-serif;
}

main {
    margin: 2.5%;
    padding: 5%;
}

header, 
h2, 
h3, 
#program-details, 
#personal-objective {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    /* background-color: #f8f8f8; Optional background color */
}

nav ul, .translation-controls {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

nav ul li, .translation-controls {
    margin: 0 20px;
}

header {
    border-radius: 1rem;
    background-color: #f5f5dc;
    transition: background-color 0.3s ease-in-out;
}

.translation-controls, 
#translate-all-btn, 
#language-select, 
#revert-all-btn {
    border-radius: 1rem;
    transition: background-color 0.3s ease-in-out;
}


header:hover, 
#translate-all-btn:hover, 
#revert-all-btn:hover {
    background-color: #4a90e2;
}

#language-select:hover {
    background-color: #dadada;
}

#introduction, 
#about-dbs,
#program-details,
#module-info:hover,
#personal-objective,
#education {
    transition: background-color 0.3s ease-in-out;
}

#introduction:hover, 
#about-dbs:hover,
#program-details:hover,
#module-info:hover,
#personal-objective:hover,
#education:hover,
#introduction img {
    margin-bottom: 20px;
    background-color: #f5f5dc;
    border-radius: 1rem;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

section {
    margin: 20px;
}

#introduction p {
    margin: 1%;
    text-align: center;
    border: 1px solid #f5f5dc;
    transition: background-color 0.3s ease-in-out;
}

#introduction p:hover,
.button {
    background-color: #87b9f1;
    border-radius: 1rem;
}

.intro-p {
    margin: 0 10% 0 10%;
    padding: 2.5%;
}

#education, 
#module-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

th, td {
    border: 1px solid #000;
    border-collapse: collapse;
    text-align: center;
    padding: 5px;
    margin: 5px;
    
}

tr {
    transition: background-color 0.3s ease-in-out;
}

tr:hover {
    background-color: #f5f5f5; /* Light grey hover effect */
}

table {
    margin-bottom: 20px;
}

#work-experience,
#program-details li {
    margin: 1%;
    padding: 1%;
    list-style: none;
    border: 0.1px solid #f5f5dc;
    transition: background-color 0.3s ease-in-out;
}

#program-details li {
    margin-right: 10%;
}

#work-experience:hover {
    background-color: #f5f5dc;
    border-radius: 1rem;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.experience li {
    margin-left: 20%;
    padding: 0.5%;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.experience li:hover,
#personal-objective p:hover,
#program-details li:hover,
#about-dbs p:hover {
    color: #4a90e2;
    background-color: azure;
    border-radius: 1rem;
}

#about-dbs p:hover,
#personal-objective p:hover,
#program-details li:hover {
    color: #707274;
    cursor:crosshair;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.button-container, #message {
    display: flex;
    justify-content: center;
}

.button {
    border: solid 1px black;
}

a {
    text-decoration: none; 
    color: rgb(51, 51, 51); 
    border-radius: 1rem;
    padding: 0 5px 0 5px;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; 
}

a:hover {
    display: inline-block;
    color: rgb(55, 76, 196);
    background-color: beige;
    padding: 0 5px 0 5px;
    transform: scale(1.1);
}

img {
    height: 100px;
    width: 200px;
    display: flex;
    margin: 0 auto;
    margin-bottom: 20px;
}

.contact-form:hover {
    background-color: #4a90e2;
}

.contact-form {
    width: 340px;
    border: 1px solid #000;
    border-radius: 1rem;
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.5);
    padding: 10px;
    margin: 20px auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f5f5dc;
    transition: background-color 0.3s ease-in-out;
}

.contact-form input,
.contact-form textarea {
    width: 90%;
    padding: 8px;
    margin: 5px 0;
    border-radius: 1rem;
    border: 1px solid #ccc;
}

input[type="text"]:hover, 
input[type="email"]:hover, 
textarea:hover {
    border: 2px solid #4a90e2; 
    outline: none; 
    background-color: #f0f8ff; 
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.5); 
    transition: all 0.1s ease-in-out;
}

input[type="text"]:focus, 
input[type="email"]:focus, 
textarea:focus {
    border: 2px solid #4a90e2; 
    outline: none; 
    background-color: #f0f8ff; 
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.5); 
    transition: all 0.1s ease-in-out;
    transform: scale(1.02);
}

.contact-form label {
    display: block;
    text-align: left;
    font-weight: bold;
}

input[type='submit'] {
    transition: background-color 0.3s ease-in-out;
}

input[type='submit']:hover {
    color: #454a50;
    background-color: #4a90e2;
    cursor: pointer;
}

.contact {
    display: flex;
    align-items: center;
    justify-content: center;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
}