body{
    position: relative;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, Geneva, Tahoma, sans-serif;
   position: relative;
   padding-bottom: 10em;
   min-height: 100vh;
}

@keyframes leftToRight {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes topToBottom {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: black;
    padding: 3em 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.footer-icons{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1em;
    color: white;
    margin: auto 4em;
}

.footer-icons i{
    font-size: 15px;
    width: 100%;
}

footer img{
    width: 10%;
    height: 10%;
    margin: auto 2em;
}

header{
    display: flex;
    flex-direction: row;
    padding: 3vmin 5vmin;
    margin: auto;
    width: 90%;
}

.header-image a{
    display: flex;
    gap: .5em;
}


header h1{
    font-size: clamp(1rem, 1.5vw, 2rem);
    color: black;
    margin: auto 0;
}


.header-image img{
    width: 2em;
    margin: auto 0;
}

nav{
    margin: auto 0 auto auto;
}

nav ul{
    display: flex;
    flex-direction: row;
    margin: auto;
    gap: 5vmin;
    height: 100%;
}

nav ul li{
    margin: auto;
    text-transform: uppercase;
    color: black;
}

nav ul li a {
    list-style: none;
    color: black;
    text-decoration: none;
    font-size: clamp(.75rem,1vw,2rem);
}

nav ul li a:after {
    content: '';
    width: 0px;
    height: 1px;
    display: block;
    background: black;
    transition: 300ms;
  }
  
  nav ul li a:hover:after {
    width: 100%;}




.header-icons {
   display: flex;
   flex-direction: row;
   gap: 5vmin;
}

.header-icons a {
    color: white;
    background-color: black;
    margin: auto 0;
    padding: 0.5vmin 1vmin;
    text-transform: uppercase;
    text-decoration: none;
    font-size: clamp(.5rem, 2vw, 1rem);
    text-decoration: none;
}

.bi-list{
    display: none;
}

.bi-x{
    display: none;
}


.historiapage{
    margin: 5vmin auto;
    display: flex;
    flex-direction: column;
    gap: 1vmin;
    width: 90%;
}

h2{
    text-align: center;
    font-size: clamp(1rem,5vw,2rem);
}

.historiapage h2, .logrospage h2, .nobelspage  h2, .contactpage  h2 {
    text-align: center;
    font-size: clamp(1rem,5vw,2rem);
    animation: topToBottom 1s ease-out;
}

.timeline{
    position: relative;
    max-width: fit-content;
    margin: 10vmin auto auto;
    display: flex;
    flex-direction: column;
    gap: 5em;
}


.time-container:nth-child(odd){
   width: 40%;
   margin: auto;
   transform: translateX(-49.45%);
}

.time-container:nth-child(even){
    width: 40%;
   margin: auto;
    transform: translateX(50%);
   
}

.time-title{
    font-size: clamp(.75rem,1vw,2rem);
    font-weight: 700;
    text-transform: uppercase;
}

.time-box .name{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.time-info{
    margin-top: 1em;
    font-size: clamp(.75rem,.75vw, 2rem);
}


.time-box.left{
    margin-bottom: 5em;
    transform: translateX(-10em) translateY(-1em);
    border: 1px solid black;
    opacity: 0;
    transition: opacity 1s, transform 1s;
    position: relative;
    padding: 1.5em;
    margin-right: 3em;    
}


.time-box.right{
    margin-bottom: 5em;
    transform: translateX(10em) translateY(-1em);
    border: 1px solid black;
    opacity: 0;
    transition: opacity 1s, transform 1s;
    position: relative;
    padding: 1.5em;
    margin-left: 3em;    
}

.time-box.visible {
    opacity: 1;
    transform: translateX(0) translateY(-1em);
  }


.time-container.left-time::after{
    position: absolute;
    content: '';
    width: 3px;
    background-color: black;
    height: 130%;
    z-index:1; 
    top: 0;
    right: 0;
    
}

.time-container.right-time::after{
    position: absolute;
    content: '';
    width: 3px;
    background-color: black;
    height: 130%;
    top: 0;
    z-index:1; 
    left: 0;
    
}

.time-container.left-time:last-child::after{
    display: none;
    
}

.time-box p {
    -webkit-line-clamp: unset; 
    max-height: 100%;
}


.time-box.left .time-title{
    text-align: right; 
}


.time-box.right .time-title{
    text-align: left; 
}



 .right-time .time-year{
    color: white;
    position: absolute;
    left: 0%;
    transform: translateX(-1.5em);
    background-color: black;
    z-index: 2;
    font-size: clamp(.75rem,1vw,2rem);
    padding: 0.5vmin 1vmin;
}

.left-time .time-year{
    color: white;
    position: absolute;
    left: 100%;
    transform: translateX(-1.5em);
    background-color: black;
    z-index: 2;
    font-size: clamp(.75rem,1vw,2rem);
    padding: 0.5vmin 1vmin;
}



.left .arrow{
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 0;
    left: calc(100% + -.5em);
    transform:  translateY( 1.25em) rotate(45deg);
    background-color:white;
    border-top: 1px solid black;
    border-left: 0px solid black;
    border-right: 1px solid black;
    border-bottom:0px solid black;
    z-index: 1;
}

.right .arrow{
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 0;
    left: calc(0% + -.5em);
    transform:  translateY( 1.25em) rotate(45deg);
    background-color:white;
    border-bottom: 1px solid black;
    border-right: 0px solid black;
    border-left: 1px solid black;
    border-top:0px solid black;
    z-index: 1;
}



.time-image img{
    width: 50%;
}

.nobelspage{
    width: 85%;
    display: flex;
    flex-direction: column;
    margin: 5% auto 0;
    gap: 5vmin;
}

.nobelspage .nobels-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    row-gap: 0em;
    column-gap: 5em;
}   

.nobelspage .nobel{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.nobelspage .nobel:hover{
    transform: scale(105%);
    cursor: pointer;
}


 .nobelspage h2{
    margin-bottom: 2rem;
}

.nobelspage .nobel-info{
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 85%;
    transform: translateY(-50%);
    z-index: 2;
    padding: 1em 1em;
}

.nobelspage .nobel-info h2{
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin: 0 auto;
    animation: none;
}

.nobelspage .nobel-info h3{
    font-size: clamp(.5rem, 2vw, 1rem);
    font-style: italic;
    font-weight: 600;
    width: 100%;
}


.nobelspage .nobel img{
    width: 100%;
    z-index: 0;
}


.homepage{
    min-height: 100vh;
    justify-content: center;
    margin: 2em auto;
    width: 100%;
}

.slider.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(165, 242, 255, 0.5); 
    opacity: 1;
    transition: background-color 0.2s ease-in-out;
    z-index: 1; 
}

.slider{
    width: 90%;
    height: 70vh;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}

.slides{
    width: 500%;
    height: 100%;
    display: flex;
}

.slides input{
    display: none;
}

.slide{
    width: 20%;
    transition: 2s;
}

.slide img{
    width: 100%;
    height: 100%;
}

.slider-text{
    position: absolute;
    bottom: 17.5%;
    left: 10%;
    width: fit-content;
    color: black; 
    text-transform: uppercase;
    border-radius: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .25em;
    animation: leftToRight 1s ease-out;
}

.slider-text h2{
    text-align: left;
    font-size: clamp(1rem, 5vw, 10rem);
    font-weight: 700;
    margin: 0;
}

.slider-text p{
    text-align: left;
    font-size: clamp(.5rem, 3vw, 5rem);
    font-weight: 800;
    margin: 0;
}

.navigation-manual{
display: none;
}

.manual-btn{
    border: 2px solid #4ddc40;
    padding: .25rem;
    border-radius: 10px;
    cursor: pointer;
    transition: .5s;
}

.manual-btn:hover{
    background-color: #40D3DC;
}

#radio1:checked ~ .first{
    margin-left: 0;
}

#radio2:checked ~ .first{
    margin-left: -20%;
}

