/**
 * Theme Name: Hogwarts Custom Child
 * Template:   hogwarts-custom
 */

/* General */
body {
    background-image: url(/wp-content/uploads/2024/02/Site-BG.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#main {
    padding-top: 50px !important;
}
.box-shadow-vertical {
    box-shadow: 0 5px 30px rgba(0,0,0,0.75) !important;
}
.multiply {
    mix-blend-mode: multiply;
}

/* Typography */
p {
    font-family: 'Fondamento', serif;
    font-size: 16px;
}
.page-title {
    font-size: 48px;
    font-family: "Fondamento", cursive;
}
h1,h2,h3,h4,h5,h6 {
    font-family: "Fondamento", cursive;
}

/* Nav */
.nav-link {
    font-family: "Fondamento", cursive !important;
    background-color: #000 !important;
    color: #fff !important;
    margin: 0 5px;
    padding: 5px 15px !important;
    border-bottom: 3px solid #fff !important;
}
.nav-link:hover {
    background-color: #fff !important;
    color: #000 !important;
    border-bottom: 3px solid #000 !important;
}
.nav-link.active {
    background-color: goldenrod !important;
    color: #000 !important;
}
.hide {
    display: none;
}

/* Buttons */
.hog-btn {
    border: none;
    font-family: "Fondamento", cursive !important;
    background-color: #000 !important;
    color: #fff !important;
    margin: 0 5px;
    padding: 5px 15px !important;
    border-bottom: 3px solid #fff !important;
}
.hog-btn:hover {
    background-color: #fff !important;
    color: #000 !important;
    border-bottom: 3px solid #000 !important;
}

/* Colors */
 .school-colors {
    background-image: url(/wp-content/uploads/2024/02/Hogwarts-Nav-BG.jpg) !important;
    background-size: 100%;
    background-position: center;
    box-shadow: 0 5px 30px rgba(0,0,0,0.25);
 }
 .bg-gryffindor {
    background-color: #AE0001;
 }
 .bg-slytherin {
    background-color: #2A623D;
 }
 .bg-ravenclaw {
    background-color: #222F5B;
 }
 .bg-hufflepuff {
    background-color: #F0C75E;
 }
 .bg-gold {
    background-color: goldenrod;
    background-image: linear-gradient(#603913, goldenrod, #603913);
 }
 .bg-black {
    background-color:#000;
 }

/* Custom Backgrounds */
.bg-old {
    background-color: blanchedalmond;
    box-shadow:inset 0 0 20px 0 rgba(101, 39, 5, 0.5), 0 0 20px 0 rgba(0,0,0,0.50);
}

 /* House Banners */
 .banner {
    width: 100%;
 }
 .gryffindor-banner {
    background-image: url(/wp-content/uploads/2024/03/Gryffindo-Banner-BG.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
 }
 .slytherin-banner {
    background-image: url(/wp-content/uploads/2024/03/Slytherin-Banner-BG.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
 }
 .ravenclaw-banner {
    background-image: url(/wp-content/uploads/2024/03/Ravenclaw-Banner-BG.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
 }
 .hufflepuff-banner {
    background-image: url(/wp-content/uploads/2024/03/Hufflepuff-Banner-BG.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
 }

 /* Mobile */
 .mobile {
    display: none;
 }
 .mobile-inline {
    display: none;
 }
 .desktop {
    display: block;
}

 @media screen and (max-width: 1080px) {
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }
    .mobile-inline {
        display: inline;
    }
    .points {
        font-size: 12px;
    }
 }