@import url('https://fonts.googleapis.com/css2?family=Solitreo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Macondo+Swash+Caps&display=swap');
@import url('https://fonts.googleapis.com/css2?family=TASA+Explorer:wght@400..800&display=swap');

/* mobile defaults */
@media (min-width: 320px) {
    :root {   
        --base-color: #ffffff;      /* white */
        --text-color: #000000;      /* black*/
        --button-color: #6c757d;    /* medium grey */
        --change-color: #20778f;    /* medium teal */
        --nav-color: #caf5a5;       /* minty green */
        --mob-color: #cbc9c9;
        --faq-color: #b2b5b6;       /* light gray */
        --primary-color: #8049b3;   /* medium purple */
        --secondary-color: #5360d6; /* medium blue */
        --color-1: #05425d;         /* dark teal */
        --color-2: #600C8D;         /* dark plum */
        --color-3: #f0c78e;         /* medium mellow yello */
        --color-4: #d4d2f3;         /* light blue gray */
    }
    
    /* universal element to remove default browser margins/padding and box properties to prevent odd behavior */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    /* base styles for entire page */
    html {
        font-family: TASA Explorer, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: var(--text-color);
    }
    body {
        height: 100%;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-height: 100vh;
    }
    
    /* fonts */
    h1 {
        font-family: Solitreo, TASA Explorer, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 5rem;
        color: var(--color-2);
    }
    h2 {
        font-family: Macondo Swash Caps, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 3rem;
        color: var(--color-1);   
    }
    h3 {
        font-family: Solitreo, TASA Explorer, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 3rem;
        color: var(--color-2);
    }
    h4 {
        font-family: TASA Explorer;
        font-weight: 600;
        font-size: 1.25rem;
        font-style: oblique;
    }
    
    /* mobile nav menu */
    .mobile-wrapper {
        display: block;
    }
    .navbar {
        display: flex;                  /* Activates Flexbox */
        align-items: center;            /* Vertically centers the items (image and list) */
        justify-content:left;           /* Distributes space between the logo and links */
        margin-bottom: 0.25rem;
        position: relative;
    }
    .nav-logo {
        height: 3rem;                /* Adjust the logo size as needed */
        border: #600C8D solid;
        border-radius: 50%;
    }
    .nav-links {
        visibility: hidden;         /* Hidden by default on mobile */
        position: fixed;        /* takes out of the document flow */
        top: 0rem;
        left: 0rem;
        width: 50vw;
        height: min(50vh, 100%);
        list-style: none;
        font-size: 1.2r5em;
        background-color: var(--mob-color);
        flex-direction: column;
        padding: 2rem 1rem;
        box-shadow: -1rem 0 2.5rem var(--text-color);
        border: 0.1rem solid var(--button-color);
        border-radius: 0.75rem;
        transform: translateX(-100%);
        transition: transform 0.5s ease-out;
        z-index: 100;  
    }
    .nav-links.is-active {          /* A class added by JavaScript to show the menu */
        transform: translateX(0%);
        visibility: visible;
    }       
    .menu-toggle {
        display: flex;    /* Hamburger icon is shown */
        height: 2.5rem;
        padding: .5rem .5rem;
        margin: 1rem .5rem 1rem .5rem;
        border-radius: .75rem; 
        z-index: 110;  
    }
    .nav-links li {
        padding: 0.5rem;
        border: 0.1rem solid transparent;
    }
    nav a {                         /* make the navigation menu look more like tabs instead of just text */
        text-decoration: none;      /* remove the underline always being there */
        color: var(--color-1);
    }
    nav a:hover {                   /* add properties when hovering over the text */
        padding: 0.5rem;
        color: var(--secondary-color);
        font-weight: 600;
    }
    .active {                       /* highlight active page in bar */
        font-weight: 900;
        padding: 0.5rem;
        border: 0.1rem solid #05425d;
        border-radius: 0.25rem;
        background-color: var(--nav-color);
    }

    /* image */
    .hero {
        max-width: 100%;            /* make sure image never overflows its container (responsive)*/
        border-radius: 1rem;         /* rounding the edge */
        object-fit: cover;          /* fill the area without stretching*/
        border: 0.25rem solid var(--button-color);
    }
   .hero:hover {
        content: url('../images/D&Dme.png')
    }
    
    /* sections */
    header {
        margin: 0.5rem auto 0.5rem auto;
        width: 90%;    
        padding: min(0.25rem, 15%);                 /* "min" function to default size, but reduce for smaller screens */
    }
    main {
        padding: 1rem;
        background-color: var(--base-color);
        flex-grow: 1;
    }
    #introduction {
        margin: -1.5rem auto -1.5rem auto;
        padding: 1.5em min(1rem, 15%);
        width: 95vw;
        text-align: center;
        background-color: var(--color-4);
        border: 0.5rem groove var(--change-color); 
        border-radius: 1rem;
    }
    section {
        margin: 1rem auto 1rem auto;
        width: 90vw;      
        padding: min(2rem, 15%);
        text-align: center;                            
        justify-self: center;
    }
    section p {
        margin-top: 1rem;
        font-size: 1.25rem;
    }
    section img {
        max-width: 100%;
        border-radius: .5rem; 
    }
    #who {
        margin: -1.5rem auto -1.5rem auto;
        width: 90vw;
        background-color: var(--color-3);       
        padding: min(2rem, 15%);
        text-align: center;
        border: 0.5rem ridge var(--color-2);     
        border-radius: 1rem;                         
        justify-self: center;
    }
    .animated-gif {
        border: 0.75rem outset #000000;
    }
    .animated-gif:hover {
        content: url('../images/who-are-you.gif');
    }
    /* containers */
    .flex-container {
        display: flex;              /* allow arrange side by side when there is enough space */
        justify-content: center;    /* aligns everything centered horizontally */
        align-items: center;        /* aligns vertically in the center */
        flex-wrap: wrap;            /* allows content to stack on smaller screens when side by side won't fit */
        gap: min(3rem, 15%);         /* spacing between image and text container */
    }
    .text-container {
        flex: 0 1 34rem;
        text-align: center;             /* values set for grow and shrink (0=no and 1=yes) and em value is preferred width */
    }
    .text-container p {
        margin: .75rem 0 1rem 0;
        font-size: 1.25rem;
    }
        /* buttons */
    .cta-button {
        display: inline-block;                    /* makes the text display like a box for adding padding and width */
        text-decoration: none;
        color: #ffffff;                         /* makes text white */
        background-color: var(--button-color);
        padding: .75rem 1.25rem;
        border-radius: .5rem;
        font-weight: 600;
        margin: 1rem 1rem 1rem 1rem;
        position: relative;                     /* to position psuedo element for overlaying container elements */
        overflow: hidden;                       /* hides psuedo element until expanded */
        z-index: 11;                             /* text visible above pseudo element */
        transition: color 0.5s ease-out;        /* smooth color change */
        box-shadow: 0.25rem 0.25rem 0.5rem black;
    }
    .cta-button::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--change-color);            /* color change on hover */
        transform: translateX(-100%);           /* set start position */
        transition: transform 0.5s ease;        /* smooth transition */
        z-index: -11;                            /* keep pseudo element behind text */
    }
    .cta-button:hover {
        color: white;                         /* keeps text readable */
    }
    .cta-button:hover::before {
        transform: translateX(0);               /* set end position */
    }
    .primary {
        background-color: var(--primary-color);   
    }
    .secondary {                                    /* cta-button above is for all cta buttons, but this is for the cta secondary pseudo class */
        background-color: var(--secondary-color);
    }
    #what {
        margin: -1.5rem auto -1.5rem auto;
        width: 95vw;
        padding: 3rem min(2rem, 15%);
        text-align: center;
        background-color: var(--color-4);
        border: 0.5rem groove var(--change-color);
        border-radius: 1rem;
    }
    #what p {
        margin-top: 1rem;
        font-size: 1rem;
    }
    .grid-wrapper {
        display: flex;
        justify-content: center;
        width: 100%;    
    }
    .grid-container {
        margin-top: 2rem;
        margin-bottom: 2rem;
        display: grid;
        width: min(75rem, 100%);
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 4fr;
        grid-template-areas: 
        "text-1"
        "text-2"
        "text-3"
        "text-4";
        justify-items: center;
        gap: 1rem;
    }
    .text-container-grid {
        margin: 1rem 1rem;
        width: min(15rem, 100%);
        background-color: var(--color-1);       
        padding: min(1.5rem, 15%);
        border-radius: .5rem;
        color: #ffffff;
        text-align: center;
        transition: 0.3s ease;
    }
    .text-container-grid:hover {
        scale: 1.15;
        background-color: var(--change-color);
    } 
   .item4 {
        margin: 1rem 1rem;
        width: min(15rem, 100%);
        background-color: var(--color-2);       
        padding: min(1.5rem, 15%);
        border-radius: .5rem;
        color: #ffffff;
        text-align: center;
        transition: 100ms ease;
    }
    #faqs {
        margin: -1.5rem auto -0.5rem auto;
        width: 90vw;      
        padding: min(2rem, 15%);
        border: 0.5rem ridge var(--secondary-color);
        border-radius: 1rem;                         
        justify-self: center;
        background-color: var(--faq-color);
    }
    .faq-wrapper {
        margin: 2rem 1.5rem 2rem 1.5rem;
    }
    details {  
        background-color: var(--color-1);
        border-radius: 1rem;
        margin-top: 1rem;
        transition: 0.3s ease;
    }
    details:hover {
        background-color: var(--color-2);
    }
    details p {
        font-family: TASA Explorer;
        font-size: 1rem;
        font-style: italic;
        font-weight: 500;
        color: var(--base-color);
        text-align: left;
        padding: 0 1rem 1rem 1rem;
    }
    details summary {
        font-family: TASA Explorer;
        font-style: italic;
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--base-color);
        text-align: left;
        padding: 0.75rem;
    }
    footer {
        width: 100vw;
        margin: auto 0 0 0;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-top: 0.25rem var(--text-color) solid;
        background-color: var(--button-color);
    }
    .foot-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .footer-logo {
        border: #600C8D solid;
        border-radius: 50%;
        max-width: 100%;
    }
    footer a {
        text-decoration: none;
        height: min(5rem, 100%);
        min-width: min(10rem, 100%);
        text-align: center;
        align-content: center;
    }
    .footer-img {
        border: 0.50rem var(--text-color) solid;
        border-radius: 50%;
        max-width: 100%;
    }
    #start {
        margin: -1.5rem auto -1.5rem auto;
        padding: 1.5em min(1rem, 15%);
        width: 95%;
        justify-items: center;
        align-items: center;
        background-color: var(--color-4);
        border: 0.5rem groove var(--change-color); 
        border-radius: 1rem;
    }
    .game-form {
        display: flex;
        flex-direction: column;
        flex-shrink: 1;
        align-items: center;
        width: min(60rem, 100%);
        gap: 0.25rem;
    }
    .game-form label {
        font-family: Solitreo, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 600;
        font-size: 2rem;
        color: var(--color-2);
        margin-right: 0.5rem;
        margin-left: 1rem;
    }
    .game-form input {
        font-size: 1.25rem;
    }
    .game-form button {
        margin: 0.5rem 0 1rem 0.5rem;
        padding: 0.4rem 1rem;
        border: 0.1rem groove var(--color-1);
        border-radius: 0.5rem;
        background-color: var(--primary-color);
        box-shadow: 0.25rem 0.25rem 0.5rem black;
        color: var(--base-color);
        font-size: 1.25rem;
        font-weight: 600;
    }
    #justified {
        display: flex;
        flex-direction: column;
        max-width: min(50rem, 100%);
        margin: 1rem auto 1rem auto;
        text-align: left;
    }
    #mordor {
        margin: -1.5rem auto -1.5rem auto;
        width: 90vw;
        background-color: var(--color-3);       
        padding: min(2rem, 15%);
        text-align: center;
        border: 0.5rem ridge var(--color-2);     
        border-radius: 1rem;                         
        justify-self: center;
    }
    .animated-gif-LOTR {
        border: 0.75rem outset #000000;
    }
    .animated-gif-LOTR:hover {
        content: url('../images/LOTR-fellowship.gif');
    }
    #hoth {
        margin: -1.5rem auto -1.5rem auto;
        width: 95vw;
        padding: 3rem min(2rem, 15%);
        text-align: center;
        background-color: var(--color-4);
        border: 0.5rem groove var(--change-color);
        border-radius: 1rem;
    }
    .animated-gif-hoth {
        border: 0.75rem outset #000000;
    }
    .animated-gif-hoth:hover {
        content: url('../images/hoth.gif');
    }
    #potions {
        margin: -1.5rem auto -1.5rem auto;
        width: 90vw;
        background-color: var(--color-3);       
        padding: min(2rem, 15%);
        text-align: center;
        border: 0.5rem ridge var(--color-2);     
        border-radius: 1rem;                         
        justify-self: center;
    }
    .animated-gif-potions {
        border: 0.75rem outset #000000;
    }
    .animated-gif-potions:hover {
        content: url('../images/potions.gif');
    }    
}