#radio3:checked ~ .first{
    margin-left: -40%;
}

#radio4:checked ~ .first{
    margin-left: -60%;
}

.navigation-auto{
    display: none;
}

.navigation-auto div{
    border: 2px solid #40D3DC;
    padding: .25rem;
    border-radius: 10px;
    cursor: pointer;
    transition: .5s;
}

#radio1:checked ~ .navigation-auto .auto-btn1{
    background: #40D3DC;
}

#radio2:checked ~ .navigation-auto .auto-btn2{
    background: #40D3DC;
}

#radio3:checked ~ .navigation-auto .auto-btn3{
    background: #40D3DC;
}

#radio4:checked ~ .navigation-auto .auto-btn4{
    background: #40D3DC;
}


.home-nobels{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    margin: 2em auto;
    width: 90%;
    position: relative;
}

.home-nobels img{
    width: 100%;
}


.home-nobels h2{
    position: absolute;
     left: 0%;
     top: 35%;
     font-size: 3em;
      width: 100%;
      text-align: center;
      z-index: 2;
      font-weight: 200;
      font-size: clamp(1rem, 3vw, 5em);
      transition: font-weight .1s ease-in-out;
}

.home-nobels:hover h2{
      font-weight: 500;
      cursor: pointer;
}


.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); 
    opacity: 1;
    transition: background-color 0.2s ease-in-out;
    z-index: 1; 
}

