@import url(variable.css);

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: cover; */
}

.info1{
    background-image: url('../assets/img/pergamino-home.jpg');
    /* background-size: cover; */
    /* background-position: center; */
    width: 30%;
    border-radius: 20px;
    height: 15%;
    display: flex;
    text-align: center;
    padding: 10px;
    /* margin-top: 10%; */
    margin-left: 30%;
    margin-top: 15px;
}
.info1 p {
    color: #070303; /* estilo tinta antigua */
    font-family: 'pirate';
    font-size: 20px;
    font-weight: bold;
}

.info {
    background-image: url('../assets/img/pergamino-home.jpg');
    /* background-size: cover; */
    /* background-position: center; */
    width: 28%;
    border-radius: 20px;
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    margin-top: 2%;
    margin-left: 5%;
}

.info p {
    color: #000000; /* estilo tinta antigua */
    font-family: 'pirate';
    font-size: 20px;
    font-weight: bold;
}

.info2 {
    background-image: url('../assets/img/pergamino-home.jpg');
    /* background-size: cover; */
    /* background-position: center; */
    width: 28%;
    border-radius: 20px;
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    margin-top: 2%;
    margin-left: 5%;
}

.info2 p {
    color: #000000; /* estilo tinta antigua */
    font-family: 'pirate';
    font-size: 20px;
    font-weight: bold;
}


.container-1{
    align-self: top;
    align-items: center;
    justify-items: center;
    text-align: center;
    
}


.button1{
    /* background-color: #e60000; */
    position: fixed;
    top: 3%;
    right: 15%;
    /* background-color: #333;*/
    /*color: white; */
    padding: 10px;
    z-index: 100;
    cursor: pointer;
}

.button1 button{ 
    width: 155px;
    height: 60px;
    background: url('marco-con-picos.png') no-repeat center center;
    background-size: cover;
    font-family: 'Cinzel', serif;
    color: goldenrod;
    font-size: 1rem;
    display: flex;
    font-family: 'D&D', serif;
    align-items: center;
    align-self: flex-end;
    justify-content: center;
    text-shadow: 1px 1px 2px black;
    text-transform: uppercase;
    justify-self: center;
    background-color: #570202c7;
    text-shadow:
    -1px -1px 0 black,
    1.5px -1px 0 black,
    -1px  1px 0 black,
    1.5px  1px 0 black;
    border-radius: 15px;
}

.button1 a{
    text-decoration: none;
}

.button2{
    /* background-color: #e60000; */
    position: fixed;
    top: 3%;
    right: 1%;
    /* background-color: #333;
    color: white; */
    padding: 10px;
    z-index: 1000;
    cursor: pointer;
}

.button2 button{ 
    width: 155px;
    height: 60px;
    background: url('marco-con-picos.png') no-repeat center center;
    background-size: cover;
    font-family: 'Cinzel', serif;
    color: goldenrod;
    font-size: 1rem;
    display: flex;
    font-family: 'D&D', serif;
    align-items: center;
    align-self: flex-end;
    justify-content: center;
    text-shadow: 1px 1px 2px black;
    text-transform: uppercase;
    justify-self: center;
    background-color: #570202c7;
    text-shadow:
    -1px -1px 0 black,
    1.5px -1px 0 black,
    -1px  1px 0 black,
    1.5px  1px 0 black;
    border-radius: 15px;
}

.button2 a{
    text-decoration: none;
}

.info1 p {
    color: #8c0000; /* estilo tinta antigua */
    font-family: 'pirate';
    font-size: 20px;
    font-weight: bold;
}
/* Para dispositivos con orientacion orizontal */
/* @media (orientation: landscape) { */
    body {
    background-image: url('https://image.api.playstation.com/vulcan/ap/rnd/202304/1412/6f8f23277726a505d6c3738c89a2968d3d177fd3737d4377.png');
    background-size: cover;
    background-position: center;
    /* background-repeat: no-repeat; */
    min-height: 100vh;
    }
/* } */

