@charset "utf-8";
header, section, footer { 
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    font-family:'Delicious Handrawn', cursive;
    -webkit-text-stroke: black;
    font-size: x-large;
    text-shadow: 1px 1px 1px 1px black ;
    text-decoration:  none;
    color:cyan
    
    
}
header{ 
    height: 230px;
    background: url(imagenes/yodaa.jpg) no-repeat left, url(imagenes/batmann.jpg) no-repeat right, url(imagenes/minionss.jpg) center no-repeat, url(imagenes/chavoo.jpg);
    padding-top: 10px;
    box-sizing: border-box;
    border: blue solid 4px;
    border-radius: 10px;
    z-index: 1000;
    /*inicio de sticky*/
    position: sticky;
    top: 2%;
    /*fin de sticky*/
}

#cabeza { 
    
    height: 60px;
    width: 350px;
    background-color: white;
    border: blue solid 2px;
    border-radius: 25px;
    margin-left: auto;
    margin-right: auto;
   
    
}

h1, h3 {
    margin: 0;
    text-align: center;
    font-family: 'Delicious Handrawn', cursive;
    text-shadow: black 2px 2px ;
    color: cyan;
    
}



#botones {
    width: 400px;
    height: 40px;
    margin-left: 10px;
    margin-top: 70px;
    float: left;   
}
#botones ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display:flex;
    justify-content: space-around;

}
#botones ul li {
    flex-grow: 1;
    text-align: center;
}
#botones ul li a {
    color: darkorange;
    font-weight: bold;
    text-decoration: none;
    text-shadow: black 2px 2px;
    background-color: darkgrey;
    border: blue solid 2px;
    display: block;
    line-height: 40px;
    border-radius: 30px;
}

#botones  li a:hover{
    background-color: white;
}

#extra { 
  width: 150px;
  height:40px ;
  background-color: magenta;
  float: right ;
  margin-right: 40px;
  margin-top: 40px;
  text-align: center;
  line-height: 40px;
  display:block;
  border-radius: 10px; 
  border: blue solid 2px;
  text-decoration: none;
}
#extra:hover{
    background-color: white;
}

#seccion1{
    height: 900px;
    box-sizing: border-box;
    padding: 1%;
     
}
.s1{
    width: 360px;
    background: -webkit-linear-gradient(top, #9C19E7, #3d87e9);
    float: right;
    border-radius: 25px;
    margin-left: 50px;
    margin-top: 12px;
    margin-right: 50px;
    margin-bottom: 12px;

}

#seccion2{
    height: 1000px; 
    padding: 1%;
    border-radius: 10px;
    box-sizing: border-box;
}

.s2{
    width: 360px;
    background: -webkit-linear-gradient(top, #9C19E7, #3d87e9);
    float: right;
    border-radius: 25px;
    margin-left: 50px;
    margin-top: 12px;
    margin-right: 50px;
    margin-bottom: 12px;

}


#seccion3 {
    height: 1100px;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 1%;
    
}


#secc3_1{
    width: 365px;
    height: 450px;
    float:left;
    margin-left: 40px;
    margin-top: 10px;
    margin-right: 40px;
    margin-bottom: 40px;
    border: blue solid 3px;
    border-radius: 10px;
    font-size: 23px;
}
#secc3_2{
    width: 365px;
    height: 450px;
    float:left;
    margin-left: 40px;
    margin-top: 10px;
    margin-right: 40px;
    margin-bottom: 40px;
    border: blue solid 3px;
    border-radius: 10px;
    font-size: 23px;
}
.class_secc3 {
    color: cyan;
    text-shadow: black 2px 2px;
    text-align: center;
    font-size: x-large;
    height: 20 px;
    width: 150px;
    border: blue solid 3px;
    border-radius: 10px;
    float: right;
    margin-right: 220px;
}
.class1_secc3 {
    border-color: blue solid 3px;
    border-radius: 10px;
}

