@import"https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Raleway:wght@400;500;600&display=swap";:root{--header-color: #070b10;--danger-color: hsl(0, 100%, 63%);--title-color: hsl(0, 0%, 75%);--text-color: hsl(0, 0%, 85%);--body-color: hsl(0, 0%, 15%);--dark-body-color: #242424;--container-color: hsl(0, 0%, 10%);--border-color: hsl(0, 0%, 87%);--text-white: #fff;--body-font: "Raleway", sans-serif;--second-font: "Poppins", sans-serif;--big-font-size: 56px;--h1-font-size: 50px;--h2-font-size: 32px;--h3-font-size: 24px;--large-font-size: 18px;--normal-font-size: 16px;--small-font-size: 15px;--smaller-font-size: 14px;--tiny-font-size: 12px;--weight-400: 400;--weight-500: 500;--weight-600: 600;--weight-700: 700;--weight-800: 800;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body,input,textarea{font-family:var(--body-font);font-size:var(--normal-font-size);font-weight:var(--weight-500)}body{background-color:var(--body-color);color:var(--text-color)}h1,h2,h3,h4,h5,h6{font-family:var(--second-font);font-weight:var(--weight-700);color:var(--title-color)}ul{list-style:none}a{text-decoration:none}button,input,textarea{background-color:transparent;border:none;outline:none}img{max-width:100%}.header{background-color:var(--header-color);display:flex;width:100%;font-family:var(--second-font);padding:10px 15px}.header__logo{width:120px}.main__title{font-size:var(--h1-font-size);text-align:center}.grid{margin-top:20px;display:grid;gap:10px}.card{background-color:var(--container-color);padding:15px;border-radius:15px;box-shadow:0 0 10px #0003}.card__hover{background-color:var(--container-color);position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;opacity:0;transition:all .3s ease}.card:hover .card__hover{opacity:1}.button{display:inline-block;color:var(--title-color);border:1px solid var(--border-color);font-family:var(--second-font);font-size:var(--small-font-size);font-weight:var(--weight-500);position:relative;overflow:hidden;cursor:pointer;z-index:0;transition:all .3s ease-in-out}.button:hover{color:var(--container-color)}.button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--border-color);transform:translate(100%);transition:all .3s ease-out;z-index:-1}.button:hover:before{transform:translate(0);transition:all .4s ease}.button:disabled{pointer-events:none;opacity:.5}.button__icon{background-color:var(--border-color);position:absolute;inset-block:-2px;right:0;width:55px;border-radius:50%;color:var(--container-color);font-size:var(--large-font-size);text-align:center;line-height:60px}.container__movies{display:grid;grid-template-columns:repeat(auto-fill,290px);gap:30px;margin-top:10px;padding:0 30px 20px;justify-content:center}.movies_item{position:relative;overflow:hidden;cursor:pointer;text-align:center;color:var(--text-color);transition:.3s}.movies_item:hover{transform:scale(1.03);transition:.3s}.movies__img{height:400px;width:300px;object-fit:cover;border-radius:5px}.details__container{display:grid;background-color:var(--container-color);border-radius:15px;transition:all .4s ease;margin:20px 0;max-width:1200px;margin-inline:auto;padding-inline:15px;padding:25px 0;box-shadow:0 0 10px #0003;grid-template-columns:1fr 2fr}.details__first{display:flex;justify-content:center;padding:0 30px}.details__second{display:flex;flex-direction:column;margin-bottom:10px;padding-right:20px}.details__title{font-size:var(--h2-font-size);font-weight:var(--weight-700);padding:10px;margin-bottom:5px}.details__subtitle{font-size:var(--large-font-size);font-weight:var(--weight-600);padding:10px 10px 0;margin-bottom:5px}.details__description{font-size:var(--normal-font-size);font-weight:var(--weight-500);padding:0 10px 10px;margin-bottom:5px;text-align:justify}.details__img{height:500px;object-fit:cover;border-radius:15px}.details__video{position:absolute;opacity:0;background:var(--container-color);top:205px;width:100%;max-width:1200px;height:560px;z-index:-10;overflow:hidden;border-radius:15px;transition:all .2s ease}.details__video .iframe{height:560px;width:100%;position:relative;margin-inline:auto}.button__play{border-radius:40px;padding:15px 70px 15px 35px;margin-top:15px;max-width:240px}.button__close{position:absolute;z-index:100;top:0;right:0;height:40px;width:40px;border-radius:15px;filter:invert(.8)}.show-video{z-index:10;opacity:1}@media screen and (max-width: 1200px){:root{--big-font-size: 42px;--h1-font-size: 36px;--h2-font-size: 30px;--h3-font-size: 24px;--large-font-size: 16px;--normal-font-size: 15px;--small-font-size: 14px;--smaller-font-size: 13px;--tiny-font-size: 11px}.details__container{max-width:1000px}.details__video{max-width:1000px;top:185px}.grid{gap:20px}}@media screen and (max-width: 1024px){.details__container,.details__video{max-width:800px}.details__img{height:400px}}@media screen and (max-width: 816px){.details__container{grid-template-columns:2fr 3fr;max-width:700px}.details__video{max-width:700px}.details__first{justify-content:center}.details__second{padding:0}}@media screen and (max-width: 724px){.details__container{grid-template-columns:1fr;max-width:500px}.details__video{max-width:500px}.details__second{padding:10px 25px}.movies__img{height:380px}.hide-details{display:none}}@media screen and (max-width: 524px){.details__container,.details__video{max-width:400px}.details__img{height:380px}}@media screen and (max-width: 424px){:root{--big-font-size: 36px;--h1-font-size: 28px;--h2-font-size: 24px;--h3-font-size: 20px;--large-font-size: 14px;--normal-font-size: 13px;--small-font-size: 12px;--smaller-font-size: 11px;--tiny-font-size: 10px}.details__container{max-width:300px}.details__video{max-width:300px;top:165px}.grid{display:block}.button__play{font-size:var(--tiny-font-size)}.button__icon{font-size:var(--smaller-font-size);line-height:55px}.details__img{height:360px}}@media screen and (max-width: 320px){:root{--h1-font-size: 20px}.details__container,.details__video{max-width:250px}.details__img{height:250px}}