#root{width:100%}.element{background-color:var(--elements-dark)}.element .title{font-weight:600;font-size:14px}.element .container-dark-mode{display:flex;justify-content:space-between;gap:10px;cursor:pointer}.container-barra{width:100%;padding:20px 15px;margin:0 auto;box-shadow:0 0 1px #000}.barra{display:flex;justify-content:space-between;align-items:center;max-width:1700px}.container-search-filter{display:flex;width:100%;flex-wrap:wrap;gap:20px;justify-content:space-between}.container-search{display:flex;padding:8px 20px;gap:20px;width:100%;max-width:500px;border-radius:5px;background-color:var(--elements-dark)}.container-search .input-search{background-color:var(--elements-dark);border:none;color:var(--texts-dark);font-size:14px;height:30px;width:100%}.container-filter-options{position:relative;width:200px}.container-options{position:absolute;background-color:var(--elements-dark);margin-top:5px;width:100%;border-radius:5px;padding:15px;display:flex;flex-direction:column;box-shadow:0 1px 1px #202020;transition:all .5s ease-in-out;animation:drop-out .3s cubic-bezier(.445,.05,.55,.95) both;transform-origin:top center;z-index:10}.container-options .option{padding:8px;cursor:pointer;border-radius:5px}.container-options .option:hover{background-color:var(--elements-dark-hover)}@keyframes drop-out{0%{transform:scaleY(0)}to{transform:scaleY(1)}}.container-filter{display:flex;padding:8px 20px;gap:30px;width:max-content;border-radius:5px;background-color:var(--elements-dark);align-items:center;justify-content:space-between;width:100%;height:100%}.container-filter .filter-title{font-size:14px;font-weight:400}.container-filter .arrow-option{cursor:pointer;transition:all .2s ease-in-out;border-radius:2px}.container-filter .arrow-option:hover{background-color:var(--elements-dark-hover)}.arrow-option.rotate{transform:rotate(180deg)}.cards{display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;margin:0 auto;max-width:1700px;padding:30px}.cards .card{display:flex;flex-direction:column;border-radius:10px;margin:0 auto;height:350px;width:250px;background-color:var(--elements-dark);transition:scale .1s ease-in-out}.cards .card .card-image{width:100%;height:45%;border-radius:10px}.cards .card .card-titles{padding:25px}.cards .card .card-titles .card-title{font-size:20px;font-weight:800;margin-bottom:8px}.cards .card .card-titles p{font-size:15px;font-weight:200}.cards .card .card-titles p span{font-weight:600}.card:hover{outline:1px solid white;box-shadow:0 0 1px #fff;scale:1.05;cursor:pointer}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center}.modal{background-color:var(--elements-dark);padding:30px;border-radius:2px;box-shadow:0 0 10px #0000004d;width:80%;height:80%;overflow-y:auto;overflow-x:hidden}.container-modal{display:flex;flex-direction:column;justify-content:space-between;height:100%}.container-modal .modal-image{width:100%;border-radius:4px;margin-bottom:10px}.container-modal .modal-title{font-size:25px;font-weight:700;margin-bottom:8px}.container-modal .modal-titles{display:flex;flex-direction:column;gap:5px;margin:10px 0}.container-modal .modal-titles p{font-size:18px;font-weight:200}.container-modal .modal-titles p span{font-weight:600}.container-modal .container-bordes{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}.container-modal .container-bordes .borde{padding:2px 20px;background-color:var(--elements-dark-hover);box-shadow:0 0 5px 2px #2b2d35;font-weight:200;font-size:16px}.modal-close{position:absolute;padding:5px 15px;top:25px;right:25px;background:var(--elements-dark);border:none;cursor:pointer;font-size:16px;box-shadow:0 0 5px 2px #2b2d35}.modal-close:hover{scale:1.1}@media (width > 750px){.container-barra{padding:20px 30px}.cards{padding:30px 0;gap:30px;justify-content:space-evenly}.cards .card{margin:0}.container-modal{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px}.container-info{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px}}:root{font-variation-settings:"wdth" 100,"YTLC" 500;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;--background-dark: hsl(207, 26%, 17%);--elements-dark: hsl(209, 23%, 22%);--elements-dark-hover: hsl(207, 24%, 28%);--texts-dark: hsl(0, 0%, 100%);--background-light: hsl(0, 0%, 98%);--elements-light: hsl(0, 0%, 88%);--texts-light: hsl(200, 15%, 8%);--inputs-light: hsl(0, 0%, 52%);color-scheme:dark light}*{margin:0;padding:0;box-sizing:border-box;font-family:Lato,sans-serif;font-optical-sizing:auto;font-weight:300;font-style:normal}body{display:flex;min-width:320px;min-height:100vh;background-color:var(--background-dark);color:var(--texts-dark)}html .light{color:var(--texts-light);background-color:var(--background-light)}html .light .element{background-color:var(--background-light)}html .light .container-search,html .light .container-search .input-search{background-color:var(--elements-light);color:var(--inputs-light)}html .light .container-options{background-color:var(--elements-light)}html .light .container-options .option:hover{background-color:#f8f6f6}html .light .container-filter{background-color:var(--elements-light)}html .light .cards .card{background-color:var(--elements-light);box-shadow:0 0 1px #1f1e1e}html .light .cards .card .card-titles p{font-weight:300}html .light .modal{background-color:var(--elements-light)}html .light .modal .modal-close{color:var(--texts-light)}html .light .container-modal{background-color:var(--elements-light)}html .light .container-modal .modal-titles p{font-weight:400}html .light .container-modal .container-bordes .borde{background-color:var(--elements-light);font-weight:400}html .light .modal-close{background-color:var(--elements-light)}@media (prefers-color-scheme: light){body{color:var(--texts-light);background-color:var(--background-light)}.element{background-color:var(--elements-light)}.container-search{background-color:var(--elements-light);color:var(--inputs-light)}.container-search .input-search{background-color:var(--elements-light);color:var(--inputs-light)}.container-options{background-color:var(--elements-light)}.container-options .option:hover{background-color:#f8f6f6}.container-filter{background-color:var(--elements-light)}.arrow-option:hover{background-color:#f8f6f6}.cards .card{background-color:var(--elements-light);box-shadow:0 0 1px #1f1e1e}.cards .card .card-titles p{font-weight:300}.modal{background-color:var(--elements-light)}.container-modal{background-color:var(--elements-light)}.container-modal .modal-titles p{font-weight:400}.container-modal .container-bordes .borde{background-color:var(--elements-light);font-weight:400}.modal-close{background-color:var(--elements-light)}}