.home-nobels:hover .overlay {
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.home-trivia{
    display: flex;
    flex-direction: column;
    width: 90%;
    background-color: black;
    color: white;
    padding: 5em 0;
    gap: 1em;
    margin: 0 auto 7.5em;
}

.home-trivia h2{
    font-weight: 100;
    font-size: 2.5em;
    font-size: clamp(1rem, 3vw, 4em);

}

.home-trivia button{
    margin: 1vmin auto 0;
padding: 1.5vmin 5vmin;
border-style: none;
font-size: clamp(1em, 2vw, 3em);
border: 1px solid white;
color: white;
background-color:black;
}

.home-trivia button:hover{
cursor: pointer;
border: 1px solid white;
color: black;
background-color:white;
}

.logrospage{
    width: 85%;
    display: flex;
    flex-direction: column;
    margin:2% auto 0;
    gap: 5vmin;
}

.logrospage .logros-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2em;}

.logrospage .logro{
    display: flex;
    flex-direction: column;
}

.logrospage .logro:hover{
    transform: scale(105%);
    cursor: pointer;
}

.logrospage .logro-info{
    background-color: white;
    width: 85%;
    padding: .25em 1em;
    transform: translateY(-40%);
}

.logrospage .logro-info h3{
    font-size: clamp(.5rem,1vw,2rem);
}

.logrospage .logro-info p{
    font-size: clamp(.25rem, 1vw, .75rem);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
}


.logrospage .logro img{
    width: 100%;
}


.logros-filtros{
    display: flex;
    gap: 1em;
    justify-content: end;
    margin: 0;
}

.logros-filtros div{
    display: flex;
}

.logros-filtros i{
    color: white;
    display: flex;
    align-items: center;
    font-size: 10px;
    justify-content: center;
    transform: translateX(-200%);
}

.logros-filtros select{
    border: none;
    appearance: none;
    padding: .75em;
    padding-right: 2em;
    width: 100%;
    font-size: clamp(.75rem, .5vw, 1rem);
    background-color: black;
    color: white;
    cursor: pointer;
    outline: none !important;
}

.logropage {
    height: 100%;
    margin-top: 5rem;
}

.logropage .logro{
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: auto;
}


.logropage .logro img{
   width: 100%;

}

.logropage .logro-info{
    background-color: white;
    width: 85%;
    margin: auto;
    padding: 2rem 2rem;
    transform: translateY(-2em);
    display: flex;
    flex-direction: column;
    gap: 1rem;   
}

.logropage .logro-info h2{
    font-size: clamp(.5rem, 1.5vw, 2rem);
}

