@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
body { 
    background: #0E0229;
    background-image: url('../img/palma.svg'),url('../img/palma.svg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position:-400px 30px,right -400px top -60px;
    background-size:600px;
    color: white;
}
.cajon {
    font-family: 'Bebas Neue', cursive;
    margin: 0 auto;
    margin-top:-150px;

    background-color: #ffa30f;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect stroke='%23ffa30f' stroke-width='.5' width='1' height='1' id='s'/%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cuse fill='%23ffa514' href='%23s' y='2'/%3E%3Cuse fill='%23ffa514' href='%23s' x='1' y='2'/%3E%3Cuse fill='%23ffa719' href='%23s' x='2' y='2'/%3E%3Cuse fill='%23ffa719' href='%23s'/%3E%3Cuse fill='%23ffa91d' href='%23s' x='2'/%3E%3Cuse fill='%23ffa91d' href='%23s' x='1' y='1'/%3E%3C/pattern%3E%3Cpattern id='b' width='7' height='11' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23ffaa22'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' y='5' /%3E%3Cuse href='%23s' x='1' y='10'/%3E%3Cuse href='%23s' x='2' y='1'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='8'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='5' y='2'/%3E%3Cuse href='%23s' x='5' y='6'/%3E%3Cuse href='%23s' x='6' y='9'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='h' width='5' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23ffaa22'%3E%3Cuse href='%23s' y='5'/%3E%3Cuse href='%23s' y='8'/%3E%3Cuse href='%23s' x='1' y='1'/%3E%3Cuse href='%23s' x='1' y='9'/%3E%3Cuse href='%23s' x='1' y='12'/%3E%3Cuse href='%23s' x='2'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='2'/%3E%3Cuse href='%23s' x='3' y='6'/%3E%3Cuse href='%23s' x='3' y='11'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='4' y='10'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='c' width='17' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23ffac27'%3E%3Cuse href='%23s' y='11'/%3E%3Cuse href='%23s' x='2' y='9'/%3E%3Cuse href='%23s' x='5' y='12'/%3E%3Cuse href='%23s' x='9' y='4'/%3E%3Cuse href='%23s' x='12' y='1'/%3E%3Cuse href='%23s' x='16' y='6'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='d' width='19' height='17' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23ffa30f'%3E%3Cuse href='%23s' y='9'/%3E%3Cuse href='%23s' x='16' y='5'/%3E%3Cuse href='%23s' x='14' y='2'/%3E%3Cuse href='%23s' x='11' y='11'/%3E%3Cuse href='%23s' x='6' y='14'/%3E%3C/g%3E%3Cg fill='%23ffae2c'%3E%3Cuse href='%23s' x='3' y='13'/%3E%3Cuse href='%23s' x='9' y='7'/%3E%3Cuse href='%23s' x='13' y='10'/%3E%3Cuse href='%23s' x='15' y='4'/%3E%3Cuse href='%23s' x='18' y='1'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='e' width='47' height='53' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23F60'%3E%3Cuse href='%23s' x='2' y='5'/%3E%3Cuse href='%23s' x='16' y='38'/%3E%3Cuse href='%23s' x='46' y='42'/%3E%3Cuse href='%23s' x='29' y='20'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='f' width='59' height='71' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23F60'%3E%3Cuse href='%23s' x='33' y='13'/%3E%3Cuse href='%23s' x='27' y='54'/%3E%3Cuse href='%23s' x='55' y='55'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='g' width='139' height='97' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23F60'%3E%3Cuse href='%23s' x='11' y='8'/%3E%3Cuse href='%23s' x='51' y='13'/%3E%3Cuse href='%23s' x='17' y='73'/%3E%3Cuse href='%23s' x='99' y='57'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23b)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23h)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23c)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23d)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23e)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23f)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23g)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    height: 55vh;
    width: 75vw;
    border-radius: 15px;
    box-shadow: 10px 12px rgba(0, 0, 0, 0.527);
    position: relative;
    animation: bajando 3s;
    z-index: 1;
    max-width: 1024px;

}
.derecha {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: end;
align-items: center;
padding-right: 10px;
}
.division > h1 {
    margin: 0;
    font-size: 70px;
    text-align: left;
}
.division > hr {
    border: 2px solid teal;
    width: 200px;
}
.cajon > p { margin: 0;
    margin-top: 20px;
    font-size: 1.2em
}
ul { text-align: right;
    list-style: none;
    font-size: 1.5em;
}
.elmenu {
    display: flex;
    position: absolute;
    top: -55px;
    right: -15px;
    background: #ff6000;
    border-radius: 50%;
    height: 80px;
    width: 80px;
}


@keyframes bajando {
  from {bottom: 400px;}
  to {bottom: 0px;}
}
@media only screen and (min-width: 600px) {
    body {
        background-position:-450px -20px,right -500px top -60px;
        background-size:800px;
    }
    .cajon > h1 {
        font-size: 100px;
    }
    ul {
        text-align: right;
        list-style: none;
        font-size: 1.1em;
        color:red;
    }
    .cajon > hr {
        border: 2px solid teal;
        width: 200px;
    }
}
.cabezera-cajon {
    display: grid;
    max-width: 1200px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    padding: 20px;
}

.boton {
    appearance: button;
    background-color: #bd3918;
    background-image: none;
    border: 1px solid #000;
    border-radius: 4px;
    box-shadow: #ffa30f 4px 4px 0 0,#000 4px 4px 0 1px;
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    //margin: 0 5px 10px 0;
    overflow: visible;
    padding: 10px 20px;
    text-align: center;
    text-transform: none;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    max-height:45px;
  }
  
  .boton:focus {
    text-decoration: none;
  }
  
  .boton:hover {
    text-decoration: none;
  }
  
  .boton:active {
    box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
    outline: 0;
  }
  
  .boton:not([disabled]):active {
    box-shadow: #ffa30f 2px 2px 0 0, #000 2px 2px 0 1px;
    transform: translate(2px, 2px);
  }
  
  @media (min-width: 768px) {
    .boton {
      //padding: 12px 50px;
    }
  }