@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 */
    }
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    html {
        font-family: TASA Explorer, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: var(--text-color);
        height: 100%;
    }
    body {
        height: 100%;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-height: 100%;
    }
    
    /* 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;
        align-items: center;
        justify-content:left;
        margin-bottom: 0.25rem;
        position: relative;
    }
    .nav-logo {
        height: 3rem;
        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: 50%;
        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 {
        text-decoration: none;
        color: var(--color-1);
    }
    nav a:hover {
        padding: 0.5rem;
        color: var(--secondary-color);
        font-weight: 600;
    }
    .active {
        font-weight: 900;
        padding: 0.5rem;
        border: 0.1rem solid #05425d;
        border-radius: 0.25rem;
        background-color: var(--nav-color);
    }

    /* image */
    .hero1 {
        max-width: 100%;
        border-radius: 1rem;
        object-fit: cover;
        border: 0.25rem solid var(--button-color);
    }
   .hero1:hover {
        content: url('../images/D&Dme.png')
    }
    .hero2 {
        max-width: 100%;
        border-radius: 1rem;
        object-fit: cover;
        border: 0.25rem solid var(--button-color);
    }
   .hero2:hover {
        content: url('../images/bethPortrait.gif')
    }
    .hero3 {
        max-width: 100%;
        border-radius: 1rem;
        object-fit: cover;
        border: 0.25rem solid var(--button-color);
    }
   .hero3:hover {
        content: url('../images/bethLandscape.gif')
    }
    
    /* sections */
    header {
        margin: 0.5rem auto 0.5rem auto;
        width: 90%;    
        padding: min(0.25rem, 15%);
        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: 95%;
        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: 90%;      
        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: 90%;
        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;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: min(3rem, 15%);
    }
    .text-container {
        flex: 0 1 34rem;
        text-align: center;
    }
    .text-container p {
        margin: .75rem 0 1rem 0;
        font-size: 1.25rem;
    }
    .text-container ul {
        margin: .75rem 0 1rem 0;
        font-size: 1rem;
    }
        /* buttons */
    .cta-button {
        display: inline-block;
        text-decoration: none;
        color: #ffffff;
        background-color: var(--button-color);
        padding: .75rem 1.25rem;
        border-radius: .5rem;
        font-weight: 600;
        margin: 1rem 1rem 1rem 1rem;
        position: relative;
        overflow: hidden;                       /* hides psuedo element until expanded */
        z-index: 11;
        transition: color 0.5s ease-out;
        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);
        transform: translateX(-100%);
        transition: transform 0.5s ease;
        z-index: -11;
    }
    .cta-button:hover {
        color: white;
    }
    .cta-button:hover::before {
        transform: translateX(0);
    }
    .primary {
        background-color: var(--primary-color);   
    }
    .secondary {
        background-color: var(--secondary-color);
    }
    #what {
        margin: -1.5rem auto -1.5rem auto;
        width: 95%;
        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 1rem auto;
        width: 90%;      
        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: 100%;
        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%;
    }
    #about-me {
        margin: -1.5rem auto -1.5rem auto;
        padding: 1.5em min(1rem, 15%);
        width: 95%;
        text-align: center;
    }
    #my-details {
        flex-direction: column;
        margin: -1.5rem auto 1.5rem auto;
        padding: 1.5em min(1rem, 15%);
        width: 95%;
        text-align: center;
        align-items: center;
    }
    #my-work {
        flex-direction: column;
        margin: -1.5rem auto 1.5rem auto;
        padding: 1.5em min(1rem, 15%);
        width: 90%;
        text-align: center;
        border: 0.75rem ridge var(--color-2);
        border-radius: 0.75rem;
    }
    #interests {
        flex-direction: column;
        margin: -1.5rem auto 1.5rem auto;
        padding: 1.5em min(1rem, 15%);
        width: 90%;
        text-align: center; 
        border: 0.75rem groove var(--color-1); 
        border-radius: 0.75rem;
    }
    #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;
    }
    .animated-gif-games {
        border: 0.75rem outset #000000;
    }
    .animated-gif-games:hover {
        content: url(../images/jigsaw.gif);
    }
    .game-form {
        display: flex;
        flex-direction: column;
        flex-shrink: 1;
        align-items: center;
        width: max(60rem, 100%);
        gap: 0.25rem;
    }
    .game-form label {
        font-family: Solitreo, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 600;
        font-size: 1.5rem;
        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-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;
    }
    #instructions {
        margin: -1.5rem auto -1.5rem auto;
        padding: 1.5em min(1rem, 15%);
        width: 95%;
        justify-items: center;
        align-items: center;
        background-color: var(--faq-color);
        border: 0.5rem groove var(--change-color); 
        border-radius: 1rem;    
    }
    #instructions .text-container p {
        margin: .75rem 0 1rem 0;
        font-size: 1rem;
    }
    #instructions .text-container ul {
        margin: 0.25rem 0 1rem 0;
        font-size: 1rem;
        text-align: left;
    }
    .animated-gif-register {
        border: 0.75rem outset #000000;
    }
    .animated-gif-register:hover {
        content: url(../images/join_us.gif);
    }
    #register-form {
        margin: -1.5rem auto 1rem auto;
        width: 90%;
        background-color: var(--color-4);       
        padding: min(2rem, 15%);
        text-align: center;
        border: 0.5rem ridge var(--change-color);     
        border-radius: 1rem;                         
        justify-self: center;
    }
    .form-grid-container {
        display: grid;
        margin: 0 auto;
        grid-template-columns: 1fr;
        justify-content: center;
        gap: 0.25rem;
        max-width: min(60rem, 100%);
    }
    .form-grid-container label {
        font-family: TASA Explorer, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 600;
        font-size: 1.25rem;
        color: var(--color-2);
        text-align: left;
        align-self: center;
    }
    .form-grid-container input {
        font-size: 1.25rem;
        width: 100%;
        max-width: 40rem;
        padding: 0.1rem;
        box-sizing: border-box;
    }
    .submit-container {
        grid-column: 1 / -1;
        text-align: center;
        margin-top: 1rem;
    }
    .submit-container button {
        padding: 0.4rem 1rem;
        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;
    }
    /* Modal Styles */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        align-items: center;
        justify-content: center;
    }
    #messageModal {
        z-index: 2000;
    }
    #feedbackModal {
        z-index: 1000;
    }

    .modal.show {
        display: flex;
    }
    .modal-content {
        background-color: #fff;
        padding: 30px;
        border-radius: 8px;
        max-width: 400px;
        width: 90%;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        text-align: center;
    }
    .modal-message {
        margin-bottom: 20px;
        font-size: 16px;
        color: #333;
    }
    .modal-button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 30px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }
    .modal-button:hover {
        background-color: #0056b3;
    }

    /* user account menus */
    .user-header {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        padding: 1rem;
        margin: 0.5rem auto;
        width: 90%;
        background: linear-gradient(135deg, var(--color-1), var(--color-2));
        border-radius: 0.5rem;
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
        gap: 1rem;
        text-align: center;       
        } 
    .user-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        }  
    .user-actions {
            justify-content: center;
            width: 100%;
        }
    .user-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 3px solid var(--base-color);
        object-fit: cover;
    }
    .user-gamertag {
        color: var(--base-color);
        font-size: 1.25rem;
        font-weight: 400;
    }
    .user-gamertag strong {
        font-weight: 700;
        color: var(--nav-color);
    }
    .user-actions {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .user-btn {
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        text-decoration: none;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
    }
    .settings-btn {
        background-color: var(--button-color2);
        color: var(--base-color);
    }
    .settings-btn:hover {
        background-color: var(--change-color);
        transform: translateY(-2px);
    }
    .logout-btn {
        background-color: var(--button-color);
        color: var(--base-color);
    }
    .logout-btn:hover {
        background-color: #dc3545;
        transform: translateY(-2px);
    }
    .account-info-display {
        background-color: var(--color-4);
        padding: 2rem;
        border-radius: 0.5rem;
        border: 0.25rem solid var(--color-1);
        max-width: 40rem;
        margin: 0 auto;
    }

    .account-info-display h3 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .info-item {
        margin-bottom: 1rem;
        padding: 0.75rem;
        background-color: var(--base-color);
        border-radius: 0.25rem;
        font-size: 1.1rem;
    }

    .info-item strong {
        color: var(--color-1);
    }

    .profile-preview {
        max-width: 150px;
        max-height: 150px;
        border-radius: 50%;
        border: 3px solid var(--color-1);
        margin-top: 0.5rem;
        object-fit: cover;
    }

    .update-section {
        background-color: var(--faq-color);
        padding: 1.5rem;
        border-radius: 0.5rem;
        margin: 1rem;
        width: min(35rem, 100%);
        border: 0.25rem solid var(--color-2);
    }

    .update-section h3 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
        color: var(--color-2);
    }

    .account-form {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .account-form label {
        font-weight: 600;
        color: var(--color-1);
        margin-top: 0.5rem;
    }

    .account-form input {
        padding: 0.5rem;
        font-size: 1rem;
        border: 2px solid var(--button-color);
        border-radius: 0.25rem;
    }

    .account-form input:focus {
        outline: none;
        border-color: var(--color-1);
    }

    .account-form button {
        margin-top: 0.5rem;
    }

    #update-forms {
        flex-direction: column;
        align-items: center;
    }


    /* games */ 
    #mordor {
        margin: -1.5rem auto -1.5rem auto;
        width: 90%;
        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: 95%;
        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: 90%;
        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');
    }

    .stats-container {
        background: linear-gradient(135deg, var(--color-1), var(--color-2));
        padding: 1.5rem;
        border-radius: 0.5rem;
        margin-bottom: 2rem;
        color: var(--base-color);
    }
    .stats-container h3 {
        color: var(--nav-color);
        text-align: center;
        margin-bottom: 1rem;
        font-size: 2rem;
    }
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }
    .stat-item {
        background-color: rgba(255, 255, 255, 0.1);
        padding: 1rem;
        border-radius: 0.25rem;
        text-align: center;
    }
    .stat-label {
        display: block;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
        opacity: 0.9;
    }
    .stat-value {
        display: block;
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--nav-color);
    }
    
    /* Scores Styles */

    #scorecard-content {
        width: 98%;
    }

    .score-filters {
        background-color: var(--color-4);
        padding: 1.5rem;
        margin: 1rem auto;
        width: min(70rem, 100%);
        border-radius: 0.5rem;
        border: 0.25rem solid var(--color-1);
        gap: 1rem;
    }
    .filter-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        min-width: 120px;
    }
    .filter-group label {
        font-weight: 600;
        color: var(--color-1);
        font-size: 1.1rem;
    }
    .filter-select {
        padding: 0.5rem;
        font-size: 1rem;
        border: 2px solid var(--button-color);
        border-radius: 0.25rem;
        background-color: var(--base-color);
        cursor: pointer;
    }
    .filter-select:focus {
        outline: none;
        border-color: var(--color-1);
    }
    .scores-container {
        width: min(70rem, 100%);
        margin: 2rem auto;
        min-height: 18rem;
        background-color: var(--mob-color);
        border: 0.5rem solid var(--color-1);
        border-radius: 0.75rem;
    }
    .loading-message,
    .error-message,
    .no-scores-message {
        text-align: center;
        font-size: 1.25rem;
        padding: 2rem;
        color: var(--color-1);
    }
    .error-message {
        color: #dc3545;
    }

    .scores-table-container {
        background-color: var(--base-color);
        padding: 1rem;
        border-radius: 0.5rem;
        border: 0.25rem solid var(--color-2);
        overflow-x: auto;
    }
    .scores-table-container h3 {
        color: var(--color-2);
        text-align: center;
        margin-bottom: 1rem;
        font-size: 2rem;
    }
    .scores-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.75rem;
    }
    .scores-table thead {
        background-color: var(--color-1);
        color: var(--base-color);
    }
    .scores-table th {
        padding: 0.5rem 0.25rem;
        text-align: left;
        font-weight: 600;
        font-size: 1rem;
    }
    .scores-table tbody tr {
        border-bottom: 1px solid var(--faq-color);
        transition: background-color 0.2s ease;
    }
    .scores-table tbody tr:hover {
        background-color: var(--color-4);
    }
    .scores-table td {
        padding: 0.5rem 0.5rem;
    }
    .score-value {
        font-weight: 700;
        color: var(--color-2);
        font-size: 1rem;
    }
    .date-value {
        color: var(--button-color);
        font-size: 0.75rem;
    }
    .scores-table tbody tr.top-1 {
        background: linear-gradient(90deg, #FFD70020, transparent);
        border-left: 4px solid #FFD700;
    }
    .scores-table tbody tr.top-2 {
        background: linear-gradient(90deg, #C0C0C020, transparent);
        border-left: 4px solid #C0C0C0;
    }
    .scores-table tbody tr.top-3 {
        background: linear-gradient(90deg, #CD7F3220, transparent);
        border-left: 4px solid #CD7F32;
    }
    .scores-table tbody tr.top-1 td:first-child::before {
        content: "🥇 ";
    }
    .scores-table tbody tr.top-2 td:first-child::before {
        content: "🥈 ";
    }
    .scores-table tbody tr.top-3 td:first-child::before {
        content: "🥉 ";
    }

    /* Feedback Styles */
    #review {
        margin: -1.5rem auto 1.5rem auto;
        width: 98%; 
        padding: min(2rem, 15%);
        text-align: center;
        
    }
    
    .feedback-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        width: min(70rem, 100%);
        margin: 2rem auto;
        padding: 1rem;
        background-color: var(--color-4);
        border: 0.5rem ridge var(--color-2);
        border-radius: 1rem;
    }
    
    .feedback-card {
        background-color: var(--base-color);
        border: 0.25rem solid var(--color-1);
        border-radius: 0.5rem;
        padding: 1.5rem;
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        width: min(50rem, 100%);
        justify-self: center;
    }
    
    .feedback-card:hover {
        transform: translateY(-0.25rem);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
    }
    
    .feedback-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .feedback-player {
        font-weight: 700;
        color: var(--color-1);
        font-size: 1.1rem;
    }
    
    .feedback-rating {
        color: #FFD700;
        font-size: 1.25rem;
        letter-spacing: 0.1rem;
    }
    
    .feedback-title {
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--color-2);
        margin-bottom: 0.5rem;
        text-align: left;
    }
    
    .feedback-text {
        color: var(--text-color);
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 0.75rem;
        text-align: left;
    }
    
    .feedback-date {
        font-size: 0.9rem;
        color: var(--button-color);
        text-align: right;
        font-style: italic;
    }
    
    /* Star Rating Input */
    .star-rating-input {
        display: flex;
        gap: 0.25rem;
        font-size: 2rem;
        cursor: pointer;
    }
    
    .star-rating-input .star {
        color: #ddd;
        transition: color 0.2s ease;
    }
    
    .star-rating-input .star:hover,
    .star-rating-input .star.active {
        color: #FFD700;
    }
    
    .feedback-modal-content {
        max-width: 32rem;
    }

    .visit-counter {
    text-align: center;
    font-size: 1rem;
    opacity: 0.5;
    margin: 0.05rem 0 0 0;
    color: var(--text-color);
    letter-spacing: 0.05em;
    }
}

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

