/* Google fonts import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Rouge+Script&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* Asterisk wildcard selector to override default styles added by the browser */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* General styles */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Generic project styles */
    color: black;
    font-family: Montserrat, sans-serif;
    /* For screen sizes 4K and up */
    max-width: 2400px;
    margin-left: auto;
    margin-right: auto;
}

h1,
h2,
h3,
h4 {
    font-family: Rubik, sans-serif;
}

.hidden-heading {
    display: none;
}

/* Change to sharp corners */
.sharp-corners,
.sharp-corners * {
    border-radius: 0;
}

/* Header */
header {
    /* white */
    background-color: #ffffff;
    padding: 4px;
    position: fixed;
    z-index: 99;
    width: 100%;
    /* hard coral */
    box-shadow: 0 2px 2px rgb(100, 100, 100);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    /* For screen sizes 4K and up */
    max-width: 2400px;
}

header a {
    text-decoration: none;
    color: inherit;
}

#logo {
    font-family: 'Rouge Script', serif;
    margin-left: 5px;
    padding: 3px;
    /* Bermuda Onion */
    color: #9b5f96;
    font-weight: 600;
}


#menu {
    list-style-type: none;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px;
    align-items: baseline;
}

#menu li {
    font-size: smaller;
    margin-right: 3px;
    padding: 3px;
}

.active {
    border-bottom: 2px solid black;
}

/* Main Content */
main {
    /* Enlarge main element to push down footer */
    flex: 1 0 auto;
    /* Add margin at the top to prevent from being covered by header */
    margin-top: 60px;
}

/* Hero section */
#hero {
    height: 600px;
    width: 100%;
    background: url(../images/index-page/worcester-city-hero.webp) no-repeat center center/cover;
    position: relative;
    /* Backup color Electric Eel if image not loaded */
    background-color: #8cbced;
}

#cover-text {
    /* Final rgba value sets the opacity so it is semi-transparent Shiva Blue */
    background-color: rgba(148, 216, 251, .7);
    font-size: 110%;
    position: absolute;
    bottom: 30px;
    width: 80%;
    min-height: 180px;
    padding: 10px 10px;
    color: #ffffff;
    text-align: center;
}

#cover-text>h2 {
    font-family: 'Rouge Script', serif;
    font-size: 3.2em;
    /* Bermuda Onion */
    color: #9b5f96;
    text-align: center;
    font-weight: 600;
}

#cover-text>h3 {
    text-align: center;
}

/* About section*/
#about {
    /* Electric Eel */
    background-color: #8cbced;
}

/* Images rounded corners */
.rounded {
    margin-top: 5px;
}

/* List items */
.list-group {
    display: flex;
    align-items: center;
}

.list-group-item:first-child {
    display: flex;
    align-self: center;
}

/* Increase width of cards */
.card {
    width: 18.5rem;
}

.card-text:last-child {
/* Add important to override Bootstraps line-height */
    line-height: 3 !important;
    text-align: center;
}

.list-group-item {
    padding: 1rem;
}

/* Custom Buttons */
.button-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 1rem 12px;
}

.custom-button {
    /* Dynamo */
    background-color: #97406a;
    border: #97406a;
}

.custom-button:hover {
    /* Bermuda Onion */
    background-color: #9b5f96;
    border: #9b5f96;
}

.custom-button:active {
    /* Lavender Purple, add important to override Bootstraps color */
    background-color: #977ebb !important;
    border: #977ebb !important;
}

/* Classes page */
#classes {
    padding-top: 2rem;
}

.card-body {
    flex: 0 1 auto;
}

#classes>.custom-cards {
    justify-content: space-evenly;
    padding: 1rem;
    gap: 10px;
}

#classes>.selector-for-some-widget {
    box-sizing: content-box;
}

#classes li {
    font-size: small;
    font-weight: 500;
}

#timetable-rota>h3 {
    text-transform: uppercase;
}

/* Change table color coding from Stackoverflow No. 169 */
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
    /* Portage */
    background-color: rgba(143, 158, 217, 0.5);
}

.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
    /* Lavender Purple */
    background-color: rgba(151, 126, 187, 0.5);
}

.table {
    /* Dynamo */
    border-color: #97406a;
}

/* Shop page */
#shop {
    padding: 1rem;
}

/* Add important to override Bootstraps color */
#shop .custom-font-banner p {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Add important to override Bootstraps color */
#shop p {
    color: #ffffff !important;
    margin-bottom: 0.5em;
    font-size: small;
}

/* Contrast for the text */
#shop .custom-bg-label {
    /* Dynamo */
    background-color: #97406a;
    padding: 18px 5px;
}

/* Contact page */
#contact {
    background: url(../images/contact-page/contact-background.webp) no-repeat center center/cover;
    padding: 20px 10% 20px 10%;
    flex-grow: 1;
    /* Backup color if image not loaded Electric Eel */
    background-color: #8cbced;
}

#contact-form {
    /* Final rgba value sets the opacity so it is semi-transparent Bermuda Onion */
    background-color: rgba(155, 95, 150, .7);
    color: #ffffff;
    padding: 20px;
}

/* Footer */
footer {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    /* Shiva Blue */
    background-color: #94d8fb;
}

