/* 1. FONTS & COLORS */
@font-face {
    font-family: 'Sinoreta';
    src: url("../fonts/CRONDE.otf")format('truetype');
}
@font-face {
    font-family: 'Lostar';
    src: url('../css test/Lostar.ttf') format('truetype');
}

/* 1. Global Styles */
:root {
    -bg-color: #fdf6cc;
    -accent-orange: #d97d54;
    -bar-yellow-67: rgba(242, 215, 80, 0.67);
    -over-mij-color: #9E462E;
}

body {
    /* Fixed the var call - MUST have two dashes */
    background-color: #fdf6cc; 
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


/* 2. NAVIGATION BAR */
.navbar {
    position: relative;
    width: 100vw;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.navbar::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 69px;
    background-color: rgba(242, 215, 80, 0.67);
    z-index: 1;
}

.navbar a {
    font-family: 'Sinoreta', cursive;
    text-decoration: none;
    color: #d97d54;
    font-size: 2.5rem;
    z-index: 2;
}

.nav-frame {
    width: 80px;
    height: 70px;
    z-index: 2;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 3. MAIN TITLE */
.main-title h1 {
    font-family: 'Lostar', sans-serif !important;
    text-align: center;
    font-size: 8rem;
    color: #d97d54;
    letter-spacing: 1.5rem;
    margin: -10px 0 10px 0;
    font-weight: normal;
}

/* 4. PHOTO GRID (X-LAYOUT) */
.photo-grid {
    display: grid;
    /* Added more space between columns to allow vinyls to breathe */
    grid-template-columns: 1fr 0.8fr 1fr 0.8fr 1fr;
    gap: 40px;
    padding: 0 10%;
    margin-top: -30px;
}

.top-left     { grid-column: 1; grid-row: 1; justify-self: start; }
.bottom-left  { grid-column: 1; grid-row: 2; justify-self: start; }
.center-item  { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-top: 50px; }
.top-right    { grid-column: 5; grid-row: 1; justify-self: end; }
.bottom-right { grid-column: 5; grid-row: 2; justify-self: end; }

/* 5. PHOTO WRAPPERS & VINYLS */
.photo-wrapper {
    position: relative;
    width: 250px;
    height: 250px;
}

.image-box {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 10; /* Photo on Top */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
}

.vinyl-record {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    z-index: 5; /* Vinyl Behind */
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* INITIAL "STICK OUT" POSITIONS */
.stick-right { top: 15px; left: 80px; }   /* Visible on the right */
.stick-left  { top: 15px; left: -50px; }  /* Visible on the left */
.stick-up    { top: -60px; left: 15px; }  /* Visible on the top */

/* HOVER ANIMATIONS */
.photo-wrapper:hover .stick-right { transform: translateX(80px) rotate(30deg); }
.photo-wrapper:hover .stick-left  { transform: translateX(-80px) rotate(-30deg); }
.photo-wrapper:hover .stick-up    { transform: translateY(-80px) rotate(15deg); }

/* 6. LABELS & METADATA */
.label-yellow { background: radial-gradient(circle, #F2D750 25%, #111 26%); }
.label-orange { background: radial-gradient(circle, #A64B29 25%, #111 26%); }

.meta-text {
    font-family: 'Sinoreta', cursive;
    color: #d97d54;
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

/* 7. FOOTER */
.cassette-footer {
    display: flex;
    justify-content: center;
    padding: 60px 0 100px;
}

.cassette {
    width: 280px;
    height: 180px;
    background-image: url("../images/cassette.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 8. IMAGE PATHS - ADD YOUR FILES HERE */
.frame-1 { background-image: url("../images/muziek 3.jpg"); }
.frame-2 { background-image: url("../images/muziek 1.jpg"); }
.frame-3 { background-image: url("../images/muziek 2.jpg"); }
.frame-4 { background-image: url("../images/muziek 1.jpg"); }
.frame-5 { background-image: url("../images/muziek 3.jpg"); }

.p1 { background-image: url("../images/port links, foto linksboven 2.jpg"); } /* Top Left */
.p2 { background-image: url("../images/fotografie rechtsboven.jpg"); } /* Top Right */
.p3 { background-image: url("../images/details foto.JPG"); } /* Center */
.p4 { background-image: url("../images/fotografie linksonder.jpg"); } /* Bottom Left */
.p5 { background-image: url("../images/fotografie rechtsonder.jpg"); } /* Bottom Right */