.logropage .logro-info p{
    width: 100%;
    margin: auto;
    text-align: justify;
    text-justify: inter-word;
    line-height: 150%;
    font-size: clamp(.5rem, 1vw, 2rem);
}

.nobelpage {
    height: 100vh;
    margin-top: 5rem;
}

.nobelpage .nobel{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    width: 50%;
    margin: auto;
}


.nobelpage .nobel img{
   width: 100%;
   margin: 0 auto;

}

.nobelpage .nobel-info{
    background-color: white;
    width: 90%;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: .5em;   
}

.nobelpage .nobel-info h2{
    font-size: clamp(1rem, 2vw, 2rem);
    margin: 0 auto;
} 

.nobelpage .nobel-info h3{
    font-size: clamp(.5rem, 1.5vw, 1rem);
    margin: 0;
}

.nobelpage .nobel-info p{
    margin: 0 auto;
    font-size: clamp(.5rem, 1.5vw, 1rem);
    line-height: 150%;
}

.triviapage{
    background-color: white;
    height: 100%;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0em;
}


.trivia-container{
   display: flex;
   flex-direction: column;
    width: 70%;
    margin: auto ;
    gap: 2em;
    background-color:  white;
    padding: 10em 1em;
    height: 60vh;
}

.trivia{
    display: flex;
    flex-direction: column;
    gap: 2em;
    width: 100%;
}

#start-btn{
    color: black;
    padding: 2em;
    font-size: 1.5em;
    background-color: rgb(223, 223, 223);
    margin: auto;
    border: none;
}

#start-btn:hover{
    color: white;
    background-color: black;
    cursor: pointer;
}

.trivia h2{
    text-align: center;
    font-size: clamp(1rem,5vw,2rem);
    background-color: black;
    color: white;
    margin:0 auto;
    width: 75%;
    font-weight: 100;
    padding: 1em 5%;
}


#answer-buttons{
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    width:85%;
}


#answer-buttons .btn{
    color: black;
    font-size: 10px;
    width: 100%;
    min-height: 5em;
    padding: 1em 2em;
    font-size: 1em;
    background-color: rgb(223, 223, 223);
    margin: auto;
    border: none;
}

#answer-buttons .btn:hover.btn:hover:not([disabled]){
    background-color:black;
    color: white;
    cursor: pointer;
}

.btn:disabled{
    cursor:default;
}


#answer-buttons .btn.correct{
    background-color: rgb(68, 255, 68);
}

#answer-buttons .btn.incorrect{
    background-color:  rgb(255, 68, 68);
}

#clarification{
    text-align: center;
    width: 60%;
    margin: auto;
}



.contactpage{
    margin: 5vmin auto;
    display: flex;
    flex-direction: column;
    gap: 1vmin;
    
}

.contactpage h3{
    text-align: center;
    width: 80%;
    font-weight: 400;
    margin: 1em auto;
    font-size: clamp(.75rem,2vw,1rem);
}

#contactForm{
    width: 60%;
    display: flex;
    flex-direction: column;
    margin: auto;
    gap: .25em;
}

#contactForm label{
    margin-top: 1em;
}

#contactForm button{
    color: black;
    padding: .5em 1em;
    font-size: 1em;
    background-color: rgb(223, 223, 223);
    margin:2em auto;
    border: none;
}

#contactForm button:hover{
    color: white;
    background-color: black;
    cursor: pointer;
}

