@font-face {
    font-family: abbassy_script;
    src:
        url('../fonts/abbassy_script.otf'),
        url('../fonts/abbassy_script.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: 'Spectral', serif;
}

.abassys {
    font-family: 'abbassy_script', cursive;
}

.spectral-extralight {
    font-family: "Spectral", serif;
    font-weight: 200;
    font-style: normal;
}

.spectral-light {
    font-family: "Spectral", serif;
    font-weight: 300;
    font-style: normal;
}

.spectral-regular {
    font-family: "Spectral", serif;
    font-weight: 400;
    font-style: normal;
}

.spectral-medium {
    font-family: "Spectral", serif;
    font-weight: 500;
    font-style: normal;
}

.spectral-semibold {
    font-family: "Spectral", serif;
    font-weight: 600;
    font-style: normal;
}

.spectral-bold {
    font-family: "Spectral", serif;
    font-weight: 700;
    font-style: normal;
}

.spectral-extrabold {
    font-family: "Spectral", serif;
    font-weight: 800;
    font-style: normal;
}

.spectral-extralight-italic {
    font-family: "Spectral", serif;
    font-weight: 200;
    font-style: italic;
}

.spectral-light-italic {
    font-family: "Spectral", serif;
    font-weight: 300;
    font-style: italic;
}

.spectral-regular-italic {
    font-family: "Spectral", serif;
    font-weight: 400;
    font-style: italic;
}

.spectral-medium-italic {
    font-family: "Spectral", serif;
    font-weight: 500;
    font-style: italic;
}

.spectral-semibold-italic {
    font-family: "Spectral", serif;
    font-weight: 600;
    font-style: italic;
}

.spectral-bold-italic {
    font-family: "Spectral", serif;
    font-weight: 700;
    font-style: italic;
}

.spectral-extrabold-italic {
    font-family: "Spectral", serif;
    font-weight: 800;
    font-style: italic;
}

.page-background {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.design-page {
    background-color: #ffffff;
}

.bg-macha {
    background-color: #67785b;
}

.bg-pink {
    background-color: #efe3d3;
}

.text-macha {
    color: #809671;
}

.background-07 {
    width: 100%;
    height: max-content;
    background-image: url(../background/fondo07.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background-08 {
    width: 100%;
    height: max-content;
    background-image: url(../background/fondo08.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.animate_time {
    animation-duration: 6s;
}