#ids3{
    width: 800px;
    height: 255px;
    border: blue solid 3px;
    border-radius: 10px;
    margin: auto;
    clear: left;
}

#botones2 ul li {
        flex-grow: 1;
        text-align: center;
}
#botones2 ul li a {
        color: darkorange;
        font-weight: bold;
        text-decoration: none;
        text-shadow: black 2px 2px;
        background-color: darkgrey;
        border: blue solid 2px;
        display: block;
        line-height: 40px;
        border-radius: 30px;
}

.marco4 {
    border: blue solid 3px;
    border-radius: 10px; 
    background-color: darkgray;
    box-sizing: border-box;
}

#pie{
    height: 200px;
    box-sizing: border-box;
    padding: 1%;
    background-image: url(imagenes/pexels-hilal-i̇lhan-13670168.jpg);
    background-size: 350px ;
    border: blue solid 2px;
    border-radius: 10px;
}
.p1{
    width: 170px;
    height: 60px;
    background-color: aqua;
    margin-top: 40px;
    margin-left: 120px;
    float: left;
    font-size: x-large;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    line-height: 60px;
    display: block;
    border-radius: 10px;
    border: blue solid 2px;
}
footer div:hover{
    background-color: white;
}

.tam-conejito {
    width: 200px;
    border-radius: 35px 35px 35px 35px ;
    margin-left: 20%;
    margin-top: 10px;
    border: darkorange solid 10px;
    
}
.titulo1 {
    color: beige;
    text-align: center;
}
.letra {
 color: black;
 text-decoration: none;
}
.titulo2 {
    color: black;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    text-shadow: none;
    font-size: medium;
}
span {
    color:aqua;
    text-shadow: black 1px 1px;
    -webkit-text-stroke: black;
    font-family:'Delicious Handrawn', cursive; 
    font-size: x-large;
}
p {
    font-family:'Delicious Handrawn', cursive;
    color:black;
    font-size: x-large;
    
}
.dad{
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: Verdana, Geneva, Tahoma, sans-serif ;
    color: black;
    background-color: bisque;
}
.ded{
    float: right;
    color: black;
    margin-bottom: 5px;


}

/*responsive*/

@media all and (min-width: 600px) and (max-width: 1024px) {

    header,
    section,
    footer {
        width: 595px;
    }
    header {
        height: 240px;
        padding-top: 5px;
    }
    #cabeza {
        height: 43px;
        width: 210px;
    }

    h1 {
        font-size: larger;
    }

    #botones {
        width: 350px;
        height: 35px;
        margin-left: 5px;
        margin-top: 100px;
    }

    #extra {
        width: 100px;
        margin-right: 70px;
        margin-top: 70px;
    }
    #seccion1 {
        height: 1600px;
    }

    .s1 {
        width: 360px;
        height: 360px;
        float: none;
        margin-left:auto;
       
        margin-right:auto;
        
    }

    #seccion2 {
        height: 1550px;
        padding: 5%;
        box-sizing: border-box;
    }
    .s2 {
        width: 360px;
        height:360px;
        float: none;
        margin-left:auto;
        margin-right: auto;
        
    }

    #seccion3 {
        height: 1300px;
       
       
    }

    
    #secc3_1 {
    width: 365px;
    font-size: smaller;
    height: 400px;
    margin-right:  auto;
    margin-left: auto;
    margin-top:40px;
    float: none;
    border: blue solid 3px;
    border-radius: 10px;
    }
    
    #secc3_2{
    width: 365px;
    font-size: smaller;
    height: 400px;
    margin: auto;
    margin-top: 30px;
    float: none;
    border: blue solid 3px;
    border-radius: 10px;
    }
    .class_secc3 {
        font-size: smaller;
        height: 20 px;
        width: 150px;
        border: blue solid 3px;
        border-radius: 10px;
        float: right;
        margin-right: 90px;
        margin-bottom: 10px;
       }
       .class1_secc3 {
        border-color: blue solid 3px;
        border-radius: 10px;
        margin-bottom: 3px;
        margin-top: 3px;
       }

    #ids3 {
        width: 550px;
        height: 250px;
        margin-right: 14px;
        clear: left;
    }

    
    #pie {
        height: 150px;
        box-sizing: border-box;
        padding: 1%;
        background-image: url(imagenes/pexels-hilal-i̇lhan-13670168.jpg);
        background-size: 350px;
    }

    .p1 {
        width: 160px;
        height: 50px;
        background-color: aqua;
        margin-top: 30px;
        margin-left: 15px;
        float: left;
       
    }
    p {
        font-family:'Delicious Handrawn', cursive;
        color:black;
        font-size: smaller;
        
    }
    .dad{
        margin-bottom: 10px;
        margin-top: 10px;
        font-family: Verdana, Geneva, Tahoma, sans-serif ;
        font-size: small;
        color: black;
        background-color: bisque;
    }
    .ded{
        float: right;
        color: black;
        margin-bottom: 5px;

 }
}

