@charset "UTF-8";

/* --- 1. Imports & Global Reset --- */
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Lato', sans-serif;
    background-color: #333;
    color: #222;
    overflow-x: hidden;
    margin: 0;
}

/* --- 2. Shared Typography Classes --- */
.comic-neue-light { font-family: "Comic Neue", serif; font-weight: 300; }
.comic-neue-regular { font-family: "Comic Neue", serif; font-weight: 400; }
.comic-neue-bold { font-family: "Comic Neue", serif; font-weight: 700; }
.comic-neue-italic { font-style: italic; }

/* Grouped Comic Neue elements to save space */
.title, .secondary_header ul li, .Firstpage, .centered-ul, 
.left_article, .right_article, .LessonInfo, .centered_text, 
.contact_page, .Lesson_li, .Lesson_li-p {
    font-family: 'Comic Neue', serif;
}

/* --- 3. Layout Containers --- */
.container {
    background-color: #fffdd0;
    transform-origin: top left;
    transition: transform 0.5s linear;
    width: 90%; /* Adjusted from 100vw to match second CSS preference */
    margin: 0 auto;
    min-height: 100vh;
    padding: 0; 
}

.container.show-nav {
    transform: rotate(-12deg);
}

.content {
    max-width: 1000px;
    margin: 50px auto;
    padding: 0 50px;
}

/* --- 4. Rotating Navigation (Circle) --- */
.circle-container {
    position: fixed;
    top: -100px;  /* Hides the top half */
    left: -100px; /* Hides the left half */
    z-index: 200; /* Keeps it above the piano keys */
}

.circle {
    background-color: #7fc6a4; /* greenish footer color */
    height: 200px;
    width: 200px;
    border-radius: 50%;
    position: relative;
    transition: transform 0.5s linear;
}

.container.show-nav .circle {
    transform: rotate(-85deg);
}

.circle button {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    background: transparent;
    border: 0;
    font-size: 28px; /* Slightly larger for better visibility */
    color: #fffdd0;  /* The Cream header color */
    transition: transform 0.3s ease, color 0.3s ease;
}

/* A subtle hover effect - feel interactive */
.circle button:hover {
    color: #ffffff;  /* Shines pure white when hovered */
    transform: scale(1.1); /* Grows just a tiny bit when the mouse is over it */
}

.circle button:focus { outline: none; }
.circle button#open { left: 60%; }
.circle button#close {
    top: 60%;
    transform: rotate(90deg);
    transform-origin: top left;
}

/* --- 5. Slide-out Navigation --- */
nav {
    position: fixed;
    bottom: 40px;
    left: 0;
    z-index: 100;
    /* Changed from black to a deep, dark teal that matches header */
    background-color: transparent; 
}

/* This is the background of the whole page 'behind' the rotation */
body {
    background-color: #2c3e50; /* A soft dark blue-grey that makes the teal pop */
}

nav ul {
    list-style-type: none;
    padding-left: 30px;
}

nav ul li {
    text-transform: uppercase;
    color: #fffdd0; /* Matches header text color (Cream) */
    margin: 40px 0;
    font-family: 'Comic Neue', serif;
    font-weight: bold;
    transform: translateX(-100%);
    transition: transform 0.4s ease-in;
}
/* The actual clickable links */
nav ul li a {
    color: #52bad5; /* Teal color */
    text-decoration: none;
    transition: color 0.3s ease;
}
/* Hover effect for the menu */
nav ul li a:hover {
    color: #7fc6a4; /* Turns greenish footer color when hovered */
}

nav ul li i { font-size: 20px; margin-right: 10px; }

/* Staggered Slide Effect */
nav ul li:nth-child(2) { margin-left: 15px; transform: translateX(-150%); }
nav ul li:nth-child(3) { margin-left: 30px; transform: translateX(-200%); }
nav ul li:nth-child(4) { margin-left: 45px; transform: translateX(-250%); }

.container.show-nav + nav li {
    transform: translateX(0);
    transition-delay: 0.3s;
}

/* --- 6. Page Headers --- */
.primary_header {
    width: 100%;
    background-color: #52bad5; /* Teal */
    padding: 10px 0 25px 0;    /* Increased bottom padding for the keys */
    clear: left;
    position: relative;        /* Required for the keys to attach correctly */
    border-bottom: 15px solid #fff; /* The White Keys base */
}

