@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{margin:.67em 0;font-size:2em}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:#0000}abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner{border-style:none;padding:0}[type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]::-moz-focus-inner{border-style:none;padding:0}[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring{outline:1px dotted buttontext}[type=button]:-moz-focusring{outline:1px dotted buttontext}[type=reset]:-moz-focusring{outline:1px dotted buttontext}[type=submit]:-moz-focusring{outline:1px dotted buttontext}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;white-space:normal;max-width:100%;padding:0;display:table}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template,[hidden]{display:none}body{color:#fff;background-color:#000;flex-direction:column;align-items:center;margin:0;padding:0;display:flex}.page{width:100%;min-width:320px;max-width:1280px;margin:0;line-height:20px}@media (width<=544px){.page{padding:0 2vw}}.header{height:3rem;margin:5vw;padding:0}.header__title{justify-content:start;font-family:Inter,Arial,Helvetica,sans-serif;display:flex}.header__title_big{margin:5px 0 0;font-size:70px;font-weight:700}.header__title_little-up{font-weight:400;font-size:20x;margin-top:0}.header__line{background:#444;border:none;height:1px;position:relative;top:10px}@media (width<=1024px){.header{margin:5vw 7vw}}@media (width<=544px){.header{margin:50px 13vw}.header__title_big{font-size:30px}.header__title_little-up{font-size:15px}}.profile{grid-template-rows:repeat(2,1fr);grid-template-columns:1fr 2.5fr .5fr 1.5fr;gap:20px 5px;margin:0 8vw;display:grid}.profile__image{cursor:pointer;background-image:url(/web_project_around_react/assets/foto__perfil-CWL9100_.jpg);background-position:50%;background-size:cover;border-radius:50%;grid-area:1/1/3;min-width:180px;height:180px;position:relative}.profile__image:before{content:"";opacity:0;background:#00000080;transition:opacity .3s;position:absolute;inset:0}.edit-icon{z-index:2;opacity:0;background-image:url(/web_project_around_react/assets/editAvatar-CueaQySx.png);background-repeat:no-repeat;background-size:contain;width:50%;height:50%;transition:opacity .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.profile__image:hover:before{z-index:1;opacity:1}.profile__image:hover .edit-icon{opacity:1}.profile__name{white-space:nowrap;text-overflow:ellipsis;grid-area:1/2;align-self:end;width:100%;margin:0 0 0 5px;font-family:inter,Arial,Helvetica,sans-serif;font-size:50px;font-weight:700;line-height:normal;overflow:hidden}.profile__ocupation{font:size 25px;grid-area:2/2;margin:0 0 0 10px;font-family:inter,Arial,Helvetica,sans-serif;font-weight:700}.profile__button-edit{cursor:pointer;background-color:#000;border:2px solid #000;grid-area:1/3/2;align-self:center;width:60px;height:40px;padding:10px}.profile__button-edit svg{background-color:#fff}.profile__button-edit svg:hover{background-color:gray}.profile__button-add{color:#fff;cursor:pointer;background-color:#111;border:1px solid #fff;border-radius:10px;grid-area:1/4/3/5;place-self:center end;width:200px;height:auto;font-size:60px;transition:all .2s}.profile__button-add:hover{background-color:#3f3d3d}@media (width<=1024px){.profile{grid-template-columns:1fr 3fr .5fr 1fr;margin:0 7vw}.profile__image{min-width:120px;height:120px}.profile__name{font-size:40px}.profile__button-edit{width:40px;padding:2px}.profile__button-add{width:145px;font-size:45px}}@media (width<=544px){.profile{grid-template-rows:6fr 1fr 1fr 2fr;grid-template-columns:repeat(4,1fr);gap:10px 5px;margin:0 9vw}.profile__image{grid-area:1/1/auto/5;place-self:center;width:180px;height:180px;padding:8px}.profile__name{grid-area:2/1/auto/4;place-self:end;width:198px;height:auto;font-size:22px}.profile__button-edit{grid-area:2/4/auto/5;place-self:end start;width:25px;height:25px;margin:0;padding:0}.profile__ocupation{grid-area:3/1/auto/6;justify-self:center;align-items:end;height:2rem;margin:0;font-size:10px}.profile__button-add{grid-area:4/1/auto/6;place-self:center;width:100%;font-size:40px}}.element{box-sizing:border-box;flex-wrap:wrap;gap:40px 7%;margin:0;padding:50px 8vw;display:flex}.element__card{background-color:#f8f8ff;border-radius:10px;flex-direction:column;width:282px;height:361px;display:flex;position:relative}.template-element{display:none}.element__card-trash{cursor:pointer;opacity:1;background:url("data:image/svg+xml,%3csvg%20width='18'%20height='20'%20viewBox='0%200%2018%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M2.45787%2018.1422C2.51882%2018.8126%203.06735%2019.3002%203.73778%2019.3002H14.2615C14.9319%2019.3002%2015.4804%2018.7923%2015.5414%2018.1422L16.7197%205.79004H1.27954L2.45787%2018.1422Z'%20fill='white'/%3e%3cpath%20d='M16.7201%201.93002H11.5801V1.27991C11.5801%200.568849%2011.0113%200%2010.3002%200H7.72009C7.00903%200%206.44018%200.568849%206.44018%201.27991V1.93002H1.27991C0.568849%201.93002%200%202.49887%200%203.20993C0%203.92099%200.568849%204.48984%201.27991%204.48984H16.7201C17.4312%204.48984%2018%203.92099%2018%203.20993C18%202.49887%2017.4312%201.93002%2016.7201%201.93002Z'%20fill='white'/%3e%3c/svg%3e") 50% no-repeat;border:none;width:30px;height:30px;position:absolute;top:10px;right:10px}.element__card-trash:hover{opacity:.5;transform:scale(1.3)}.element__card-image{object-fit:cover;background-position:50%;background-size:cover;width:100%;height:264px}.element__card-info{align-items:center;padding:10px;display:flex}.element__card-text{color:#000;white-space:nowrap;text-overflow:ellipsis;width:80%;font-family:inter,Arial,Helvetica,sans-serif;font-size:24px;font-weight:900;line-height:normal;overflow:hidden}.element__card-heart{cursor:pointer;opacity:1;background:url(https://practicum-content.s3.us-west-1.amazonaws.com/web-code/dom/moved_heart.svg) 50%/100% no-repeat;border:none;width:35px;height:35px;margin-left:auto;transition:all .3s;right:10px}.element__card-heart:hover{opacity:.5;transform:scale(1.3)}.element__card-heart_active{opacity:1;background:url(https://practicum-content.s3.us-west-1.amazonaws.com/web-code/dom/moved_heart-filled.svg) 50% no-repeat}@media (width<=1024px){.element{padding:50px 7vw}.image-window__button-close{font-size:70px;top:45px;right:50px}}@media (width<=544px){.element{padding:50px 10vw 30px}.element__card-text{width:210px}.element__card-heart{width:30px;font-size:40px}.image-window__button-close{font-size:40px;top:180px;right:12px}}.popup{visibility:hidden;background:#000c;justify-content:center;align-items:center;width:100%;height:100vh;display:flex;position:fixed;inset:0}.popup__block{background-color:#f8f8ff;border-radius:10px;justify-content:center;align-items:center;width:50vw;padding:30px;position:relative}.popup__open{visibility:visible;z-index:1}.popup__close{cursor:pointer;z-index:99999;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAM5JREFUeAG1llEKxCAMRMNetLnZetNZhcoWaWuiMwMVaoT3PjRqdgbAUb+vidMYjTVONniPTOKE9xx3cJnEAP9L1KHgPjSJB3hL6QtkElP4ZSFdIgxXSKThTIllOENiG74jQYOvSNDhGQkZPCIhhwck9PCkRDFlJhLFkvlYPlis7edlw12jeU8E4RqJF3iB+j2BwDmXSSDRZOgSWOhwNAlstNdtCRB6+7IEiBdLWoIJT0so4GEJJTwkUQdXwicS3ouuhD9I+Fh0JXyQ8P7/A0U+vtbw5AyMAAAAAElFTkSuQmCC) no-repeat;border:none;width:32px;height:35px;position:absolute;top:-25px;right:-35px}.popup__close:hover{opacity:.6}.popup__content_content_image{background:0 0;border-radius:0;width:auto;margin:0;padding:0}.popup__image{max-width:75vw;max-height:75vh;display:flex}.form{margin:5px}.form__title{color:#000;font-family:inter,Arial,Helvetica,sans-serif;font-size:24px;font-weight:900;line-height:100%}.form__fieldset{border:none;flex-direction:column;gap:15px;margin:0;padding:0;display:flex}.form__input{background-color:#0000;border:none;border-bottom:1px solid #ccc;outline:none;padding:10px 5px;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px}.form__input-error{color:red;opacity:0;font-family:Inter,Arial,Helvetica,sans-serif}.form__input-error_active{opacity:1}.form__input_type_error{border-bottom:1px solid red}.form__button{color:#fff;cursor:pointer;background:#000;border:1px solid #000;border-radius:8px;margin-top:20px;padding:12px;font-size:16px}.form__button:hover{opacity:.7}.form__button_disabled{color:#999;cursor:not-allowed;background:#f8f8f8;border-color:#999}@media (width<=544px){.form{width:100%;height:100%}.form__container{width:auto;max-width:70vw;padding:30px}.form__button{width:50vw}.form__title{margin:0 0 55px}}.footer{margin:10px 13vw 0}.footer__copyright{color:#777;font-family:inter,Arial,Helvetica,sans-serif}@media (width<=1024px){.footer{margin:0 7vw}}@media (width<=544px){.footer{margin:0 10vw 20px}.footer__copyright{margin:0;font-size:10px}}