/*renponsive para menos de 599px*/

@media all and (max-width: 599px) {
header,
section,
footer {
    width: 100%;
    box-sizing: border-box;
    font-size: medium;
    
  
}

header {
    height: 230px;
 
    padding-top: 0px;
    box-sizing: border-box;
   
    /*inicio de sticky*/
    position: relative;
    top: 0;
    /*fin de sticky*/
}

#cabeza {

    height: 40px;
    width: 250px;
   
    margin-top: 0px;
    
    
}

h1 {
    margin: 0;
   

}

#botones {
    width: 250px;
    height: 25px;
    margin-left: 5px;
    margin-top: 90px;
    float: left;
}







#extra {
    width: 100px;
    height: 20px;
    margin-right: 60px;
    margin-top: 100px;
    line-height: 20px;
}
#seccion1 {
    height: 1300px;
}
.s1 {
    float: none;
    margin-left:auto;
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: 5px;
}
#seccion2 {
    height: 1250px;
}
.s2 {
  
    float:none;
    margin-left:auto;
    margin-top:5px;
    margin-right:auto;
    margin-bottom:5px;
}

#seccion3 {
    height: 700px;
    box-sizing: border-box;
}
    #secc3_1{
        font-size: smaller;
        height: 200px;
        float:none;
        margin: auto;
        margin-top: 40px;
      
    }
    #secc3_2{
        font-size: smaller;
        height: 200px;
        float:none;
        margin: auto;
        margin-top: 30px;
       
       
    }
    .class_secc3 {
       
        font-size: large;
        height: 20 px;
        width: 100px;
     
       
        float: right;
        margin-right: 80px;
    }
    

.s3 {
    width: 365px;
    height: 400px;
    
    float: none;
    margin-left: auto;
    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 40px;
}

#ids3 {
    width: 399px;
    height: 150px;
    
    margin: auto;
    clear: left;
}

#pie {
    height: 220px;
    box-sizing: border-box;
    padding: 1%;
    background-image: url(imagenes/pexels-hilal-i̇lhan-13670168.jpg);
    background-size: 350px;
}

.p1 {
    width: 120px;
    height: 30px;
   
    margin-top: 120px;
    margin-left: 30px;
   
    font-size: medium;
  
    line-height: 30px;
   
  
}


.tam-conejito {
    width: 150px;
   
    margin-left: 27%;
    
    
    border: solid 10px;
    border-image: url(imagenes/pexels-hilal-i̇lhan-13670168.jpg) 15 repeat round ;
}
p {
    font-family:'Delicious Handrawn', cursive;
    color:black;
    font-size: smaller;
    
}
.dad{
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: Verdana, Geneva, Tahoma, sans-serif ;
    font-size: small;
    color: black;
    background-color: bisque;
}
.ded{
    float: right;
    color: black;
    margin-bottom: 5px;


}
}