@charset "UTF-8";
@font-face{font-family: "pp";src:url(fuentes/Condiment/Condiment-Regular.ttf);}
@font-face{font-family: "pp2";src:url(fuentes/Supermercado_One/SupermercadoOne-Regular.ttf);}


body{
    background-image: url(imagenes/fondo2.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100%;
    height: 100%;

}

p{
    text-indent: 100px;
}

strong{
    font-family: 'pp2', cursive;
}

h1{
    width: 800px;
    font-family: "pp","serif";
    text-decoration: underline;
}

h2{
    font-family: "pp","serif";
    padding: 5px;
    border: 1px solid black;
    border-style: dotted;
}

#cont1{
    float: left;
    width: 500px;
}

#cont2{
    float: left;
    width: 700px;

}

#cont1 p{

    padding: 5px
}

#cont2 p{
    
        padding: 5px
    }

    #codigo{
        float: left;
        width: 500px;
        height: 400px;
        color: blue;
       
    }
    #codigo p{
        color: black;
    }

    #codigo2{
        width: 700px;
        height: 400px;
        color: blue;
        float: left;
    }
    #codigo2 p{
        color: black;
    }

#anim1{
width: 100px;
height: 100px;
background-color: red;
animation-name: ani1;
animation-duration: 10s;
}

@keyframes ani1{
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

#anim2{
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: ani2;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

@keyframes ani2{
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:400px; top:0px;}
    50%  {background-color:blue; left:400px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}


#anim3{
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
animation: move 5s infinite;
}

#anim3 {animation-timing-function: linear;}

#anim4{
width: 100px;
height: 50px;
background-color: blue;
font-weight: bold;
position: relative;
animation: move 5s infinite;
}

#anim4 {animation-timing-function: ease;}

#anim5{
width: 100px;
height: 50px;
background-color: green;
font-weight: bold;
position: relative;
animation: move 5s infinite;
}

#anim5 {animation-timing-function: ease-in;}

#anim6{
width: 100px;
height: 50px;
background-color: white;
font-weight: bold;
position: relative;
animation: move 5s infinite;
}

#anim6 {animation-timing-function: ease-out;}

#anim7{
width: 100px;
height: 50px;
background-color: black;
color: white;
font-weight: bold;
position: relative;
animation: move 5s infinite;
}

#anim7 {animation-timing-function: ease-in-out;}

@keyframes move {
    from {left: 0px;}
    to {left: 350px;}
}

#enlaces{
    height: 100px;

}

#enlaces p{

    display: inline;
    position: relative;
    left: 500px;
    top:50px;
}

#enlaces p a{
    background: rgb(91, 183, 226);
    color: black;
    padding: 5px;

}

#enlaces p a:hover{
    background: black;
    color:white;
    font-weight: bolder;
}