/*2023.11.10_10.41.44*/

body {
    margin: 0;
    justify-content: center; /* Center horizontally */
    align-items: flex-start; /* Align to the top */
}
.hidden{
    display: none;
}
#scrolling-image-container-container{
 display: flex;
  align-items: center;
  justify-content: center;
    background-color: lemonchiffon;
}
.scrolling-image-container {
    width: 700px;
    overflow: hidden;
    white-space: nowrap; /* Prevent images from wrapping to the next line */
    
}

.scrolling-image{
    width: 700px;
    display: inline-block; /* Display images in a row */
     height: 500px; /* Set the container height to occupy about a third of the viewport height */
    animation: scroll-pause 40s linear infinite; /* Adjust duration and timing as needed */
    
}

@keyframes scroll-pause {
    0%, 12.5% {
        transform: translateX(0); /* Start and pause at the same position for Image 1 */
    }
    14.28%, 25.0% {
        transform: translateX(-100%); /* Scroll to the left for Image 1 and pause for Image 2 */
    }
    28.56%, 37.5% {
        transform: translateX(-200%); /* Scroll to the left for Image 2 and pause for Image 3 */
    }
    42.84%, 50.0% {
        transform: translateX(-300%); /* Scroll to the left for Image 3 and pause for Image 4 */
    }
    57.12%, 62.5% {
        transform: translateX(-400%); /* Scroll to the left for Image 4 and pause for Image 5 */
    }
    71.40%, 75.0% {
        transform: translateX(-500%); /* Scroll to the left for Image 5 and pause for Image 6 */
    }
    83.32%, 87.5% {
        transform: translateX(-600%); /* Scroll to the left for Image 6 and pause for Image 7 */
    }
    100%, 100% {
        transform: translateX(-700%); /* Scroll to the left for Image 7 and pause */
    }
}


#contents{
    font-size: 20px;
    width: 50%;
    margin:auto;
}
.header{
    text-align: left;
    font-weight: bolder;
    margin-top: 30px;
    
}
#catcher{
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px; /* Adjust the font size as needed */
    font-weight: bold; /* Make the text bold for emphasis */
    text-align: center; /* Center-align the text */
    color: #333; /* Choose an appropriate text color */
    padding: 10px; /* Add some padding for spacing */
    background-color: #f8f8f8; /* Use a light background color */
    border-radius: 5px; /* Round the corners of the headline */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}
#concept{
    text-align: left;
}
.student_case{
    margin-top: 2%;
    margin-left: 2%;
}
.point{
    margin-left: 5%;
}
.about_me_list{
      list-style-type:circle;
    margin-left: 0%;
    font-weight:bold;
}
#location_input{
    background-color: lightcyan;
    margin-left: 5%;
    width: 25%;
}
.radio{
    float: left;
}
#message_input_field{
    width: 100%;
}
#send_mail_button{
    border: 2px solid black;
    border-radius: 14%;
    cursor: pointer;
    white-space: nowrap;
    display: inline-block;
    background-color: gray;
    padding: 5px;
    margin-top: 20px;
}
#email_logo{
    width: 100px;
    height: auto;
    float: right;
}
.warning{
    color: red;
}

#bottom_logo{
    width: 20%;
    margin: auto;
}

@media screen and (max-width: 400mm) {
#contents{
    font-size: 20px;
    width: 95%;
    margin:auto;
}
}
#failed_email{
    text-align: center;
    margin: auto;
    margin-top: 100px;
    background-color: lemonchiffon;
    font-size: 200%;
}
#email_sent{
    text-align: center;
    margin: auto;
    margin-top: 100px;
    background-color: lemonchiffon;
    font-size: 200%;
}