@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

body {
    background-image: url(fondo.jpg);
    background-attachment: fixed;
    background-repeat: repeat;
    background-size: auto;
    font-family: "Nunito Sans", sans-serif;
    margin: 0;
    padding: 0;
}

.margin-top-nav {
    margin-top: 7rem !important; 
}

div.paper.container {
    background-color: rgb(255, 255, 255) !important; 
    border: 3px solid #f5b5d8 !important;
    box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.15);
    padding: 2.5rem !important;
}

h1, h2, .article-title {
    font-family: "Playfair Display", serif;
    font-weight: 800;
    color: #be4b81;
}

h3, h4, .sidebar-title, .modal-title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 700;
}

.text-justify {
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.6 !important;
}

nav {
    background-color: rgb(228, 179, 215) !important;
    border-bottom: 3px solid rgb(214, 110, 167) !important;
}

nav .nav-brand h3 a {
    color: #000000 !important;
    text-decoration: none;
}

nav .inline li {
    background-color: rgb(254, 235, 255) !important;
    border: 2px solid rgb(165, 50, 113) !important;
    padding: 4px 10px !important;
    margin: 0 4px;
    transition: all 0.2s ease;
}

nav .inline li a {
    color: rgb(153, 28, 91) !important;
    text-decoration: none;
    font-weight: bold;
}

nav .inline li:hover {
    background-color: rgba(129, 21, 71, 0.7) !important;
    transform: translateY(-2px);
}

nav .inline li a:hover {
    color: rgba(255, 0, 128, 0.555) !important;
}

.card {
    background-color: rgba(255, 255, 255, 0.9) !important; 
    border: 3px solid #000000 !important;
    box-shadow: 8px 8px 0px rgb(250, 154, 194) !important; 
    transition: all 0.2s ease;
}

.card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 11px 11px 0px rgb(219, 112, 147) !important; 
}

.collapsible-body {
    background-color: rgba(238, 125, 187, 0.767) !important;
    padding: 1rem !important;
    border-top: 2px dashed #be2974 !important;
}

.collapsible-body img {
    margin-top: 0.8rem;
    display: block;
}

.modal-body {
    background-color: rgb(255, 198, 227) !important; 
    border: 4px solid #be2974 !important;
    border-radius: 0 !important;
    box-shadow: 12px 12px 0px #ffbee4 !important;
}

footer.footer-box {
    background-color: rgb(255, 185, 218) !important; 
    color: #ffffff !important;
    padding: 25px;
    text-align: center;
    border-top: 3px solid #be2974 !important;
    margin-top: 4rem;
}

footer.footer-box h5 {
    color: #ffffff !important;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

@media screen and (max-width: 600px) {
    .margin-top-nav {
        margin-top: 9rem !important; 
    }
    div.paper.container {
        padding: 1rem !important;
    }
}