.contactpage p{
    margin: auto;
    text-align: center;
}
@media (max-width: 600px) {


    footer img{
        width: 30%;
        height: 30%;
    }

    nav ul {
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -250px;
        width: 50%;
        height: 100%;
        background-color: #000000;
        padding-top: 5rem;
        transition: right 0.3s ease;
        z-index: 2;
        gap: 2rem;
    }

    nav ul li {
        margin: 0;
        text-align: center;
    }

    nav ul li a{
        color: white;
    }

    .bi-list {
        display: block;
        color: black;
    }

    nav ul.active {
        right: 0;
    }


    .bi-x{
        display: block;
        position: absolute;
        top:1.5%;
        color: white;
        left: 10%;
    }


    .slider{
        width: 90%;
        height: 25%;
        overflow: hidden;
        margin: 0 auto;
    }
    
    .slides{
        width: 500%;
        height: 100%;
        display: flex;
    }

    
    .logrospage .logro-info p{
       display: none;
    }

    .logrospage .logros-container{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: 1em;
    row-gap: 0;
}


    .logrospage .logro-info{
        background-color: white;
        width: 70%;
        padding: .25em 1em;
        transform: translateY(-50%);
        }


        .logropage .logro{
            display: flex;
            flex-direction: column;
            width: 70%;
            margin: auto;
        }
        
        
        .logropage .logro img{
           width: 100%;
        
        }
        
        .logropage .logro-info{
            width: 90%;
            padding: 1rem 1rem;
            gap: 0;
        }
        


    .nobelpage .nobel{
        display: flex;
        flex-direction: column;
        width: 70%;
        margin: auto;
    }
    
    
    .nobelpage .nobel img{
       width: 100%;
       margin: 0 auto;
    
    }
    
    .nobelpage .nobel-info{
        background-color: white;
        width: 100%;
        margin: 0 auto;
        padding: 1rem 0;
        display: flex;
        flex-direction: column;
    }

    
    .timeline{
        margin-top: 4em;
    }
    
    .time-container:nth-child(odd),  .time-container:nth-child(even){
       width:80%;
       margin: auto;
       margin-left: 0;
       transform: translateX(0%);
    }

    

    .time-box.left,  .time-box.right{
        position: relative;
        padding: 1em 1em;
        margin-right: 0em;    
        margin-left: 0.5em;   
    }
    
    .time-container.left-time::after{
        position: absolute;
        content: '';
        width: 3px;
        background-color: black;
        height: 130%;
        z-index:1; 
        top: 0;
        left: 100%;
        transform: translateX(3em);

        
    }
    
    .time-container.right-time::after{
        position: absolute;
        content: '';
        width: 3px;
        background-color: black;
        height: 120%;
        top: 0;
        z-index:1; 
        left: 100%;
        transform: translateX(3em);
        
    }
   
    
    
.time-box.right .time-title{
    text-align: right; 
}

 
.time-box{
    margin-bottom: 2em;
    transform: translateY(-0.5em);
    
}


.time-box.right{
    transform: translateX(-10em) translateY(-1em);
    opacity: 0;
    transition: opacity 1s, transform 1s;
}

.time-box.visible {
    opacity: 1;
    transform: translateX(0) translateY(-1em);
  }

 .right-time .time-year, .left-time .time-year{
    color: white;
    position: absolute;
    left: 100%;
    background-color: black;
    z-index: 2;
    font-size: clamp(1rem, 1vw, 2rem);
    padding: 1vmin 2vmin;
    transform: translateX(1.5em);
}

.left .arrow, .right .arrow{
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 0;
    left: calc(100% + -.65em);
    transform:  translateY( 1.25em) rotate(45deg);
    background-color:white;
    border-top: 1px solid black;
    border-left: 0px solid black;
    border-right: 1px solid black;
    border-bottom:0px solid black;
    z-index: 1;
}


.triviapage{
    gap: 0;
    height: 150vh;
}


.trivia-container{
    display: flex;
    flex-direction: column;
     width: 70%;
     margin: 2em auto ;
     gap: 2em;
     background-color:  white;
     padding: 2em 1em;
     min-height: 80vh;
 }
 
 

.trivia h2{
    width: 75%;
}


#answer-buttons{
    margin: 0 auto;
    display: flex;
   flex-direction: column;
    gap: 1em;
    width:85%;

}


#answer-buttons .btn{
    width: 100%;
    height:100%;
    font-size: 1em;
}

#clarification{
    width: 85%;
    font-size: 10px;
    margin:0 auto;
    
}


.nobelspage .nobels-container{
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: auto;
}   

.nobelspage .nobel-info{
    width: 90%;
    transform: translateY(-50%);
}

.home-nobels h2{
    font-weight: 500;
}

#contactForm{
    width: 80%;
}

}