#social-networks {
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
    text-align: center;
    margin: 0;
    margin-bottom: 5px;
    padding: 5px;
}

#social-networks i {
    font-size: 150%;
    padding: 5px;
    /* Dynamo */
    color: #97406a;
}

h4,
#registered-marks h3 {
    font-size: 1.2em;
    font-weight: 300;
    margin: 0;
    margin-bottom: 5px;
}

#registered-address {
    font-size: 1em;
    margin: 0;
    margin-bottom: 5px;
}

#copyright {
    font-size: 0.8em;
    margin: 0;
    margin-bottom: 5px;
}

#copyright>i {
    font-size: xx-small;
}

/* Media query; mobiles smaller (315px and down) - hide the home link */
@media screen and (max-width: 315px) {

    /* Header */
    #home-link {
        display: none;
    }
}

/* Media query: tablets and larger (576px and up) */
@media screen and (min-width: 576px) {

    /* Contact page */
    #contact {
        background-position: center;
        position: relative;
        height: 100vh;
    }

    #contact-form {
        max-width: 400px;
        position: relative;
        left: 10%;
        top: 10%;
    }
}

/* Media query: tablets and larger (768px and up) */
@media screen and (min-width: 768px) {

    /* Header */
    header {
        box-shadow: none;
        padding-bottom: 10px;
    }

    nav {
        margin-top: 1rem;
    }

    #menu {
        gap: 20px;
    }

    #menu li {
        font-size: 1.2em;
        padding: 5px;
        letter-spacing: 1px;
    }

    /* To increase Bootstraps font size */
    #logo {
        font-size: calc(1.375rem + 2vw)
    }

    /* Hero */
    #cover-text {
        width: 330px;
        right: 50px;
    }

    .button-group {
        gap: 120px;
    }

    .custom-button {
        padding: 14px 28px;
    }

    /* Contact page */
    #contact-form {
        padding-top: 0;
    }

    /* Footer */
    footer {
        flex-direction: row;
    }

    #social-networks {
        width: 50%;
        height: 100%;
        margin: 0 20px;
        padding: 5px;
    }

    #registered-marks {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        height: 100%;
        padding: 5px;
    }

    #copyright {
        margin-right: 25px;
    }
}

/* Media query: laptops and desktops (992px and up) */
@media screen and (min-width: 992px) {

    /* Header */
    #menu li {
        font-size: calc(1.2em + 0.3vw);
    }

    #menu a:hover {
        border-bottom: 2px solid black;
    }

    /* Main */
    /* Shop page */
    #shop .custom-font-banner p {
        font-size: 1em;
    }

    /* Contact page */
    #contact-form {
        max-width: 500px;
        margin: 1.5rem 0;
    }

    /* Footer */
    #social-networks {
        width: 70%;
        margin: 0 0;
    }

    #registered-marks {
        width: 30%;
    }
}

/* Media query: laptops and desktops (1200px and up) */
@media screen and (min-width: 1200px) {

    /* Main */
    /* Classes page */
    #classes .custom-button {
        padding: 16px 4rem;
        font-size: 1.5em;
    }

    /*Shop page */
    #shop .custom-font-banner>p {
        font-size: 1.3em;
    }

    #shop p {
        font-size: 0.9em;
    }

    /* Contact page */
    #contact-form {
        margin: 2rem 0;
    }

    /* Footer */
    #social-networks {
        width: 70%;
    }

    #social-networks i {
        font-size: 200%;
    }

    #registered-marks {
        width: 30%;
        align-items: flex-start;
        margin-left: 5em;
    }
}

/* Media query: desktops and 4k (1800px and up) */
@media screen and (min-width: 1800px) {

    /* Header */
    #menu {
        gap: 30px;
    }

    #menu li {
        font-size: calc(1.2em + 0.3vw);
        letter-spacing: 2px;
    }

    /* Main */
    /* Hero section */
    #cover-text {
        height: 350px;
        width: 520px;
        left: 750px;
        text-align: center;
        font-size: 1.8em;
        font-weight: 600;
        margin-top: 10px;
    }

    #cover-text h2 {
        font-size: 3.4em;
    }

    #cover-text h3 {
        font-size: 1.2em;
        font-weight: 600;
    }

    /* About section */
    #about {
        padding: 30px 0;
    }

    /*Shop page */
    #shop .custom-font-banner>p {
        font-size: 1.5em;
    }

    /* Add important to override Bootstraps color */
    #shop p {
        color: #ffffff !important;
        font-weight: 600 !important;
        font-size: 1.3em;
    }

    /* Contact page */
    #contact-form {
        max-width: 1000px;
    }

    #contact-form>p {
        font-size: 1.5em;
    }

    #contact-form .form-label {
        font-size: 1.2em;
    }

    /* Footer */
    footer {
        flex-direction: row;
        width: 100%;
    }

    #social-networks {
        font-size: 110%;
        width: 80%;
        margin-left: auto;
        padding: 20px 10px;
        gap: 50px;
    }

    li {
        padding-top: 30px;
    }

    #registered-marks {
        width: 20%;
        margin-left: 0;
    }

    #registered-heading {
        font-size: 1.5em;
    }

    #registered-address {
        font-size: 1.2em;
    }

    #copyright {
        font-size: 1.2em;
    }

    #copyright i {
        font-size: 1em;
    }
}