@import"https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@200;400;700;900&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap";.App{position:relative;margin:var(--space-2xs) var(--space-xs);display:flex;flex-direction:column;align-items:center}.overlay{position:fixed;top:-100vh;z-index:20;background-color:var(--primary-bg-color);width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.close-button{position:absolute;top:20px;right:20px;font-size:var(--step-5);color:var(--primary-button-color);cursor:pointer}.active{top:0}.yt-player{width:100%;max-width:800px;height:100%;max-height:450px;opacity:1}.head-wrapper{width:100%;max-width:1000px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;margin-bottom:var(--space-s)}.right{display:flex;flex-direction:column}label{font-size:var(--step--1)}input{margin-bottom:var(--space-s);font-size:var(--step--1);padding:var(--space-2xs)}button{font-size:var(--step--1);font-weight:700;padding:var(--space-2xs);border:none;cursor:pointer;outline:none;color:var(--primary-button-text-color);background-color:var(--primary-button-color);user-select:none}button:active{box-shadow:2px 2px 2px #fff}.body-wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,2fr));gap:20px;width:100%;max-width:1000px}.element{user-select:none;height:180px;position:relative;overflow:hidden}img{width:100%;height:100%;object-fit:cover;transition:all .3s ease}img:hover{overflow:hidden;transform:scale(1.2)}.element:hover>.delete-button{display:block}.element:hover{box-shadow:2px 2px 2px #fff}.delete-button{display:none;cursor:pointer;position:absolute;font-size:1.5em;top:8px;right:8px;color:#faebd7;z-index:10;transition:all .2s ease}.delete-button:hover{transform:rotate(15deg)}@media only screen and (max-width: 700px){.head-wrapper{display:block}}:root{box-sizing:border-box;--primary-bg-color: #232946;--primary-headline-color: #fffffe;--primary-paragraph-color: #b8c1ec;--primary-button-text-color: #232946;--primary-button-color: #eebbc3;--step--1: clamp(.94rem, calc(.84rem + .51vw), 1.2rem);--step-0: clamp(1.13rem, calc(.98rem + .73vw), 1.5rem);--step-1: clamp(1.35rem, calc(1.15rem + 1.02vw), 1.88rem);--step-2: clamp(1.62rem, calc(1.34rem + 1.41vw), 2.34rem);--step-3: clamp(1.94rem, calc(1.56rem + 1.92vw), 2.93rem);--step-4: clamp(2.33rem, calc(1.81rem + 2.59vw), 3.66rem);--step-5: clamp(2.8rem, calc(2.11rem + 3.47vw), 4.58rem);--space-2xs: clamp(.56rem, calc(.49rem + .37vw), .75rem);--space-xs: clamp(.88rem, calc(.78rem + .49vw), 1.13rem);--space-s: clamp(1.13rem, calc(.98rem + .73vw), 1.5rem);--space-m: clamp(1.69rem, calc(1.47rem + 1.1vw), 2.25rem);--space-l: clamp(2.25rem, calc(1.96rem + 1.46vw), 3rem);--space-xl: clamp(3.38rem, calc(2.94rem + 2.2vw), 4.5rem);--space-2xs-xs: clamp(.56rem, calc(.34rem + 1.1vw), 1.13rem);--space-xs-s: clamp(.88rem, calc(.63rem + 1.22vw), 1.5rem);--space-s-m: clamp(1.13rem, calc(.69rem + 2.2vw), 2.25rem);--space-m-l: clamp(1.69rem, calc(1.18rem + 2.56vw), 3rem);--space-l-xl: clamp(2.25rem, calc(1.37rem + 4.39vw), 4.5rem);--space-s-l: clamp(1.13rem, calc(.39rem + 3.66vw), 3rem)}body{font-family:Noto Sans Mono,monospace;margin:0;background:var(--primary-bg-color)}h1{font-size:var(--step-5);margin:var( --space-xl) 0;color:var(--primary-headline-color)}h2{font-size:var(--step-4);margin:var( --space-l) 0;color:var(--primary-headline-color)}h3{font-size:var(--step-3);margin:var( --space-m) 0;color:var(--primary-headline-color)}h4{font-size:var(--step-2);margin:var( --space-s) 0;color:var(--primary-headline-color)}h5{font-size:var(--step-1);margin:var( --space-xs) 0;color:var(--primary-headline-color)}h6{font-size:var(--step-0);margin:var( --space-2xs) 0;color:var(--primary-headline-color)}p{font-size:var(--step-0);margin:var( --space-2xs)0;color:var(--primary-paragraph-color)}label{font-size:var(--step--1);font-weight:400;color:var(--primary-paragraph-color)}