body1{
    font-family: 'Courier New', Courier, monospace;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    color: #ffff;
}
section{
    display: flex;
    width: 1000px;
    height: 900px;
}
section img{
    width: 0px;
    flex-grow: 1;
    object-fit: cover;
    opacity: .8;
    transition: .5s ease;
}
section img:hover{
cursor: crosshair;
width: 550px;
opacity: 1;
filter: contrast(100%);
}

.box{
    text-align: center;
    padding: 10px;
    background-color: #0ee87354;
    border-radius: 5px;
    box-shadow: 0 4px 8px  rgba(0, 0, 0, 0.1);
    box-shadow: 0 15px 20px  rgba(0, 0, 0, 10.1);
}
.contenedor{
    text-align: center;
    padding: 20px;
    background-color: #faf8ec;
    border-radius: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
button {
    
    border: 0;
    background-image: linear-gradient(
    150deg,
    #9500ff61,
    #09f,
    #00DDFF
    );
    border-radius: 8px;
    color: #fff;
    display: flex;
    font-size: 18px;
    padding: 4px;
    cursor: pointer;
    transition: .3s;
}
button span {
    background: #111;
    padding: 16px 24px;
    border-radius: 6px;
    transition: .3s;
}
button:hover span {
    background: none;
}
button:active {
    transform: scale(0.9);
}
    .dif{
        text-align: center;
        padding: 20px;
        background-color: #faf8ec;
        border-radius: 20px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }
    
    
    body2, html2{
        font-family: 'Times New Roman', Times, serif;
         height: 100%;
         width: 100vw;
         display: table;
         justify-content: center;
         align-items: center;
         background: url(imagen\ 2.jpg) center center;
         background-size: cover;
     }
     .contenedor2{
        text-align: cen ;
        padding: 20px;
        background-color: #faf8ec;
        border-radius: 20px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
     }
     
     .box{
        text-align: center;
        padding: 10px;
        background-color: #3bca4054;
        border-radius: 5px;
        box-shadow: 0 4px 8px  rgba(0, 0, 0, 0.1);
        box-shadow: 0 15px 20px  rgba(0, 0, 0, 10.1);
     }
     .box1{
        text-align: center;
        padding: 10px;
        background-color: #1030ff54;
        border-radius: 5px;
        box-shadow: 0 4px 8px  rgba(0, 0, 0, 0.1);
        box-shadow: 0 15px 20px  rgba(0, 0, 0, 10.1);
     }
     b{
        background-color: #0acff6f0;
         color: black;
         text-align: calc(10);
         padding: 25px 30px;
         display: inline-block;
         margin-top: 30px;
         border-radius: 5px;
         box-shadow: 0 15px 20px  rgba(0, 0, 0, 10.1);
     }
     b:hover{
         background-color: #79e4ffe0;
     }
     body3, html3{
     
        font-family: 'Times New Roman', Times, serif;
        height: 100%;
        width: 100vw;
        display: table;
        justify-content: table;
        align-items: table;
        background: url(imagen\ 1.jpg) center center;
        background-size: cover;
     }
     b1{
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        margin: 0;
        padding: 0;
        border-radius: 5px;
        background-color: rgb(240, 100, 81); 
         box-shadow: 0 15px 20px  rgba(0, 0, 0, 10.1);
     }
     b2{
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        margin: 0;
        padding: 0px;
        border-radius: 5px;
        background-color: rgb(248, 246, 246);  
     }
     .contenedor3{
        text-align: table;
        padding: 0px;
        background-color: #faf8ec;
        border-radius: 5px;
        box-shadow: 0 4px 8px  rgba(0, 0, 0, 0.1);
     }
     .box{
        text-align: center;
        padding: 10px;
        background-color: #3bca4054;
        border-radius: 5px;
        box-shadow: 0 4px 8px  rgba(0, 0, 0, 0.1);
        box-shadow: 0 15px 20px  rgba(0, 0, 0, 10.1);
     }
     .box1{
        text-align: center;
        padding: 10px;
        background-color: #1030ff54;
        border-radius: 5px;
        box-shadow: 0 4px 8px  rgba(0, 0, 0, 0.1);
        box-shadow: 0 15px 20px  rgba(0, 0, 0, 10.1);
     }
     b3{
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        margin: 0;
        padding: 0px;
        border-radius: 5px;
        background-color: rgba(254, 225, 128, 0.817);  
        box-shadow: 0 15px 20px  rgba(0, 0, 0, 10.1);
     }
     b4{
        background-color: #41fe80f0;
        color: black;
        text-align: calc(10);
        padding: 25px 30px;
        display: inline-block;
        margin-top: 30px;
        border-radius: 5px;
        box-shadow: 0 15px 20px  rgba(0, 0, 0, 10.1);
    }
    b4:hover{
        background-color: #79e4ffe0;
    }