*,*:after,*:before{margin:0;padding:0;box-sizing:border-box}:root{--color-blue-500: hsl(215, 51%, 70%);--color-cyan-400: hsl(178, 100%, 50%);--color-blue-950: hsl(217, 54%, 11%);--color-blue-900: hsl(216, 50%, 16%);--color-blue-800: hsl(215, 32%, 27%);--color-white: hsl(0, 0%, 100%);--main-font: "Outfit", sans-serif;--font-size-base: 1rem;--font-size-sm: .5rem;--font-size--md: .75rem;--font-size--lg: 1.5rem;--font-size-ex-lg: 2rem;--font-letter-spacing: .1rem;--border-radius: .5rem;--border-radius-card: 1rem;--spacing-unit: 1rem;--spacing-sm: .5rem;--spacing-md: 2rem;--spacing-lg: 3rem;--bottom-line: .1rem;--avatar-size: 3rem;--card-width: 25rem;--animation-time: .3s}body{font-family:var(--main-font);background-color:var(--color-blue-950);display:flex;justify-content:center;align-items:center;min-height:100vh}.preview{display:flex;flex-direction:column;background-color:var(--color-blue-900);padding:var(--spacing-unit);margin:var(--spacing-unit);border-radius:var(--border-radius-card);gap:var(--spacing-unit);max-width:90%}.preview__img{max-width:100%;height:auto;display:block}.preview__image-container{overflow:hidden;position:relative;border-radius:var(--border-radius);cursor:pointer}.preview__image-container:before{content:"";background-image:url("data:image/svg+xml,%3csvg%20width='48'%20height='48'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20fill='none'%20fill-rule='evenodd'%3e%3cpath%20d='M0%200h48v48H0z'/%3e%3cpath%20d='M24%209C14%209%205.46%2015.22%202%2024c3.46%208.78%2012%2015%2022%2015%2010.01%200%2018.54-6.22%2022-15-3.46-8.78-11.99-15-22-15Zm0%2025c-5.52%200-10-4.48-10-10s4.48-10%2010-10%2010%204.48%2010%2010-4.48%2010-10%2010Zm0-16c-3.31%200-6%202.69-6%206s2.69%206%206%206%206-2.69%206-6-2.69-6-6-6Z'%20fill='%23FFF'%20fill-rule='nonzero'/%3e%3c/g%3e%3c/svg%3e");position:absolute;background-color:hsl(from var(--color-cyan-400) h s l/50%);width:100%;height:100%;top:0;left:0;background-repeat:no-repeat;background-position:center;opacity:0;transition:opacity var(--animation-time) ease}.preview__image-container:hover:before{opacity:1}.preview__content{display:flex;flex-direction:column;gap:var(--spacing-unit);padding-bottom:var(--spacing-unit);border-bottom:var(--bottom-line) solid var(--color-blue-800)}.preview__title{color:var(--color-white)}.preview__description,.preview__time-data,.preview__author-info{color:var(--color-blue-500)}.preview__title:hover,.preview__author-name:hover,.preview__time-data:hover{color:var(--color-cyan-400);cursor:pointer}.preview__data,.preview__eth,.preview__time{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm)}.preview__eth-data{color:var(--color-cyan-400)}.preview__author{display:flex;align-items:center;gap:var(--spacing-unit)}.preview__avatar{width:var(--avatar-size);height:var(--avatar-size);border:var(--bottom-line) solid var(--color-white);border-radius:50%}.preview__author-name{color:var(--color-white)}@media(min-width:50rem){.preview{width:var(--card-width)}}