@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;
    } 

    .scores-container {
        margin: 2rem auto;
        min-height: 18rem;
        background-color: var(--mob-color);
        border: 0.5rem solid var(--color-1);
        border-radius: 0.75rem;
    }
}

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

@media (min-width: 1023px) {
    /* nav section */
    nav {
        margin: 1rem auto 3rem auto;              /* sets top, right, bottom, left - respectively */
        width: 90%;
        background-color: var(--base-color);
        border-radius: 1rem;
    }
    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;         /* Distributes space between the logo and links */
    }
    .nav-logo {
        height: 3rem; 
        margin-right: 2rem;
    }
    .menu-toggle {
        display: none;
    }
    .nav-links {
        visibility: visible;
        display: flex;
        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;
        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 {
        text-decoration: none;
        color: var(--color-1);
    }
    nav a:hover { 
        padding: 0.5rem;
        color: var(--secondary-color);
        font-weight: 600;
    }
    .active {
        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;
    } 
    #my-details {
        flex-direction: row;
        margin: -1.5rem auto -1.5rem auto;
        padding: 1.5em min(1rem, 15%);
        width: 95%;
        text-align: center;
        align-items: first baseline;
    }
    #my-work {
        width: 45%;

    }
    #interests {
        width: 45%; 
    }
    .game-form {
        display: flexbox;
        flex-direction: row;
        flex-shrink: 1;
        width: max(75rem, 100%);
        margin: 1rem auto 1rem auto;
        padding: 1rem 1rem;
        justify-content: center;
        align-items: center;       
    }
    #instructions .text-container {
        width: 100%;
        max-width: min(40rem, 100%);
    }
    .form-grid-container {
        grid-template-columns: auto 1fr;
        gap: 0.5rem;       
    }
    .form-grid-container label {
        text-align: right;
    }
    .user-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        padding: 1rem;
        margin: 0.5rem auto;
        width: 90%;
        background: linear-gradient(135deg, var(--color-1), var(--color-2));
        border-radius: 0.5rem;
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
        gap: 1rem;
    }
    .user-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
    .user-actions {
        justify-content: flex-end;
        width: auto;
    }
    .score-filters {
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex-shrink: 1;
    }
    .filter-group {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        min-width: 9.5rem;
    }
    .filter-group label {
        margin-bottom: 0;
    }
    .stat-value {
        font-size: 1.8rem;
    }
    .scores-table {
    font-size: 1rem;
    } 
    .scores-table th {
        padding: 1rem 0.5rem;
    }
    .scores-table td {
        padding: 0.75rem 0.5rem;
    }


}
 

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

@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;
    }

}