/*Import Google Font Raleway For Headings and Open Sans For Body Text*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/*CSS variables*/
:root {
    
    --primary-font: 'Open Sans', sans-serif;
    --secondary-font: 'Raleway', sans-serif; /*Used for headings and titles*/
    
    /*Colors for no Background*/
    --primary-color: #122b18; /*Celtic Green used for main font color*/
    --primary-color-light: #368047; /*Lighter green for subheadings*/

    /*Colors for with Background*/
    --secondary-color: #F8F8F8; /*Alabaster color to be used for Fonts*/
    --highlight-color: #000000; /*Black for highlights*/
    --background-color: #57D575; /*Emerald green background*/
    --background-color-dark: #348046; /*Dark green background*/
    --gradient-background: linear-gradient(to bottom, #57D575 0%, #122b18 100%);
}

/*General Styles*/
body {
    font-family: var(--primary-font);
    color: var(--primary-color);
}

.sub-heading-color {
    color: var(--primary-color-light);
}

h1, h2, h3 {
    font-family: var(--secondary-font);
    color: var(--primary-color);
    text-transform: uppercase;
}

.section { /*Heading margin styles for top and bottom spacing*/
    margin-top: 6rem;
    margin-bottom: 2rem;
}

.text-margin-paragraph { /* Paragraph margin styles for top and bottom spacing*/
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.small-screen-text{
    text-align: center;
}

/*Background color set up for all pages*/
.background-main {
    background: var(--background-color-dark);
    color: var(--secondary-color);
    padding: 5px 5px;
    margin-bottom: 5px;
    border-radius: 15px;
}

.background-main h3 {
    color: var(--secondary-color);
}

.arrow-background a {
    color:var(--secondary-color)
}

/*Video embed for shorts and YouTube (solutions found using stackoverflow)*/
.video-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Vertical short (original 315x560), centered */
.video-container.short {
    width: 315px;            /* original short width */
    max-width: 100%;         /* stay responsive on small screens */
    aspect-ratio: 315 / 560; /* original aspect ratio for height */
    margin: 1.25rem auto;    /* center horizontally */
    border-radius: 8px;
    overflow: auto;
    padding-bottom: 0;       /* override padding-based layout */
    height: auto;
}

/* For aspect-ratio layout make iframe fill the container (static positioning) */
.video-container.short iframe {
    position: static;
    width: 100%;
    height: 100%;
    display: block;
}

/* Carousel */
.image-width {
    width: 280px;
}

/* Navbar styles with dropdown toggle*/

#navbar {
    background-color: var(--background-color-dark);
}

#navbar .logo {
    width: 100px;
}

/*Header Styles*/
#top .lead {
    font-family: var(--secondary-font);
}

/*Buy Now style*/
.buy-now {
    text-align: center;
    background-color: var(--background-color);
    margin-top: 10px;
    border-radius: 15px;
    border: 3px solid var(--secondary-color);
}

.buy-now a {
    text-decoration: none;
    font-size:xx-large;
    color: var(--secondary-color);
    font-family: var(--secondary-font);
    font-weight: bold;
    text-transform: uppercase;
}

.buy-now {
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}
.buy-now:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

/*In page navigation pannel (used in Basics, Events, Heroes)*/
.jump {
    text-align: center;
    padding: 20px 0;
    display:flex;
    justify-content: space-evenly;
    list-style-type:none; /*Remove bullet points*/
    
}

.jump li {
    padding: 5px 10px;
    border-radius: 15px;
    border: 2px solid var(--background-color-dark);
}

.jump li:hover {
    background-color: var(--background-color);

}

.jump a{
    text-decoration: none;
    font-size:medium;
    color: var(--primary-color);
    font-family: var(--secondary-font);
    font-weight: bold;
    text-transform: uppercase;
}

/*In page navigation arrows (used in Basics, Events, Heroes)*/
.arrow-up {
    color: var(--primary-color);
}

/*Footer style*/
.main-footer {
    background-color: var(--background-color);
    /*Only top corners are round*/
    border-radius: 15px 15px 0 0;
}

.copyright {
    color: var(--secondary-color);
    text-align: center;
}

.social {
    text-align: center;
    padding: 20px 0;
    display:flex;
    justify-content: space-evenly;
    list-style-type: none;
}

.social i {
    font-size: 160%;
    padding: 5%;
    color: var(--secondary-color);
}

/* Media query for screens larger than 1200px */
@media screen and (min-width: 1200px) {
    .large-screen-text {
        text-align: left;
    }

}

/*Media query: desktops and larger (992px and up)*/
@media screen and (min-width:992px) {
    .desktop-screen-text {
        text-align: left;
    }
}