/* This creates the 'True Piano' Black Key Pattern (Groups of 2 and 3) */
.primary_header::after {
    content: '';
    position: absolute;
    bottom: -15px; 
    left: 0;
    width: 100%;
    height: 12px; 
    /* The magic: a 7-key 'Octave' pattern (approx 140px wide) */
    background-image: 
        /* Group of 2 keys */
        linear-gradient(90deg, #000 5px, transparent 5px, transparent 20px, #000 20px, #000 25px, transparent 25px),
        /* Group of 3 keys */
        linear-gradient(90deg, #000 5px, transparent 5px, transparent 20px, #000 20px, #000 25px, transparent 25px, transparent 40px, #000 40px, #000 45px, transparent 45px);
    
    /* Position groups specifically to leave the 'E-F' and 'B-C' gaps */
    background-position: 10px 0, 70px 0; 
    background-size: 140px 100%; /* This defines the width of one full octave */
    background-repeat: repeat-x;
    z-index: 1;
}


.title {
    font-weight: normal;
    text-align: center;
    color: #fffdd0;
    letter-spacing: 2px;
}

.secondary_header {
    width: 100%;
    padding: 25px 0 20px;
    background-color: #7fc6a4;
    clear: left;
    overflow: hidden;
}

.secondary_header ul li {
    list-style: none;
    float: left;
    margin: 0 0 0 5%;
    color: seashell;
    letter-spacing: 1px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.secondary_header a {
    color: seashell;
    font-weight: bold;
    text-decoration: none;
    font-size: 20px;
    margin-right: 10px;
}

.secondary_header ul li a:hover {
    font-size: 30px;
    color: yellow;
}

/* --- 7. Main Content Styles --- */
.Firstpage h3 { font-size: 35px; color: #c6817f; }
.Firstpage p { font-size: 20px; color: #c6817f; font-weight: bold; }

.centered-ul {
    text-align: left;
    display: inline-block;
    font-size: 20px;
    color: #c67fc5;
    font-weight: bold;
}

.left_article, .right_article {
    width: 50%;
    color: #c6817f;
    font-weight: bold;
}

.left_article { float: left; padding-bottom: 15px; }
.right_article { float: right; }

.left_article h3, .right_article h3 {
    padding: 0 5%;
    margin-top: 5%;
    color: #c67fc5;
    text-transform: uppercase;
    text-align: center;
}

.left_article li, .right_article li {
    text-transform: uppercase;
    color: #c67fc5;
    text-decoration: underline;
    list-style: none;
    text-align: center;
}

.right_article img { display: block; margin: 5% auto 0; }

/* --- 8. Lesson & Info Section --- */
.LessonInfo { font-size: 20px; color: #c6817f; font-weight: bold; }
.LessonInfo h3 { font-size: 35px; color: #c67fc5; text-decoration: underline; }

.Lesson_li {
    margin-left: 25px;
    text-align: center;
    font-size: 25px;
    color: #c67fc5;
    font-weight: bold;
    text-decoration: underline;
    list-style: none;
}

.Lesson_li-p {
    margin-left: 35px;
    text-align: center;
    font-size: 18px;
    color: #c6817f;
    font-weight: bold;
}

.line {
    width: 50%;
    height: 1px;
    background-color: black;
    margin: 0 auto;
}

/* --- 9. Contact & History --- */
.centered_text {
    clear: both;
    text-align: center;
    margin: 0 20px 0 35px;
    font-size: 18px;
    color: #c6817f;
    font-weight: bold;
}

.centered_text h3, .contact_page h3 {
    text-decoration: underline;
    color: #c67fc5;
}

.contact_page h3 { text-align: center; font-size: 40px; }

.contact_page li {
    color: #c67fc5;
    text-decoration: underline;
    list-style: none;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}

.contact_page p {
    color: #c6817f;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

/* --- 10. Footer --- */
.secondary_footer {
    width: 100%;
    padding: 25px 0 20px;
    background-color: #7fc6a4;
    clear: left;
}

.copyright {
    text-align: center;
    color: #fffdd0;
    text-transform: uppercase;
    font-weight: lighter;
    letter-spacing: 2px;
}