/* CSS Reset */

* {
    margin: 0;
    padding: 0;
}

/* General */
body {
    color: #FFF;
    font-family: "Pontano Sans", sans-serif;
    font-weight: 400;
}

h1,
h2 {
    font-family: "Marcellus", sans-serif;
}

a {
    text-decoration: none;
    color: #FFF;
}

ul li {
    list-style-position: inside;
    text-align: center;
}

/* Style links in text */

p>a {
    text-decoration: underline;
    background-color: transparent;
}

p>a:hover {
    color: #cf9d00;
    text-decoration: none;
}

/* Align placeholder text on forms */
::placeholder {
    text-align: center;
}

/* Round corners of images on custom pages */
.custom-img {
    border-radius: 20px;
}

/* Utility classes */
.teal {
    background-color: #007696;
}

.raspberry {
    background-color: #a30041;
}

.emerald {
    background-color: #016c62;
}

/* Customised Bootstrap buttons */
.btn-info,
.btn-primary {
    --bs-btn-bg: #007696;
    --bs-btn-color: #FFF;
    --bs-btn-border-color: #FFF;
    --bs-btn-hover-color: #FFF;
    --bs-btn-hover-bg: #cf9d00;
    --bs-btn-hover-border-color: #FFF;
    --bs-btn-focus-shadow-rgb: 11, 172, 204;
    --bs-btn-active-color: #007696;
    --bs-btn-active-bg: #FFF;
    --bs-btn-active-border-color: #cf9d00;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #FFF;
    --bs-btn-disabled-bg: #016c62;
    --bs-btn-disabled-border-color: #016c62;
    border-width: 2px;
    border-radius: 10px;
}

/* Customised Bootstrap carousel controls*/

.carousel-control-next-icon,
.carousel-control-prev-icon {
    background-color: #cf9d00;
    border: solid white 1px;
    border-radius: 5px;
}

/* HEADER */

/* Default navbar menu item style*/
a.nav-link {
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 10px;
    border: 2px solid transparent;
    color: #FFF;
}

/* Visited navbar menu item colour*/
a.nav-link:visited {
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 10px;
    color: #FFF;
}

/* Hover over navbar menu item colour */
a.nav-link:hover {
    background-color: #cf9d00;
    color: #FFF;
    border-radius: 10px;
    border: 2px solid #FFF;
}

/* Clicked navbar menu item colour */
a.nav-link:active {
    background-color: #FFF;
    color: #007696;
    border-radius: 10px;
    border: 2px solid #cf9d00;
}

/* Currently active page indicator colour */
a.selected {
    background-color: #007696;
    color: #FFF;
    border-radius: 10px;
    border: 2px solid #FFF;
}

/* Navbar background colour */
.bg-body-tertiary {
    background-color: #007696 !important;
}

/* Hamburger menu colours*/
/* Info taken from https://www.youtube.com/watch?v=45QSuJaHEss */
.navbar-toggler {
    --bs-navbar-toggler-border-color: #FFF;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    color: #FFF;
}

/* Target the header title */
header h1 {
    text-align: center;
}

/* Set colour for navbar list items */
li.nav-item a {
    color: #FFF;
}

/* HOME (INDEX) PAGE */

/* Page sections */
.intro-card {
    background-color: #a30041;
    border: solid 1px #FFF;
    border-radius: 20px;
    color: #FFF;
}

.podcast-card {
    background-color: #016c62;
    border: solid 1px #FFF;
    border-radius: 20px;
    color: #FFF;
}

.live-card {
    background-color: #a30041;
    border: solid 1px #FFF;
    border-radius: 20px;
    color: #FFF;
}

.merch-card {
    background-color: #016c62;
    border: solid 1px #FFF;
    border-radius: 20px;
    color: #FFF;
}

.list-card {
    background-color: #a30041;
    border: solid 1px #FFF;
    border-radius: 20px;
    color: #FFF;
}

.send {
    width: 100px;
}

/* ABOUT PAGE */

/* Page sections*/
.podcast-info-card,
.judith-info-card,
.jenny-info-card {
    border: solid 1px #FFF;
    border-radius: 20px;
    color: #FFF;
}

.judith-info-card {
    background-color: #a30041;
}

.podcast-info-card,
.jenny-info-card {
    background-color: rgb(1, 108, 98);
}

/* Round the corners of all carousels */
.carousel-inner {
    border-radius: 20px;
}

/* Round the corners of all carousel captions */
.carousel-caption>p {
    color: #FFF;
    border-radius: 20px;
}

/* MESSAGE BOARD PAGE */

/* Page sections */
.mb-card {
    background-color: #a30041;
    border: solid 1px #FFF;
    border-radius: 20px;
    color: #FFF;
}

/* CONTACT PAGE */

/* Page sections */
.contact-card {
    background-color: #016c62;
    border: solid 1px #FFF;
    border-radius: 20px;
    color: #FFF;
    width: 85%;
}

.contact-form {
    width: 95%;
    margin: 0 auto;
}

/* 404 PAGE */

/* Page sections */
.error-card {
    background-color: #a30041;
    border: solid 1px #FFF;
    border-radius: 20px;
    color: #FFF;
}

/* FOOTER */

/* Hide social media link text */
.socials {
    display: none;
}

/* Social media icons */
.fa {
    padding: 5px;
    font-size: 20px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
}

/* Instagram icon*/
.fa-instagram {
    background: #FFF;
    color: #007696;
}

.fa-instagram:hover {
    background-color: #C13584;
    border: none;
    color: #FFF;
}

.fa-instagram:active {
    background-color: #E1306C;
    color: #FFF;
}

/* Facebook icon */
.fa-facebook {
    background: #FFF;
    color: rgb(0, 118, 150);
}

.fa-facebook:hover {
    background-color: #0165E1;
    border: none;
    color: #FFF;
}

.fa-facebook:active {
    background-color: #17A9FD;
    color: #FFF;
}

/* MEDIA QUERIES */
/* Info used from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries */

/* For Bootstrap breakpoint extra small (none) */
@media (max-width: 575px) {
    body {
        padding-top: 185px;
    }

    /* Resized Bootstrap carousel controls*/

    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        border-radius: 2px;
        width: 15px;
        height: 15px;
    }
}

/* For Bootstrap breakpoint small (sm) */
@media (min-width: 576px) and (max-width: 767px) {
    body {
        padding-top: 190px;
    }
}

/* For Bootstrap breakpoint medium (md) */
@media (min-width: 768px) and (max-width: 991px) {
    body {
        padding-top: 190px;
    }
}

/* For Bootstrap breakpoint large (lg) */
@media (min-width: 992px) and (max-width: 1199px) {
    body {
        padding-top: 180px;
    }
}


/* For Bootstrap breakpoint extra large (xl) */
@media (min-width: 1200px) and (max-width: 1399px) {
    body {
        padding-top: 180px;
    }
}

/* For Bootstrap breakpoint extra extra large (xxl) */
@media (min-width: 1400px) {
    body {
        padding-top: 190px;
    }
}