body {
    margin: 0;
    padding: 40px;
    font-family: Arial, sans-serif;
    background-image: url("https://file.garden/ai_j0FB-2xOPAAOo/assets/cinema.png");
    background-size: cover;
    background-attachment: fixed;
}

header {
    text-align: center;
    margin-bottom: 50px;
}


.arrow {
    position: fixed;
    scale: 8%;
    align-items: left;
    left: -720px;
    top: -310px;
    transition: transform 0.2s ease;
}

.arrow :hover {
    transition: transform 0.2s ease;
    transform: scale(1.2);
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.7));
}



.poster {
    position: relative;
}

.poster span {
    font-family: Cordata;
    letter-spacing: 2px;
}

.poster img {
    width: 100%;
    display: block;
}

.year {
    position: absolute;
    top: 8px;
    left: 8px;

    background: rgba(0, 0, 0, 0.75);
    color: white;

    font-size: 17px;
    padding: 4px 8px;
    border-radius: 999px;

    font-weight: bold;
}



h1 {
    font-family: cheese;
    font-size: 4rem;
    color: #fff018;
    filter: drop-shadow(2px 2px 3px rgba(46, 10, 7, 0.35));
}

.film-list {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 30px;
    background-color: black;
    padding: 20px;
}

.film {
    text-align: center;
}

.film img {
    width: 100%;

    transition: transform 0.2s ease;
}

.film img:hover {
    transform: translateY(-5px);
}

.film h2 {
    font-family: Cordata;
    margin-top: 12px;
    font-size: 1.rem;
    font-weight: 500;
    color: #f7f4e8;
    filter: drop-shadow(2px 2px 3px rgba(46, 10, 7, 0.35));
}


h3 {
    font-family: InstrumItalic;
    color: #e9e0ac;
    font-size: 25px;
    filter: drop-shadow(1px 1px 0 #0f072e59) drop-shadow(-1px 1px 0 #0f072e59) drop-shadow(1px -1px 0 #0f072e59)
        drop-shadow(-1px -1px 0 #0f072e59);
}

@font-face {
    font-family: InstrumItalic;
    src: url(https://file.garden/ai_j0FB-2xOPAAOo/assets/InstrumentSerif-Italic.ttf);
}

@font-face {
    font-family: cheese;
    src: url(https://file.garden/ai_j0FB-2xOPAAOo/assets/free-cheese.italic.otf);
}

@font-face {
  font-family: "Cordata"; 
  src: url('https://file.garden/ai_j0FB-2xOPAAOo/assets/SHPinscher-Regular.otf') format('opentype');
}



.layout {
    display: flex;
    gap: 40px;
    padding: 40px;
}


.film-list {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.film img {
    width: 100%;
}

.sidebar {
    position: fixed;
    top: 60px;
    left: 40px;

    width: 200px;
    height: 350px;

    margin-top: 50px;
    margin-left: 30px;

    background: #000;
    padding: 10px;

    display: flex;
    flex-direction: column;
    gap: 12px;

    box-shadow: 5px 5px 0 rgba(0,0,0,0.15);
    z-index: 999;
}

.letterboxd {
    position: fixed;
    bottom: 90px;
    right: 70px;
    width: 150px;
    height: 150px; /* adjust */
    background-image: url("/assets/wipletterboxd.png");
    background-size: contain;
    background-repeat: no-repeat;
    transition: 0.2s;
    z-index: 20;
}

.letterboxd:hover {
    transform: rotate(5deg);
    background-image: url(/assets/wipletterboxd2.png);
}





.content {
    margin-left: 260px;
}


/* BOTONES BONITOS */
.sidebar button {
    padding: 10px 12px;
    border: none;

    background: #854242;
    color: white;
    cursor: pointer;

    font-weight: bold;
    transition: all 0.2s ease;
}

.sidebar button:hover {
    transform: translateY(-2px);
    background: #e46767;
}

.sidebar button.active {
    background: #fcbebe;
    transform: scale(0.97);
    color: #000000;
}

.sidebar img {
    margin-top: auto;
    width: 100%;
}




/* FOOTER  */

footer {
    position: relative;
    margin-top: 100px;
    background-color: #dbff55;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 30px;
    padding-bottom: 30px;
    height: 300px;
    font-family: Arial, Helvetica, sans-serif;
    color: #2c20f7;
    font-size: 20px;
}

.left {
    position: relative;
    float: left;
    width: 600px;
}
.right {
    position: relative;
    float: right;
    width: 300px;
}
.right img {
    max-width: 300px;
}




/* POPCORN CONTAINER */

.popcorn-container {
    position: fixed;
    bottom: 50px;
    left: 170px;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    z-index: 10;
}

.popcorn {
    width: 100%;
    cursor: pointer;
}

.particle {
    z-index: 999;
    position: fixed;
    width: 22px;
    height: 22px;
    pointer-events: none;
    will-change: transform;
}

.popcorn:active {
    transform: translateY(-10px);
}

/* partículas */
.particles span {
    position: absolute;
    font-size: 20px;
    animation: fly 1s ease-out forwards;
    z-index: 9999;
}

@keyframes fly {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--x), var(--y)) scale(0.5);
        opacity: 0;
    }
}