/* Base styles for both mobile and desktop */
body, html {
    height: 100%;
    margin: 0;
    display: grid; 
    grid-template-rows: auto 1fr auto; 
    overflow: hidden; 
}

.text-container {
    display: grid; 
    align-items: center; 
    justify-items: center; 
    height: 100%; 
}

#mostnotabletitle {
    font-size: 60px; 
}

.boxAroundtitle {
    margin-top: 100px; 
    margin-bottom: 50px; 
}

.flex-list {
    display: flex;                 
    list-style-type: none;        
    padding: 0;                  
    margin: 0;                    
}

.flex-list li:hover { 
    background-color: white; 
}

.flex-list li {
    flex: 1;                      
    padding: 10px;               
    text-align: center;          
    border: 1px solid #ccc;  
    background-color: gray; 
    transition: background-color 0.3s; 
}

.box {
    background-color: gray; 
    color: white; 
    padding: 40px; 
    border: 1px solid darkgray; 
    margin: 40px; 
    width: 100%; 
    text-align: center; 
    box-sizing: border-box; 
    margin-top: 200px;
}

.lightgraybox {
    background-color: lightgray;
}

a {
    color: rgb(182, 223, 236); 
    text-decoration: none; 
}

a:hover {
    color: black;
    font-size: larger;
}
li:hover {
    color: black;
}

.ResearcherAnimation {
    font-size: 80px;
    text-align: center; 
    opacity: 0; 
    animation: fadeIn 1.5s forwards; 
}

.ResearcherDescAnimation {
    font-size: 25px;
    text-align: center; 
    opacity: 0; 
    animation: fadeIn 1.5s forwards; 
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

html,
body {
    height: 100%;
    overflow-y: auto;
}

.text-container {
    padding: 20px;
}

.boxAroundtitle {
    margin-bottom: 20px;
}

.box {
    margin-bottom: 20px;
}

/* Media Queries for Desktop */
@media (min-width: 768px) {
    #mostnotabletitle {
        font-size: 60px;
    }

    .flex-list {
        flex-direction: row; /* Horizontal layout for desktop */
    }

    .flex-list li {
        padding: 20px;  /* More padding for desktop */
        font-size: 18px; /* Larger font size */
    }

    .box {
        margin: 40px;
    }
}

/* Media Queries for Mobile */
@media (max-width: 767px) {
    #mostnotabletitle {
        font-size: 40px; /* Adjust font size for mobile */
    }

    .flex-list {
        flex-direction: column; /* Vertical list layout for mobile */
    }

    .flex-list li {
        flex: none; /* Items won't flex to equal width */
        width: 100%; /* Full width for each item */
        margin-bottom: 10px; /* Space between items */
        padding: 15px; /* Adjusted padding for mobile */
        font-size: 16px; /* Smaller font size */
    }

    .box {
        margin: 20px 10px; /* Reduced margin for mobile */
        padding: 20px; /* Reduced padding for better fitting */
    }

    .text-container {
        padding: 10px; /* Less padding on small screens */
    }
}

footer {
    height: 100px;
}