/* ========================================================= */
/* |                                                       | */
/* ========================================================= */

@media (min-width: 600px) {
    .grid-container {
        margin-top: 2rem;
        margin-bottom: 2rem;
        display: grid;
        width: min(75rem, 100%);
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 2fr;
        grid-template-areas: 
        "text-1 text-2" 
        "text-3 text-4";
        gap: 1rem;
    } 
    .text-container-grid {
        margin: 1rem 1rem;
        width: min(15rem, 100%);
        background-color: var(--color-1);       
        padding: min(1.5rem, 15%);
        border-radius: 0.5rem;
        color: #ffffff;
        text-align: center;
        transition: 0.3s ease;
    }
    .text-container-grid:hover {
        scale: 1.15;
        background-color: var(--change-color);
    }
   .item4 {
        margin: 1rem 1rem;
        width: min(15rem, 100%);
        background-color: var(--color-2);       
        padding: min(1.5rem, 15%);
        border-radius: 0.5rem;
        color: #ffffff;
        text-align: center;
        transition: 0.3s ease;
   }
       .foot-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }  
}

/* ========================================================= */
/* |                                                       | */
/* ========================================================= */

@media (min-width: 1023px) {
    /* nav section */
    nav {
        margin: 1rem auto 3rem auto;              /* sets all 4 sides with top, right, bottom, left - respectively */
        width: 90vw;                            /* grows/shrinks with screen width */
        background-color: var(--base-color);
        border-radius: 1rem;
    }
    .navbar {
        display: flex;                  /* Activates Flexbox */
        align-items: center;            /* Vertically centers the items (image and list) */
        justify-content: space-between; /* Distributes space between the logo and links */
    }
    .nav-logo {
        height: 3rem;                    /* Adjust the logo size as needed */
        margin-right: 2rem;              /* Adds space between the logo and the nav links */
    }
    .menu-toggle {
        display: none;
    }
    .nav-links {
        visibility: visible;
        display: flex;              /* makes vertical list horizontal instead */
        position: static;
        flex-direction: row;
        height: auto;
        width: auto;
        background-color: transparent;
        box-shadow: none;
        padding: 0;
        border: transparent;
        transform: none;
        transition: none;
        gap: 1rem;                   /* provides spacing between each item */
        font-family: Macondo Swash Caps, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1.25rem;
    }
    .nav-links li {
        padding: 0.5rem;
        border: 0.1rem solid transparent;
    }
    nav a {                         /* make the navigation menu look more like tabs instead of just text */
        text-decoration: none;      /* remove the underline always being there */
        color: var(--color-1);
    }
    nav a:hover {                   /* add properties when hovering over the text */
        padding: 0.5rem;
        color: var(--secondary-color);
        font-weight: 600;
    }
    .active {                       /* highlight active page in bar */
        margin: 0rem 2rem 0rem 2rem;
        padding: 0.5rem;
        border: 0.1rem solid #05425d;
        border-radius: 0.25rem;
        background-color: var(--nav-color);
        text-transform: uppercase;
        font-weight: 900;
    }
    .menu-toggle {
        display: none;
    }
    #introduction .text-container {
        text-align: left;
    }
    #who .text-container {
        text-align: left;
    }
    .grid-container {
        margin-top: 2rem;
        margin-bottom: 2rem;
        display: grid;
        width: min(75rem, 85%);
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 2fr;
        grid-template-areas: 
        "item2 item1 item3"
        "tem4";
        gap: 0.25rem;
    } 
    .text-container-grid {
        margin: 0.5rem 1rem;
        width: min(15rem, 100%);
        background-color: var(--color-1);       
        padding: min(1.5rem, 15%);
        border-radius: 0.5rem;
        color: #ffffff;
        text-align: center;
        transition: 0.3s ease;
    }
    .text-container-grid:hover {
        scale: 1.15;
        background-color: var(--change-color);
    }
    .item1 {
        grid-column: 2;
        grid-row: 1;
        margin-top: 3rem;
        margin-bottom: 2rem;
    }
    .item2 {
        grid-column: 1;
        grid-row: 1;
        margin-right: -1rem;
        margin-bottom: -0.5rem;
    }
    .item3 {
        grid-column: 3 ;
        grid-row: 1;
        margin-left: -1rem;
        margin-bottom: -0.5rem;
    }
   .item4 {
        margin: 1rem 1rem;
        width: min(50rem, 100%);
        background-color: var(--color-2);       
        padding: min(1.5rem, 15%);
        border-radius: 0.5rem;
        color: #ffffff;
        text-align: center;
        transition: 0.3s ease;
        grid-column: 1 / 4;
    }
    .foot-container {
        display: flex;
        flex-direction: row;
        padding-top: 2rem;
        padding-bottom: 2rem;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    } 
    .game-form {
        display: flexbox;
        flex-direction: row;
        flex-shrink: 1;
        width: min(75rem, 100%);
        margin: 1rem auto 1rem auto;
        padding: 1rem 1rem;
        justify-content: center;
        align-items: center;       
    }
} 

