@font-face {
    font-family: 'Love_Ya_Like_A_Sister';
    src: url('../fonts/Love_Ya_Like_A_Sister/LoveYaLikeASister-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Slackey';
    src: url('../fonts/Slackey/Slackey-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Love_Ya_Like_A_Sister', cursive;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}
header {
    background: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

/* SITE HEADER */
header h1 {
    cursor: pointer;
}
h1 a {
    color: inherit; /* Use the same color as h1 */
    text-decoration: none; /* Remove underline */
}

h1 a:visited {
    color: inherit; /* Prevent visited link color */
}

h1 a:hover, h1 a:focus {
    color: inherit; /* Prevent hover color */
    text-decoration: none; /* Prevent hover underline */
}

/* NAVIGATION */

nav {
    z-index: 1000; /* High enough to be on top of canvas */
    display: flex;
    justify-content: center;
    background: #555;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    position: relative;
}
nav a:first-child {
    margin-left: 0;
}
nav a, .dropdown {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    transition: background 0.3s;
    font-size: 1rem;
    font-weight: normal;
    display: flex;
    align-items: center;
}
nav a:hover, .dropdown:hover {
    background: #777;
}
nav a.active {
    background: pink !important;
    color: black !important;
    font-weight: bold;
}
.dropdown {
    cursor: pointer;
    position: relative;
}
.dropdown-content {
    display: none;
    position: absolute;
    background: #777;
    min-width: 160px;
    top: 100%;
    left: 0;
    z-index: 1001; /* Even above navbar */
}
.dropdown-content a {
    display: block;
    padding: 0.5rem;
    text-align: left;
    background: #666;
}
.dropdown-content a:hover {
    background: pink;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.container {
    padding: 2rem;
    text-align: center;
}
h1, h2, h3, p, ol, ul, li {
    text-align: center;
}
h2, h3{
    color: #5A6B8D;
}
ul, ol {
    list-style-position: inside;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0;
}

ul li {
    text-align: center;
    width: 100%;
}

/* YouTube Icon in Footer */
.footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-icons {
    margin-top: 10px;
    background-color: white;
    padding: 5px;
}

.footer-logos {
    width: 40px;
    height: auto;
    transition: transform 0.3s ease;
}

.footer-logos:hover {
    transform: scale(1.1);
}

/* gradual transition effect  - FADE IN */
.fade-in {
    opacity: 0;
    transition: opacity 200ms ease-in-out;
}
.fade-in.visible {
    opacity: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        align-items: center;
    }
    nav a, .dropdown {
        display: block;
        width: 100%;
        text-align: center;
        /*padding: 1rem;*/
    }
    .dropdown-content {
        position: static;
        display: none;
        width: 100%;
    }
    .dropdown:hover .dropdown-content {
        display: block;
    }
    .container {
        padding: 1rem;
    }
    header h1 {
        font-size: 1.5rem;
    }
    header p {
        font-size: 1rem;
    }
}

@media screen and (max-width: 768px) { /* Mobile View */
    .nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0; /* Remove extra padding */
        margin: 0;  /* Remove extra margin */
        width: 100%; /* Ensure full width */
    }

    .nav-links li {
        width: 100%; /* Ensure items take full width */
        text-align: center;
    }

    .dropdown-content {
        padding: 0;
        margin: 0;
        width: 100%;
        text-align: center;
    }

    .dropdown-content a {
        padding: 5px 0; /* Reduce space inside dropdown */
        display: block;
    }

    .hamburger-menu {
        padding: 5px; /* Reduce hamburger menu padding */
    }
}

/* Line Break only in Mobile */ 
@media (min-width: 769px) { /* Hide on desktops */
    .mobile-break {
        display: none;
    }
}
@media (max-width: 768px) { /* Show only on mobile */
    .mobile-break {
        display: inline;
    }
}

@media screen and (min-width: 769px) {  /* Apply only for desktop */

    /* Nav links style for desktop */
    .navbar {
        height: 50px; /* Adjust height as needed */
        padding: 5px 20px; /* Reduce padding */
        line-height: 50px; /* Ensure text is vertically centered */
    }

    .nav-links {
        margin: 0 auto;
        max-width: 80%;
    }
}

/* PRINT BUTTON */
@media print {
    /* ELEMENTS TO EXCLUDE FROM PRINT */
    nav, footer, #print-btn, .trash-button, .color-container, .faq-section, .color-button, .trash-button, .trash-button, #timer-display, #maze-canvas, #dot2dot-canvas, #sudoku-canvas, #wordsearch-canvas, #accessibility-bubble {
        display: none !important;
    }

    body {
        margin: 0;
        padding: 0;
    }
}

/* TIMER */
#timer-display {
    font-size: 0.8em;
    margin-left: 10px;
    color: gray;
}

/* SHOP STYLE */
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    padding: 20px;
}

.book-item {
    text-align: center;
}

.book-item img {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.book-item p {
    margin-top: 10px;
    font-size: 1rem;
    color: #333;
}