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);
}
.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: table;
    align-items: table;
    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);
}
.box1{
   text-align: center;
   padding: 10px;
   background-color: #1030ff54;
   border-radius: 5px;
   box-shadow: 0 4px 8px  rgba(0, 0, 0, 0.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);
}