/* ========================================================= */
/* |                                                       | */
/* ========================================================= */

@media (min-width: 1200px) {
    /* containers */
    .grid-container {
        margin: 2rem auto 2rem auto;
        display: grid;
        width: min(75rem, 100%);
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 22rem 11rem;
        gap: 0rem;
        transform: translateX(6rem);
    }
    .text-container-grid {
        margin: 1rem 1rem;
        width: min(15rem, 100%);
        background-color: var(--color-1);
        border: 0.15rem solid var(--button-color);      
        padding: min(1.5rem, 15%);
        border-radius: 0.5rem;
        color: #ffffff;
        text-align: center;
        transition: z-index 0.3s ease;
        z-index: 1;
        justify-self: center;
    }
    .text-container-grid:hover {
        scale: 1.15;
        z-index: 5;
        background-color: var(--change-color);
    } 
    .item1 {
        grid-column: 2 / 4;
        grid-row: 1;
        position: relative;
        z-index: 3;
        margin-top: 3rem;
        margin-bottom: 2rem;
    }
    .item2 {
        grid-column: 1 / 3;
        grid-row: 1;
        position: relative;
        z-index: 2;
        margin-right: -1rem;
        margin-bottom: -0.5rem;
    }
    .item3 {
        grid-column: 3 / 5;
        grid-row: 1;
        position: relative;
        z-index: 2;
        margin-left: -1rem;
        margin-bottom: -0.5rem;
    }
   .item4 {
        grid-column: 1 / 5;
        grid-row: 1 / 3;
        align-self: flex-end;
        position: relative;
        z-index: 0;
        margin-top: -5rem;
        width: min(45rem, 100%);
        background-color: var(--color-2);       
        padding: min(2.5rem, 15%);
        border-radius: .15rem;
        color: #ffffff;
        text-align: center;
        transition: 0.3s ease;
    }

}