.info1{
    background-image: url('../assets/img/pergamino-home.jpg');
    /* background-size: cover; */
    /* background-position: center; */
    width: 25%;
    border-radius: 20px;
    height: 15%;
    display: flex;
    text-align: center;
    padding: 10px;
    /* margin-top: 10%; */
    margin-left: 30%;
}
.info1 p {
    color: #070303; /* estilo tinta antigua */
    font-family: 'pirate';
    font-size: 20px;
    font-weight: bold;
}




  /* Para dispositivos con orientación vertical */
@media (orientation: portrait) {
    body {
    background-image: url('https://preview.redd.it/blasphemous-iphone-wallpapers-v0-uos02c3zxvgc1.jpg?width=640&crop=smart&auto=webp&s=2c401f9c67c5a0b39aaa470756ac0fd60878e76e');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    }
    /* boton next */
    .button2{
        /* background-color: #e60000; */
        position: fixed;
        top: 3%;
        right: 1%;
        /* background-color: #333;
        color: white; */
        padding: 10px;
        z-index: 1000;
        cursor: pointer;
        /* width: 23.5%; */
    }
    
    .button2 button{ 
        width: 120px;
        height: 50px;
        background-size: cover;
        font-family: 'Cinzel', serif;
        color: goldenrod;
        font-size: 0.8rem;
        display: flex;
        font-family: 'D&D', serif;
        align-items: center;
        align-self: flex-end;
        justify-content: center;
        text-shadow: 1px 1px 2px black;
        text-transform: uppercase;
        justify-self: center;
        background-color: #570202c7;
        text-shadow:
        -1px -1px 0 black,
        1.5px -1px 0 black,
        -1px  1px 0 black,
        1.5px  1px 0 black;
        border-radius: 15px;
    }
    
    .button2 a{
        text-decoration: none;
    }
    /* boton back */
    .button1 button{
        width: 120px;
        height: 50px;
        background: url('marco-con-picos.png') no-repeat center center;
        background-size: cover;
        font-family: 'Cinzel', serif;
        color: goldenrod;
        font-size: 0.8rem;
        display: flex;
        font-family: 'D&D', serif;
        align-items: center;
        align-self: flex-end;
        justify-content: center;
        text-shadow: 1px 1px 2px black;
        text-transform: uppercase;
        justify-self: center;
        background-color: #570202c7;
        text-shadow:
        -1px -1px 0 black,
        1.5px -1px 0 black,
        -1px  1px 0 black,
        1.5px  1px 0 black;
        border-radius: 15px;
    }

    .button1{
        /* background-color: #e60000; */
        width: 23.5%;
        left: 2%;
        top: 3%;
        cursor: pointer;
    }
    

    .container-1{
    align-self: top;
    align-items: center;
    justify-items: center;
    text-align: center;
}

.info1{
    background-image: url('../assets/img/pergamino-home.jpg');
    /* background-size: cover; */
    /* background-position: center; */
    width: 65%;
    border-radius: 20px;
    height: 15%;
    display: flex;
    text-align: center;
    padding: 10px;
    /* margin-top: 10%; */
    margin-left: 25%;
}
.info1 p {
    color: #070303; /* estilo tinta antigua */
    font-family: 'pirate';
    font-size: 20px;
    font-weight: bold;
}

.info {
    background-image: url('../assets/img/pergamino-home.jpg');
    /* background-size: cover; */
    /* background-position: center; */
    width: 65%;
    border-radius: 20px;
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    /* margin-top: 200px; */
    margin-left: 5%;
}

.info p {
    color: #000000; /* estilo tinta antigua */
    font-family: 'pirate';
    font-size: 20px;
    font-weight: bold;
}


.info2 {
    background-image: url('../assets/img/pergamino-home.jpg');
    /* background-size: cover; */
    /* background-position: center; */
    width: 65%;
    border-radius: 20px;
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    /* margin-top: 100px; */
    margin-left: 5%;
}

.info2 p {
    color: #000000; /* estilo tinta antigua */
    font-family: 'pirate';
    font-size: 20px;
    font-weight: bold;
}

.general_info{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 25%;
}

}