@font-face {
font-family: 'SF Pro Display';
src: url('../../fonts/SFProDisplay-BlackItalic.woff2') format('woff2'),
url('../../fonts/SFProDisplay-BlackItalic.woff') format('woff');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url('../../fonts/SFProDisplay-LightItalic.woff2') format('woff2'),
url('../../fonts/SFProDisplay-LightItalic.woff') format('woff');
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url('../../fonts/SFProDisplay-HeavyItalic.woff2') format('woff2'),
url('../../fonts/SFProDisplay-HeavyItalic.woff') format('woff');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url('../../fonts/SFProDisplay-Medium.woff2') format('woff2'),
url('../../fonts/SFProDisplay-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url('../../fonts/SFProDisplay-Bold.woff2') format('woff2'),
url('../../fonts/SFProDisplay-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url('../../fonts/SFProDisplay-Regular.woff2') format('woff2'),
url('../../fonts/SFProDisplay-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url('../../fonts/SFProDisplay-ThinItalic.woff2') format('woff2'),
url('../../fonts/SFProDisplay-ThinItalic.woff') format('woff');
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url('../../fonts/SFProDisplay-UltralightItalic.woff2') format('woff2'),
url('../../fonts/SFProDisplay-UltralightItalic.woff') format('woff');
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Display';
src: url('../../fonts/SFProDisplay-SemiboldItalic.woff2') format('woff2'),
url('../../fonts/SFProDisplay-SemiboldItalic.woff') format('woff');
font-weight: 600;
font-style: italic;
font-display: swap;
}
:root {
--color-white: #fff;
--color-white-100: rgba(255, 255, 255, 0.1);
--color-white-200: rgba(255, 255, 255, 0.2);
--color-white-400: rgba(255, 255, 255, 0.4);
--color-white-800: rgba(255, 255, 255, 0.8);
--color-white-900: rgba(255, 255, 255, 0.9);
--color-black: #1e1e1e;
--color-black-100: rgba(0, 0, 0, 0.1);
--color-black-50: rgba(211, 197, 197, 0.39);
--color-black-200: rgba(0, 0, 0, 0.2);
--color-black-500: rgba(0, 0, 0, 0.5);
--color-black-600: rgba(0, 0, 0, 0.6);
--color-blue-800: #007ff7;
--app-color-white: rgb(252, 255, 251);
--color-red: rgba(255, 2, 2, 0.788);
--color-green: #11dd4e;
}
* {
margin: 0;
padding: 0;
outline: 0;
border: 0;
list-style: none;
}
@media screen and (max-width: 900px) {
.hidden {
display: none;
}
}
#page {
display: none;
}
button,
input {
background-color: transparent;
border: 0;
outline: 0;
-webkit-tap-highlight-color: transparent;
}
body {
height: 100vh;
user-select: none;
font-family: 'SF Pro Display', sans-serif;
background: url(../../eaec004611565c33660fd94abf3da70e/fondo5.webp) no-repeat center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
line-height: 20px;
}
.vangartt{
max-width: 80%;
max-height: 60%;
display: block;
}
*::-webkit-scrollbar {
width: 15px;
}
*::-webkit-scrollbar-track {
background: transparent;
border-radius: 10px;
}
*::-webkit-scrollbar-thumb {
background: rgb(170, 170, 170);
border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover {
background: darkgray;
}
* {
scrollbar-width: thin;
scrollbar-color: rgb(170, 170, 170) transparent;
}
.navbar {
width: 100%;
padding: 0.1rem 0;
position: fixed;
top: 0;
left: 0;
color: rgba(255, 255, 255, 0.9);
background-color: #00000061;
backdrop-filter: blur(1px);
display: flex;
align-items: center;
justify-content: space-between;
z-index: 20;
animation: top-to-bottom 0.3s;
}
.navbar2 {
width: 100%;
padding: 0.1rem 0;
top: 0;
left: 0;
color: rgba(255, 255, 255, 0.9);
background-color: #00000061;
backdrop-filter: blur(1px);
display: flex;
align-items: center;
justify-content: space-between;
z-index: 20;
animation: top-to-bottom 0.3s;
}
.navbar > ul {
display: flex;
align-items: center;
}
.navbar li {
position: relative;
font-size: 14px;
margin: 0 4px;
cursor: pointer;
text-shadow: 0 3px 10px rgba(0, 0, 0, 0.288);
transition: 0.2s;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.navbar2 > ul {
display: flex;
align-items: center;
}
.navbar, .navbar ul, .navbar li {
font-weight: normal;
}
li.clickable {
padding: 4px 4px 4px 15px;
margin-bottom: 6px;
border-radius: 5px;
}
li.clickable:hover {
background-color: #0063f7;
}
.navbar2 li {
position: relative;
font-size: 14px;
margin: 0 4px;
cursor: pointer;
transition: 0.2s;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.desp{
background-color: #0404049c;
border: 1px solid #63636382;
border-radius: 7px;
padding: 1px;
box-sizing: content-box;
backdrop-filter: blur(5px);
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.leftLi:hover .desp {
max-height: 500px;
}
.navbar .leftLi.logo {
display: flex;
align-items: center;
justify-content: center;
}
.navbar .leftLi.logo img {
transform: translateY(1px);
}
.navbar svg {
fill: var(--color-white);
}
.navbar .leftLi {
padding: 4px 8px;
}
.navbar .leftLi:hover {
color: var(--color-white);
border-radius: 5px;
background-color: var(--color-white-200);
}
.navbar2 .leftLi.logo img {
transform: translateY(1px);
}
.navbar2 svg {
fill: var(--color-white);
}
.navbar2 .leftLi {
padding: 4px 8px;
}
.navbar2 .leftLi:hover {
color: var(--color-white);
border-radius: 5px;
background-color: var(--color-white-200);
}
li.app_name {
display: none;
font-weight: 900 !important;
}
.navbar__right li {
margin: 0 10px;
}
.navbar__right li svg {
transform: scale(0.8);
}
.wifi svg {
transform: translateY(1px) scale(0.8) !important;
}
li.cellular {
display: none;
}
.navbar__right .clock #clock {
margin-left: 15px;
margin-right: 15px;
}
.navbar__right li .control-center {
width: 32px;
height: 19px;
transform: scale(0.8) translateY(1px);
}
.navbar__right .battery {
margin: 0;
display: flex;
cursor: pointer;
user-select: none;
position: relative;
border-radius: 4px;
align-items: center;
padding: 0.3rem 0.5rem;
background: transparent;
transition: all ease-out 0.2s;
}
.battery{
display: flex !important;
}
.navbar__right .battery.selected {
background: var(--color-white-200);
}
.navbar__right .battery__container {
width: 22px;
height: 10px;
padding: 1px;
position: relative;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.4);
}
.navbar__right .battery__container::after {
content: "";
background: rgba(255, 255, 255, 0.4);
width: 1px;
height: 5px;
position: absolute;
top: 50%;
right: -3px;
transform: translateY(-50%);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.navbar__right .battery__progress {
height: 100%;
display: flex;
background: white;
border-radius: 2px;
}
.navbar__right .battery__progress .is-charging {
display: none;
width: 100%;
height: 100%;
}
.is-charging-visibel {
display: block !important;
}
.navbar__right .battery__low {
background-color: var(--color-red);
}
.navbar__right .battery__high {
background-color: var(--color-green);
}
.navbar__right .battery__text {
font-size: 12px;
margin-right: 4px;
}
.navbar__right .battery__popup {
position: absolute;
top: calc(100% + 6px);
right: 0;
opacity: 0;
width: 220px;
transition: all ease-out 0.2s;
padding: 4px;
background: #00000036;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-webkit-backdrop-filter: blur(60px);
backdrop-filter: blur(60px);
border-radius: 8px;
overflow: hidden;
max-height: 0;
}
.navbar__right .battery__popup.opened {
opacity: 1;
max-height: max-content;
}
.navbar__right .battery__popup header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
}
.navbar__right .battery__popup header h3 {
font-size: 16px;
font-weight: 600;
}
.navbar__right .battery__popup header span {
opacity: 0.75;
font-size: 12px;
}
.navbar__right .battery__popup p {
font-size: 11px;
margin-top: 4px;
padding: 0 10px;
}
.navbar__right .battery__popup hr {
margin: 6px 8px;
border: 0;
border-radius: 99px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.navbar__right .battery__popup button {
padding: 4px 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 4px;
color: white;
width: 100%;
cursor: pointer;
user-select: none;
}
.navbar__right .battery__popup button:hover {
background-color: var(--color-blue-800);
}
.navbar__right .battery__popup button:active {
background-color: #0063f7;
}
li > ul {
display: none;
position: absolute;
align-items: center;
flex-direction: column;
left: 0;
top: 100%;
margin-top: 1px;
font-weight: 600;
padding: 4px;
min-width: 200px;
background: var(--color-white-400);
backdrop-filter: blur(11px);
border-radius: 10px;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.363);
}
li:hover > ul {
display: flex;
}
li > ul > li {
width: 90%;
border-bottom: 1px solid rgb(154 154 154 / 15%);
padding-bottom: 5px;
margin-bottom: 5px !important;
}
li > ul > li:last-child {
border-bottom: 0;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
li > ul > li > button {
color: var(--color-white);
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
text-align: left;
font-family: "SF Pro Display", sans-serif;
font-weight: 100;
padding: 4px 8px;
border-radius: 5px;
transition: 80ms;
font-size: 14px;
cursor: pointer;
}
li > ul > li > button:hover {
color: var(--color-white);
background: var(--color-blue-800);
}
li > ul > li > button:active {
background-color: #0063f7;
}
li > .menu__container {
display: none;
position: absolute;
width: 380px;
border-radius: 20px;
top: 100%;
right: 50%;
height: 24rem;
transform: translateX(50%);
background-color: rgba(224, 222, 222, 0.349);
backdrop-filter: blur(11px);
border: 1px solid rgba(70, 50, 77, 0.308);
box-shadow: 0 7px 15px rgba(26, 26, 26, 0.24);
overflow: hidden;
padding: 15px;
}
li:hover .menu__container {
display: flex;
}
li > .menu__container > .grid__controling {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-template-areas:
"Toggles Toggles DoNotDisturb DoNotDisturb"
"Toggles Toggles KeyboardBrightness Battery"
"Display Display Display Display"
"Audio Audio Audio Audio"
"Music Music Music Music";
grid-gap: 1em 1em;
}
li > .menu__container > .grid__controling .control_center--grid {
display: grid;
box-shadow: 0 5px 15px rgba(44, 44, 44, 0.37);
border: 1px solid rgba(255, 255, 255, 0.178);
overflow: hidden;
border-radius: 12px;
}
.menu__container > .grid__controling .col-5 {
grid-area: Toggles;
}
.menu__container > .grid__controling .col-7 {
grid-area: DoNotDisturb;
}
.menu__container > .grid__controling .col-3--brightness {
grid-area: KeyboardBrightness;
}
.menu__container > .grid__controling .col-3--battery {
grid-area: Battery;
}
.menu__container > .grid__controling .col-12--light {
grid-area: Display;
}
.menu__container > .grid__controling .col-12--volume {
grid-area: Audio;
}
.menu__container > .grid__controling .col-12--music {
grid-area: Music;
}
.grid__controling .control_center--grid button {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
font-size: 20px;
transition: all 120ms ease-in-out;
font-family: "SF Pro Display", sans-serif;
cursor: url(../cursor/Link.cur), pointer;
}
.sound,
.brightness {
position: relative;
}
.menu__container > .grid__controling input[type="range"] {
-webkit-appearance: none;
outline: 0;
border: 0;
}
.sound img {
position: absolute;
top: 50%;
left: 20px;
transform: translatey(-50%);
}
.brightness img {
position: absolute;
top: 50%;
left: 20px;
transform: translatey(-50%);
}
.menu__container > .grid__controling input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 2rem;
width: 2rem;
background-color: var(--color-white);
box-shadow: -2px 0px 3px -2px #5f6063, -340px 0 0 320px #ffffff;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.226);
cursor: pointer;
}
.grid__controling input[type="range"]::-webkit-slider-runnable-track {
margin: 10px;
background: rgba(255, 255, 255, 0.404);
border-radius: 50px;
overflow: hidden;
}
.grid__controling .control_center--grid button p {
display: block;
font-size: 14px;
font-family: "SF Pro Display", sans-serif;
}
.nobtn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.nobtn svg {
background-color: transparent !important;
}
.grid__controling .control_center--grid button svg {
background-color: var(--color-blue-800);
padding: 5px;
border-radius: 50%;
margin: 0 5px;
}
.col-7 button svg {
background-color: #b63333 !important;
}
.col-7 button:focus {
background: #b63333 !important;
color: var(--color-white);
}
.grid__controling .control_center--grid button:focus {
background: var(--color-blue-800);
color: var(--color-white);
}
.grid__controling .control_center--grid .musicPlayer {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.musicPlayer--image {
width: 70%;
height: 100%;
display: flex;
align-items: center;
}
.musicPlayer--image img {
width: 50px;
margin: 0 0 0 10px;
}
.musicPlayer--content {
width: 30%;
height: 100%;
display: flex;
align-items: center;
}
.musicPlayer--content span {
font-size: 40px;
}
@media screen and (max-width: 600px) {
.navbar__right .clock #clock {
margin-left: -45px;
}
}
.dock {
display: flex;
align-items: center;
position: fixed;
padding: 0rem 0.5rem .2rem 0.4rem;
bottom: 3%;
left: 50%;
background-color: #ffffff1c;
height: 65px;
transform: translateX(-50%);
backdrop-filter: blur(5px);
border-radius: 20px;
box-shadow: 0 0 30px rgb(0 0 0 / 56%);
z-index: 10;
transition: transform 0.3s ease-in-out;
}
@media screen and (max-width: 900px) {
  .dock {
    border-radius: 20px;
  }
}
.dock .icon {
position: relative;
display: grid;
place-items: center;
background: none;
border: none;
outline: none;
transform: translate3d(0px, 0%, 0px);
-webkit-tap-highlight-color: transparent;
opacity: 1;
}
.dock .icon img {
width: 3.6rem;
transform: translateY(0);
opacity: 1;
}
.dock .icon .tooltip {
position: absolute;
font-size: 15px;
background-color: rgb(208 208 208 / 80%);
top: -42%;
left: 50%;
transform: translateX(-50%);
display: none;
justify-content: center;
align-items: center;
z-index: 1;
width: 95px;
height: 25px;
padding: 4px 3px 10px;
border-radius: 8px;
font-family: "sf pro display", sans-serif;
font-weight: 700;
clip-path: polygon(
100% 0%,
100% 0%,
0% 0%,
0% 0%,
0% 0%,
0% 0%,
0% 0%,
0% 0%,
0% 80%,
43% 80%,
50% 101%,
57% 80%,
100% 80%,
100% 0%
);
opacity: 0;
}
.tooltip {
display: none;
position: absolute;
background-color: #333;
color: #000;
padding: 5px;
border-radius: 5px;
z-index: 10;
opacity: 0;
transition: opacity 0.3s;
}
.dock .icon {
position: relative;
}
.dock .icon.active .tooltip {
display: block;
opacity: 1;
}
.dock .icon img:active {
filter: brightness(0.6) drop-shadow(0 0 10px #2c2c2c);
}
.container__Window {
width: 100%;
height: 90%;
justify-content: space-around;
display: none;
align-items: center;
}
.window {
display: none;
min-width: 50%;
max-width: 90%;
height: 430px;
overflow: hidden;
border-radius: 1rem;
background: transparent;
box-shadow: 0px 89px 225px -9px rgba(0,0,0,0.82);
border: 1px solid #464646;
animation: zoom-out 0.3s;
z-index: 10;
touch-action: none;
}
.itemss {
min-width: 60%;
max-width: 70%;
height: 590px;
background: #1e1e1ed1;
backdrop-filter: blur(1rem);
align-items: center;
margin: 10px;
}
.product-container {
display: flex;
gap: 20px;
}
.trash-container {
display: flex;
gap: 20px;
}
.h2item{
color: #fff;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 5px;
}
.trashs {
min-width: 60%;
max-width: 70%;
height: 590px;
background: #00000094;
backdrop-filter: blur(1rem);
align-items: center;
margin: 10px;
}
.h2trash{
color: #fff;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 5px;
}
.descripcion{
color: #737373;
padding-left: 20px;
}
.product-image img {
scale: 125%;
height: 77%;
filter: drop-shadow(0px 11px 25px #000);
}
.trash-image img {
scale: 100%;
height: auto;
filter: drop-shadow(0px 11px 25px #000);
}
.bar_top{
display: flex;
align-items: flex-start;
height: 34px;
}
.bar_top .bar {
flex-grow: 1;
height: 100%;
max-width: 520px;
object-fit: cover;
}
.bar_top h2{
font-size: 12px;
margin-left: 15px;
margin-right: 120px;
}
.bar_top2{
margin-left: 40px;
display: flex;
}
.bar_top2 h2{
margin-top: 0px !important;
margin-left: auto;
margin-right: auto;
}
.flechas{
width: 38px;
margin-top: 9px;
margin-left: 11px;
}
.mas{
width: 19px;
height: 19px;
}
.sidebar {
width: 200px;
height: 100vh;
background-color: #363636;
padding-left: 20px;
padding-top: 10px;
border-right: 1px solid #000;
}
.sidebar-trash {
width: 200px;
height: 100vh;
background-color: #353535a1;
padding-left: 20px;
padding-top: 10px;
border-right: 1px solid #000;
}
.section {
margin-bottom: 15px;
}
.title {
font-size: 10px;
font-weight: 600;
color: #666;
margin-bottom: 5px;
}
.title-trash {
font-size: 10px;
font-weight: 600;
color: #b8b8b8;
margin-bottom: 5px;
}
.tag {
display: flex;
align-items: center;
padding: 5px 0;
color: white;
font-size: 11px;
font-weight: normal;
}
.tag-trash {
display: flex;
align-items: center;
padding: 5px 0;
color: #ffffff;
font-size: 11px;
font-weight: normal;
}
.tag-trash.red span { background-color: #ff5f56; }
.tag-trash.orange span { background-color: #ffbd2e; }
.tag-trash.yellow span { background-color: #f5f549; }
.tag-trash.green span { background-color: #27c93f; }
.tag-trash.blue span { background-color: #005dff; }
.tag-trash.purple span { background-color: #d960d9; }
.tag-trash.grey span { background-color: grey; }
.tag-trash span {
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 10px;
}
.tag span {
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 10px;
}
.tag.red span { background-color: #ff5f56; }
.tag.orange span { background-color: #ffbd2e; }
.tag.yellow span { background-color: #f5f549; }
.tag.green span { background-color: #27c93f; }
.tag.blue span { background-color: #005dff; }
.tag.purple span { background-color: #d960d9; }
.tag.grey span { background-color: grey; }
.product-info {
display: flex;
flex-direction: column;
gap: 10px;
background-color: #161616;
width: 800px;
}
.trash-info {
display: flex;
flex-direction: column;
gap: 10px;
background-color: #161616;
width: 800px;
}
.price {
font-size: 20px;
color: #fff;
padding-left: 20px;
padding-bottom: 5px;
}
.cart-item-image{
align-content: center;
}
.item-image{
width: 230px;
margin-left: auto;
margin-right: auto;
}
.cart-container {
width: 600px;
height: 476px;
font-family: 'Courier New', monospace;
text-align: center;
position: relative;
border-radius: 10px;
overflow-y: auto;
background-size: contain;
}
.cart-container::-webkit-scrollbar {
width: 15px;
}
.cart-container::-webkit-scrollbar-track {
background: transparent;
border-radius: 10px;
}
.cart-container::-webkit-scrollbar-thumb {
background: rgb(170, 170, 170);
border-radius: 10px;
}
.cart-container::-webkit-scrollbar-thumb:hover {
background: darkgray;
}
.cart-container:before {
content: "";
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
background-size: contain;
}
.cart-container:after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
right: 0;
height: 10px;
background-size: contain;
}
.cart-item {
margin-bottom: 15px;
padding: 10px;
border-radius: 8px;
    margin-top: -30px;
}
.cart-item-image {
text-align: center;
margin-bottom: 10px;
margin-top: 15px
}
.cart-item-image img {
max-width: 200px;
height: auto;
margin: 0 auto;
filter: drop-shadow(0px 14px 11px #220000);
}
.cart-item-info {
text-align: center;
}
.cart-item-info p {
margin: 5px 0;
color: #e4e4e4;
}
.size-trash{
color: #e4e4e4;
}
.cart-item-info button {
margin: 5px;
padding: 5px 10px;
border: 1px solid #181818;
background-color: #000000;
cursor: pointer;
color: #aeaeae;
transition: transform 0.3s ease-in-out;
}
.cart-item-info button:hover {
background-color: #292929;
transform: scale(1.03);
transition: transform 0.3s ease-in-out;
}
.empty-cart-message{
color: white;
margin-top: 100px;
}
.carrito-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(7px);
background-color: rgba(0, 0, 0, 0.3);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
animation: fadeIn 0.3s ease-out;
}
.carrito-modal-content {
padding: 2rem 3rem;
font-weight: bold;
opacity: 0;
transform: scale(0.9);
animation: showContent 0.4s forwards;
}
@keyframes showContent {
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.shipping-cost,
.final-total {
text-align: center;
color: #acacac;
}
.shipping-cost p,
.final-total p {
font-size: 14px;
font-weight: bold;
margin: 5px 0;
color: #acacac;
}
.checkout-button {
margin-top: 20px;
padding: 10px;
width: 35%;
background-color: #000;
border: 1px solid #000000;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
font-family: 'Courier New', monospace;
transition: transform 0.3s ease-in-out;
}
.checkout-button:hover {
background-color: #868686;
transform: scale(1.03);
transition: transform 0.3s ease-in-out;
}
.size-selector {
position: relative;
display: inline-block;
}
.size{
margin-left: 20px;
color: white;
}
.desc{
width: 400px;
}
.size-dropdown{
background: #333333;
color: #646464;
border-radius: 6px;
width: 80px;
font-size: 12px;
}
.size-options {
border-radius: 8px;
list-style: none;
padding: 0;
margin: 0;
position: absolute;
width: 10%;
background: #161616;
border: 1px solid #4d4d4d;
display: none;
color: white;
}
.overlay-notif {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(0px);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
}
.overlay-notif.show {
opacity: 1;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
}
.notif-box {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(28px);
padding: 40px;
border-radius: 25px;
text-align: center;
font-size: 24px;
color: #c5c5c5;
font-weight: bolder;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
transform: scale(0.5);
opacity: 0;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.notif-box.show {
transform: scale(1);
opacity: 1;
}
.notif-box.hide {
transform: scale(0.5);
opacity: 0;
transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}
.overlay-notif.hide {
opacity: 0;
backdrop-filter: blur(0px);
transition: opacity 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
}
.delete-paper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent;
padding: 0;
z-index: 10000;
}
.delete-paper .paper-image {
width: 40px;
}
@keyframes moveToTrash {
0% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 1;
}
50% {
transform: translate(calc(var(--trash-x) - 700px), calc(var(--trash-y) - 250px)) scale(0.2);
opacity: 0.5;
}
100% {
transform: translate(var(--trash-x), var(--trash-y)) scale(0.01);
opacity: 0;
}
}
.info{
border-bottom: 1px solid #222;
}
.size-options li {
padding: 5px;
cursor: pointer;
}
.size-options li:hover {
background-color: #696969;
}
.size-selector:hover .size-options {
display: block;
}
.size-table {
font-size: 10px;
color: gray;
cursor: pointer;
padding-left: 20px;
margin-bottom: 5px;
}
.add-to-cart {
background-color: #333333;
border-radius: 8px;
width: 119px;
color: #737373;
padding: 8px;
border: none;
cursor: pointer;
margin-left: 20px;
}
.add-to-cart:hover {
background-color: gray;
color: #000;
}
.window__taskbar {
height: 9%;
display: flex;
justify-content: space-between;
padding: 0 16px 0 16px;
background-color: #363636;
}
.window__taskbar-trash {
height: 10%;
display: flex;
justify-content: space-between;
padding: 0 1px 0 16px;
background-color: #353535a1;
}
.window__taskbar--actions {
display: flex;
align-items: center;
}
.bar_top2{
margin-top: -5px;
}
.window__taskbar--actions button {
display: flex;
justify-content: center;
align-items: center;
width: 0.8rem;
height: 0.8rem;
padding: 6px;
border-radius: 50%;
transition: 0.4s;
}
.window__taskbar--actions button:not(:last-child) {
margin-right: 8px;
}
.window__taskbar--actions button:nth-child(1) {
background-color: #ff5f56;
box-shadow: 0 0 0 0.5px #e0443e;
}
.window__taskbar--actions button::after {
display: block;
font-size: 14px;
color: transparent;
font-weight: 900;
}
.window__taskbar--actions button:nth-child(1)::after {
content: "×";
}
.window__taskbar--actions button:nth-child(1):hover {
background-color: #fc3c32;
}
.window__taskbar--actions button:nth-child(2) {
background-color: #ffbd2e;
box-shadow: 0 0 0 0.5px #dea123;
}
.window__taskbar--actions button:nth-child(2)::after {
content: "−";
}
.window__taskbar--actions button:nth-child(2):hover {
background-color: #ffa600;
}
.window__taskbar--actions button:nth-child(3) {
background-color: #27c93f;
box-shadow: 0 0 0 0.5px #1aab29;
}
.window__taskbar--actions button:nth-child(3)::after {
content: "⤡";
}
.window__taskbar--actions button:nth-child(3):hover {
background-color: #12aa29;
}
.window__taskbar--content {
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
.window__taskbar--content h2 {
color: #cfcfcf;
font-weight: 600;
font-size: 12px;
margin-top: 12px;
}
.terminal .window__taskbar,
.maps .window__taskbar {
height: 9%;
}
.terminal_content {
width: 100%;
height: 91%;
overflow-y: scroll;
padding-left: 1rem;
background-color: rgb(0 0 0 / 63%);
backdrop-filter: blur(12px);
color: rgb(235, 235, 235);
font-size: 20px;
font-family: "Roboto Mono", monospace;
}
.color_green {
color: green;
}
.color_blue {
color: #1f48ff;
}
.window__taskbar--right {
width: 60%;
height: 100%;
background-color: transparent;
display: flex;
align-items: center;
justify-content: space-around;
}
@media screen and (max-width: 900px) {
  .window__taskbar--right {
    width: 90%;
  }
}
.Customize__icon span {
color: #9b9a9b;
border: 1px solid rgba(204, 200, 200, 0.412);
border-radius: 9px;
transition: 0.2s;
padding: 5px;
}
.window__taskbar--right .containerSearch {
display: flex;
align-items: center;
justify-content: space-between;
width: 45%;
height: 75%;
background-color: rgb(51 51 51);
border-radius: 5px;
border: 1px solid #616161;
padding-left: 8px;
}
.window__taskbar--right .containerSearch svg {
fill: rgba(123, 123, 123, 0.412);
}
.window__taskbar--right input[type="search"] {
width: 85%;
height: 100%;
background-color: transparent;
color: var(--color-black);
font-size: 18px;
padding-right: 10px;
font-family: "SF Pro Display", sans-serif;
}
.window .content {
width: 100%;
height: 92%;
display: flex;
}
.Parent__content--typing {
width: 72%;
height: 100%;
border-top: 1px solid #1b1a19;
background-color: #1e1e1e;
color: #fff;
padding: 24px;
display: block;
overflow-y: auto;
}





@media (max-width: 768px) {
.registerForm {
width: 333px !important;
padding: 10px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.login-form-input {
width: auto !important;
}
.login-user-icon {
margin-top: 60px;
width: 167px;
}
.assistive-touch {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 9999;
}
.circle {
position: absolute;
border-radius: 50%;
opacity: 0.7;
display: flex;
justify-content: center;
align-items: center;
}
.circle1 {
width: 60px;
height: 60px;
background-color: rgb(255 255 255 / 18%);
}
.circle2 {
width: 45px;
height: 45px;
background-color: rgba(255, 255, 255, 0.5);
}
.circle3 {
width: 37px;
height: 37px;
background-color: rgba(255, 255, 255, 0.7);
}
.circle4 {
width: 29px;
height: 29px;
background-color: rgba(255, 255, 255, 1);
justify-content: center;
align-items: center;
}
.circle4 img {
opacity: 0.5;
width: 18px;
height: 18px;
display: block !important;
}
.cart-modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
background: rgb(33 33 33);
padding: 20px;
border-radius: 35px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
z-index: 10000;
}
.cart-container2 {
max-height: 275px;
overflow-y: auto;
justify-items: center;
}
.cart-container2::-webkit-scrollbar-track {
background: transparent;
}
.empty-cart-message {
color: #777777;
margin-top: 23px;
margin-bottom: 15px;
}
.cart-modal .cart-container {
max-height: 300px;
overflow-y: auto;
}
.cart-modal .checkout-button {
font-family: 'SF Pro Display', sans-serif;
background-color: #414141;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 7px;
margin-left: auto;
margin-right: auto;
width: auto;
display: inherit;
}
.cart-total2{
justify-items: center;
padding-top: 20px;
}
.cart-item-info p {
margin: 5px 0;
color: #ffffff;
}
.cart-item button{
font-family: 'SF Pro Display', sans-serif;
border-radius: 7px;
background: #414141;
border: none;
}
.custom-notes-modal{
display: block;
height: 100vh;
}
.header5 {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
color: #ffc612;
margin-top: 6px;
margin-left: 20px;
}
.headersearch {
width: 93%;
margin-bottom: -9px;
margin-left: 20px;
}
.bar-search {
width: 100%;
height: auto;
display: block;
}
.custom-content{
margin: 20px;
}
.drop-list{
margin-left: 5px;
}
.back-to-messages {
display: flex;
align-items: center;
}
.flag-y {
width: 16px;
height: auto;
}
.dot {
width: 20px;
height: auto;
}
.header-notes {
align-items: center;
padding-left: 25px;
padding-right: 15px;
padding-top: 20px;
padding-bottom: 15px;
font-size: 30px;
font-weight: bold;
}
.drop-item{
background: rgb(28 28 30);
padding-top: 12px;
border-radius: 13px;
padding-bottom: 10px;
padding-left: 30px;
margin-top: 10px;
margin-bottom: 4px;
}
.custom-sidebar h2{
font-size: 19px;
margin-left: 4px;
margin-top: 28px;
}
.custom-notes-footer {
position: absolute;
bottom: -9px;
width: 102%;
height: 54px;
background: rgb(39 39 37);
padding: 10px;
text-align: center;
margin-left: -30px;
}
li.cellular {
display: block;
}
.navbar__right .wifi {
right: 48px;
}
.navbar__right .battery{
margin-right: -25px;
}
.user-dropdown{
background: #00000054 !important;
border: 1px solid rgb(89 89 89) !important;
}
}
@media screen and (min-width: 700px) {
.grid-container {
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(1, 1fr);
}
.grid-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-top: 60px;
overflow: visible;
transition: transform 0.3sease, box-shadow 0.3sease;
}
.grid-item p {
font-size: 13px;
color: #a4a4a4;
}
.container {
display: none;
}
.chat-container{
display: none;
}
}
@media (max-width: 768px) {
.info-container {
flex-direction: column;
}
.product-info2, .shipping-info {
width: 100%;
}
.product-item {
flex-direction: column;
align-items: flex-start;
align-items: center;
text-align: center;
}
.product-image2 {
width: 70%;
height: auto;
margin-bottom: 10px;
object-fit: contain;
}
.modal-content-pay {
padding: 15px;
font-size: 14px;
}
.modal-content-pay button {
width: 100%;
font-size: 15px;
}
.scrollable-product-list {
max-height: 250px !important;
}
.terms-container {
text-align: center;
margin-top: 20px;
}
}



.Parent__content--typing::-webkit-scrollbar {
width: 15px;
}
.Parent__content--typing::-webkit-scrollbar-button {
display: none;
}
.Parent__content--typing::-webkit-scrollbar-track {
background: transparent;
}
.Parent__content--typing::-webkit-scrollbar-thumb {
background: gray;
border-radius: 10px;
}
.Parent__content--typing {
scrollbar-color: gray transparent;
scrollbar-width: thin;
}
.content__typing {
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
resize: none;
display: none;
color: var(--color-black);
font-weight: 900;
font-size: 18px;
font-family: "Raleway", sans-serif;
padding: 16px;
}
.content__sidebar {
width: 31%;
height: 100%;
background: #303130;
backdrop-filter: blur(1rem);
border-right: 1px solid #000;
padding-bottom: 10px;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
.content__sidebar::-webkit-scrollbar {
display: none;
}
.note{
min-width: 65% !important;
}
.content__sidebar--notes {
width: 100%;
height: 100%;
background-color: transparent;
margin-bottom: 16px;
}
.content__sidebar--notes input {
width: 85%;
padding-left: 10px;
height: 10%;
font-family: "SF Pro Display", sans-serif;
font-size: 18px;
outline: none;
color: var(--color-black);
transition: all 0.2s;
border-radius: 4px;
margin: 10px auto;
font-weight: 100;
display: block;
transition: 0.3s;
}
.content__sidebar--notes input:hover {
background-color: rgba(0, 0, 0, 0.336);
}
.content__sidebar--notes input::placeholder {
color: white;
}
.num_drop{
color: white;
margin-left: 11px;
font-weight: bolder;
font-size: 13px;
margin-top: 14px;
}
.drop-container{
background: #3d3f3d;
margin: 10px;
margin-top: 5px;
margin-left: 10px;
margin-right: 10px;
border-radius: 10px;
padding: 10px;
}
.drop-container h1{
font-size: 13px;
font-weight: bolder;
color: white;
}
.drop-container p{
font-size: 12px;
color: #d3d3d3;
}
.nav-icon-wrapper {
align-items: center;
margin-left: 32px;
display: flex;
}
.notes-icon {
object-fit: scale-down;
height: 50%;
margin-right: 10px;
}
.nav-icon-wrapper._2 {
flex: 1;
justify-content: space-between;
width: 65%;
}
img {
vertical-align: middle;
}
.notes-search {
border: 1px solid #616161;
border-radius: 5px;
width: 175px;
height: 19px;
}
.notes-icon.trash {
margin-left: 45px;
}
.owners-title {
color: #ffbf00;
font-weight: bold;
font-size: 14px;
text-decoration: underline;
}
.owner-name {
display: inline;
font-size: 14px;
}
.owner-num-item{
font-size: 14px;
display: inline;
}
.owners-columns {
display: flex;
justify-content: space-between;
}
.owner-column {
flex: 1;
min-width: 200px;
}
.owner-container {
border: 1px none;
}
.spotlight_serach {
width: 400px;
height: 50px;
display: flex;
align-items: center;
position: absolute;
top: 30%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border: 1px solid var(--color-white-100);
justify-content: start;
border-radius: 8px;
background-color: #0000005c;
backdrop-filter: blur(10px);
z-index: 10;
box-shadow: 0 10px 10px rgba(37, 37, 37, 0.137);
}
.spotlight_serach svg {
margin-left: 10px;
}
.spotlight_serach input {
width: 90%;
font-size: 20px;
font-weight: 100;
font-family: SF Pro Display;
margin-left: 10px;
padding-right: 10px;
color: #ffffff94;
}
.spotlight_serach input::placeholder {
color: white;
}
.searchbox {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.searchbox .searchContainer {
height: 30px;
width: 220px;
display: flex;
align-items: center;
justify-content: space-evenly;
border-top: 1px solid rgba(255, 255, 255, 0.582);
border-bottom: 1px solid rgba(255, 255, 255, 0.582);
border-right: 1px solid rgba(255, 255, 255, 0.219);
border-left: 1px solid rgba(255, 255, 255, 0.219);
border-radius: 4px;
padding: 0 3px;
}
.searchbox .searchContainer svg {
fill: #fff;
}
.searchbox input {
text-align: center;
color: #fff;
font-size: 17px;
height: 100%;
font-family: "Roboto", sans-serif;
}
.searchbox input::placeholder {
color: #fff;
font-weight: 100;
}
.searchbox input:focus {
text-align: left;
}
.Apps-container {
width: 90%;
height: 60%;
margin: 0 auto;
display: grid;
grid-row-gap: 10px;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 25% 25% 25% 25%;
}
.launchpad .child-launchpad {
display: flex;
place-items: center;
flex-direction: column;
cursor: url(https://mhmdmhd6.github.io/cursor/Link.cur), pointer;
}
.launchpad .child-launchpad img {
width: 80px;
}
.mail-list {
width: 30%;
background: #222;
padding: 10px;
overflow-y: auto;
}
.mail-list-item {
padding: 10px;
background: #333;
margin-bottom: 5px;
border-radius: 5px;
cursor: pointer;
}
.mail-list-item.selected {
background: #555;
}
.mail-content {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background: #111;
}
.mail-content img {
max-width: 100%;
border-radius: 5px;
}
.send-mail-div {
display: none;
position: absolute;
width: 350px;
background: #222;
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.send-mail-div input,
.send-mail-div textarea {
width: 100%;
margin-bottom: 10px;
padding: 8px;
border-radius: 5px;
border: 1px solid #444;
background: #333;
color: white;
}
.send-mail-div .submit-button {
background: #1e90ff;
color: white;
border: none;
padding: 8px;
cursor: pointer;
width: 100%;
border-radius: 5px;
}
.send-mail-div .submit-button:hover {
background: #0073e6;
}
.send-mail-div {
display: none;
position: fixed;
width: 350px;
background: #222;
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
.send-mail-div.active {
display: block;
}
.close-modal {
position: absolute;
top: 10px;
right: 10px;
background: red;
color: white;
border: none;
padding: 5px;
cursor: pointer;
border-radius: 5px;
}
.send-button {
display: flex;
justify-content: center;
}
.submit-button {
background: #1e90ff;
color: white;
border: none;
padding: 10px;
cursor: pointer;
width: 100%;
border-radius: 5px;
font-size: 16px;
}
.submit-button:hover {
background: #0073e6;
}
@media screen and (min-width: 1200px) {
.launchpad .Apps-container {
grid-row-gap: 20px;
}
.launchpad .child-launchpad img {
width: 80px;
}
.launchpad .child-launchpad strong {
font-size: 18px;
}
}
.launchpad .child-launchpad:active {
animation: vibrate 0.1s ease-in forwards infinite alternate;
transition: transform 0.1s cubic-bezier(0.42, 0, 1, 0.2);
}
.launchpad .child-launchpad strong {
color: #fff;
}
::-webkit-scrollbar {
background-color: transparent;
width: 16px;
}
::-webkit-scrollbar-track {
background-color: #ffffff00;
}
::-webkit-scrollbar-thumb {
background-color: #babac0;
border-radius: 16px;
}
::-webkit-scrollbar-button {
display: none;
}
@keyframes zoom-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes to-top-bottom {
0% {
transform: translate(0);
}
25% {
transform: translateY(-12px);
}
50% {
transform: translateY(-3px);
}
75% {
transform: translateY(-21px);
}
100% {
transform: translateY(0px);
}
}
@keyframes vibrate {
0% {
transform: rotate(9deg);
}
100% {
transform: rotate(-9deg);
}
}
@keyframes top-to-bottom {
0% {
transform: translateY(-60px);
opacity: 0;
}
100% {
transform: none;
opacity: 1;
}
}
@keyframes opacity {
0% {
opacity: 0;
transform: scale(1.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.calculator {
border-radius: inherit;
display: none;
width: 17rem;
max-width: 100%;
height: 25rem;
max-height: 80%;
box-shadow: 0px 89px 225px -9px rgba(0,0,0,0.82);
background: var(--color-black-500);
backdrop-filter: blur(1rem);
border-radius: 1rem;
border: 1px solid var(--color-white-200);
animation: zoom-out 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.calculator__top {
width: 100%;
height: 30%;
display: flex;
flex-direction: column;
}
.calculator__top--taskabr {
height: 40px;
padding: 0 2px;
display: flex;
align-items: center;
}
.calculator__top--taskabr button {
position: relative;
width: 1px;
height: 1px;
padding: 8px;
border-radius: 50%;
margin-left: 8px;
transition: 0.4s;
display: flex;
align-items: center;
justify-content: center;
}
.calculator__top--taskabr button:nth-child(1) {
background-color: #ff6059;
}
.calculator__top--taskabr button:nth-child(1):hover {
background-color: #fc3c32;
}
.calculator__top--taskabr button:nth-child(2) {
background-color: #ffbd2e;
}
.calculator__top--taskabr button:nth-child(2):hover {
background-color: #ffa600;
}
.calculator__top--taskabr button:nth-child(3) {
background-color: #28c941;
}
.calculator__top--taskabr button:nth-child(3):hover {
background-color: #12aa29;
}
.calculator__top--taskabr button::after {
display: block;
font-size: 14px;
color: transparent;
font-weight: 900;
position: absolute;
}
.calculator__top--taskabr button:nth-child(1)::after {
content: "×";
}
.calculator__top--taskabr button:nth-child(2)::after {
content: "−";
}
.calculator__top--taskabr button:nth-child(3)::after {
content: "⤡";
}
.calculator__top--output {
flex: 1;
color: var(--color-white);
font-size: 2rem;
text-align: right;
font-family: "SF Pro Display";
border: none;
background: transparent;
padding: 0 0.8rem;
}
.input {
width: 100%;
height: 70%;
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
.input .button {
width: 100%;
height: 100%;
font-size: 1.8rem;
font-family: "Montserrat";
font-weight: bold;
border: 1px solid rgba(95, 95, 95, 0.336);
}
.r-radius {
border-bottom-right-radius: 15px;
}
.large {
grid-column-start: span 2;
border-bottom-left-radius: 15px;
}
.operator {
background-color: #fd9e2a;
color: #fff;
}
.number {
background-color: #d6d6d6;
color: rgb(0, 0, 0);
}
.operator-2 {
background-color: #ccc9c9;
color: rgb(0, 0, 0);
}
.context-menu {
max-height: 0;
position: absolute;
border-radius: 7px;
text-align: center;
background: rgba(255, 255, 255, 0.219);
border: 1px solid rgba(255, 255, 255, 0.281);
overflow: hidden;
backdrop-filter: blur(15px);
}
.context-menu ul {
padding: 0;
margin: 0;
min-width: 250px;
list-style: none;
}
.context-menu ul li {
margin: 4px 0;
border-bottom: 1px solid rgba(65, 64, 64, 0.288);
}
.context-menu ul li:last-child {
border: none;
}
.context-menu ul li button {
color: var(--color-white);
width: 100%;
height: 100%;
text-align: left;
font-size: 15px;
font-family: "SF Pro Display", sans-serif;
border-radius: 5px;
padding: 4px 8px;
transition: 80ms;
font-weight: 300;
margin: 0 0 4px 0;
display: flex;
flex-direction: row;
cursor: pointer;
}
.context-menu ul button:hover {
background: var(--color-blue-800);
}
.widgets-panel {
position: fixed;
top: 42px;
right: 10px;
transform: translateX(115%);
transition: all 0.3s cubic-bezier(0.79, 0.14, 0.15, 0.86);
backdrop-filter: blur(1rem);
border: 1px solid var(--color-white-200);
border-radius: 16px;
overflow: hidden;
}
.widgets-panel.open {
transform: translateX(0);
}
.widgets-panel__calendar {
background: #00000036;
padding: 16px;
min-width: 160px;
}
.widgets-panel #taghvim {
display: flex;
align-items: center;
justify-content: center;
}
.widgets-panel__calendar h4 {
color: #ffffff;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
margin-left: 8px;
margin-bottom: -10px;
}
.widgets-panel__calendar h2 {
color: #ffffff;
font-size: 45px;
font-weight: 300;
}
.widgets-panel__calendar li {
position: relative;
padding: 4px 10px;
font-size: 15px;
border-radius: 4px;
margin-left: 8px;
margin: 8px 0;
}
.widgets-panel__calendar li::before {
content: "";
width: 8px;
height: calc(100% - 2px);
position: absolute;
border-radius: 99px;
top: 2px;
left: -12px;
}
.widgets-panel__calendar li.blue {
color: #34aadc;
background: #283646;
}
.widgets-panel__calendar li.blue::before {
background: #34aadc;
}
.widgets-panel__calendar li.green {
color: #32d74b;
background: #2d402e;
}
.widgets-panel__calendar li.green::before {
background: #32d74b;
}
.widgets-panel__calendar li.purple {
color: #9c5ffd;
background: #422948;
}
.widgets-panel__calendar li.purple::before {
background: #7a3edb;
}
.widgets-panel__calendar li span {
display: block;
}
.widgets-panel__calendar li span:first-child {
font-weight: bold;
}

@media screen and (max-width: 600px) {
.navbar2 .vangartt a {
font-size: 115%;
font-weight: bold;
}
.navbar2 .leftLi.logo img {
margin-top: -6px;
}
.navbar{
display: none;
}
.navbar2 {
width: 97% !important;
background-color: transparent;
backdrop-filter: none;
}
.vangartt{
font-size: 15px !important;
}
.navbar2 .leftLi{
padding-right: 0px !important;
}
.grid-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
margin-top: 0px;
margin-left: 0px;
overflow: visible;
transition: transform 0.3sease, box-shadow 0.3sease;
}
.grid-item p {
font-size: 15px;
color: #fff;
}
.dock,
.open_Search,
.help-tab,
.top-left-icon,
.help{
display: none !important;
}
.icon-leftLi {
content: url('../icon2.webp');
margin-right: -8px;
}
.navbar .leftLi {
padding-bottom: 4px;
padding-left: 8px;
padding-right: 0px;
padding-top: 4px;
}
.vangartt{
display: 1 !important;
}
.hide-on-mobile {
display: none;
}
.navbar__right .clock {
display: none;
}
.navbar__right .wifi {
right: 45px;
}
.grid-container{
display: none !important;
}
.navbar{
background-color: transparent;
backdrop-filter: none;
}
.logo{
margin-left: 24px !important;
}
body{
background: black;
}
.battery__text{
display: none !important;
}
.container {
display: flex;
}
.container {
margin: auto;
height: 100vh;
flex-direction: column;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 0px;
font-size: 15px;
color: #0063f7;
}
.header2 {
border-bottom: 1px solid #222;
align-items: center;
padding-left: 15px;
padding-right: 15px;
padding-top: 9px;
padding-bottom: 15px;
font-size: 30px;
font-weight: bold;
}
.header3 {
align-items: center;
padding-top: 4px;
padding-left: 15px;
padding-right: 15px;
font-size: 10px;
}
.flag{
width: 7px;
margin-right: 3px;
margin-left: -7px;
}
.navbar {
width: 97% !important;
}
.flag4{
width: 22px;
margin-left: -4px;
}
.icon-contact{
background-color: #9499ad;
width: 35px;
height: 35px;
border-radius: 25px;
padding: 7px;
justify-items: center;
display: flex;
justify-content: center;
align-items: center;
}
.icon-contact-name{
font-size: 24px;
color: #ffffff;
font-weight: 100;
margin-top: 2px;
}
.contact-name{
font-size: 10px;
color: #ffffff;
font-weight: 100;
}
.write{
width: 20px;
}
.message-list {
flex-grow: 1;
overflow-y: auto;
display: block;
}
.message {
display: flex;
align-items: center;
padding-bottom: 12px;
padding-right: 12px;
padding-left: 12px;
border-bottom: 1px solid #222;
cursor: pointer;
width: -webkit-fill-available;
margin-right: 15px;
}
.message img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 11px;
margin-left: 10px;
margin-top: 8px;
}
.message-content {
flex-grow: 1;
}
.message-title {
font-weight: 500;
font-size: 16px;
}
.message-preview {
font-size: 14px;
margin-top: 3px;
color: #888;
}
.message-time {
font-size: 12px;
color: #555;
}
.chat-container {
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
flex-direction: column;
}
.chat-message-user2 {
font-size: 14px;
border-radius: 1.15rem;
line-height: 1.25;
max-width: 88%;
padding: 0.5rem 0.875rem;
position: relative;
word-wrap: break-word;
align-self: flex-start;
background-color: #1b1b1b;
color: #fff;
margin-bottom: 5px;
margin-right: 10px;
width: fit-content;
}
.chat-message-user2::before,
.chat-message-user2::after {
bottom: -0.1rem;
content: "";
height: 1rem;
position: absolute;
}
.chat-message-user2:not(.imgchatproduct)::before {
border-right: 1rem solid #1b1b1b;
border-bottom-right-radius: 0.8rem 0.7rem;
left: -0.35rem;
transform: translate(0, -0.1rem);
}
.chat-message-user2:not(.imgchatproduct)::after {
background-color: #000;
border-bottom-right-radius: 0.5rem;
left: 20px;
transform: translate(-30px, -2px);
width: 10px;
}
.mensaje-producto h1{
font-size: 15px;
font-weight: bold;
}
.mensaje-producto h2{
font-size: 15px;
font-weight: bold;
}
.mensaje-producto img{
width: 250px;
}
.chat-message-user {
font-size: 14px;
border-radius: 1.15rem;
line-height: 1.25;
max-width: 75%;
padding: 0.5rem 0.875rem;
position: relative;
word-wrap: break-word;
align-self: flex-end;
background-color: #248bf5;
color: #fff;
margin-bottom: 5px;
margin-top: 5px;
width: fit-content;
}
.chat-message-user::before,
.chat-message-user::after {
bottom: -0.1rem;
content: "";
height: 1rem;
position: absolute;
}
.chat-message-user::before {
border-bottom-left-radius: 0.8rem 0.7rem;
border-right: 1rem solid #248bf5;
right: -0.35rem;
transform: translate(0, -0.1rem);
}
.chat-message-user::after {
background-color: #000;
border-bottom-left-radius: 0.5rem;
right: -40px;
transform: translate(-30px, -2px);
width: 10px;
}
.imagen-frontal, .imagen-trasera {
transition: opacity 1s ease-in-out;
}
.producto-imagen {
margin-left: 15px;
width: 100%;
max-width: 250px;
height: auto;
object-fit: cover;
}
.imgchatproduct {
background-color: transparent !important;
}
.mensaje-detalles {
margin-left: 120px;
}
.mensaje-producto-img{
margin-left: -27px;
margin-bottom: -12px;
}
.mensaje-producto{
padding: 0.5rem 0.875rem;
margin-bottom: 5px;
margin-right: 10px;
}
.more{
width: 39px;
height: 35px;
margin-right: 9px;
background-color: #212121;
color: #969696;
}
.send{
width: 35px;
height: 35px;
background-color: #007AFF;
color: #ffffff;
width: 30px;
margin: 2px;
height: 30px;
}
.chat-header {
flex-shrink: 0;
padding-top: 30px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 8px;
font-size: 20px;
font-weight: bold;
display: flex;
align-items: center;
background-color: #2121218f;
border-bottom: 1px solid #232323;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
margin-top: -35px;
}
.chat-body {
height: 74%;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.chat-messages::-webkit-scrollbar {
width: 8px;
}
.chat-messages::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 10px;
}
.chat-messages::-webkit-scrollbar-track {
background: transparent;
}
.chat-header > div:first-child {
position: absolute;
top: 24px;
left: 0;
padding: 5px;
font-size: 9px;
background-color: transparent;
border-radius: 25px;
margin: 15px;
}
.chat-header > div:nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
height: 7px;
top: 31px;
left: 22px;
padding: 5px;
font-size: 9px;
background-color: #007aff;
border-radius: 25px;
margin: 15px;
}
.contact {
margin-top: 10px;
}
.enviar{
width: 15px !important;
height: auto !important;
margin-right: -1px !important;
margin-left: auto !important;
margin-top: -5px !important;
}
.chat-messages {
flex-grow: 1;
overflow-y: auto;
padding: 15px;
overflow-y: auto;
align-items: flex-start;
display: flex;
flex-direction: column;
}
.chat-input .message{
border: 1px solid #222;
border-radius: 20px;
padding: 2px;
}
.chat-input {
display: flex;
padding: 10px;
align-items: center;
flex-shrink: 0;
}
.chat-input input {
flex-grow: 1;
border: none;
font-size: 16px;
padding: 5px;
color: white;
}
.chat-input button {
margin-left: 10px;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 24px;
font-weight: 100;
}
body {
background-color: #000;
color: white;
margin: 0;
padding: 0;
}
.navbar li {
font-size: 15px;
}
}


.cart-modal{
display: none;
}
.circle4 img {
display: none;
}
.custom-notes-modal{
display: none;
}
.owner-modal{
display: none;
}

.grid-container {
padding: 25px;
display: grid;
width: 95%;
height: 10vh;
}
.grid-item img {
max-width: 95%;
filter: drop-shadow(4px 4px 10px #220000);
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.grid-item p {
font-size: 13px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.grid-item a {
text-decoration: none;
color: inherit;
}
.grid-item.grow {
text-decoration: none;
color: inherit;
}
.login-modal.hidden { display: none!important; }
.login-modal {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.3s ease-in-out;
z-index: 11;
}
.login-modal-content {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0);
border-radius: 15px;
text-align: center;
animation: loginFadeIn 0.3s ease-in-out;
position: relative;
color: #fff;
margin-top: 20px;
}
.login-user-icon {
margin-top: 50px;
width: 200px;
margin-bottom: 20px;
border-radius: 125px;
}
.login-toggle-form{
font-size: 15px;
}
.login-input {
margin-top: 10px;
font-size: 15px;
padding: 12px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 25px;
outline: none;
border: none;
display: block;
margin-bottom: 8px;
margin-left: auto;
margin-right: auto;
width: 200px;
color: white;
transition: transform 0.3s ease-in-out;
}
.login-input:hover {
transform: scale(1.03);
transition: transform 0.3s ease-in-out;
}
.login-password {
margin-top: 10px;
font-size: 15px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 25px;
outline: none;
border: none;
display: block;
margin-bottom: 8px;
margin-left: auto;
margin-right: auto;
width: 207px;
display: flex;
width: 224px;
transition: transform 0.3s ease-in-out;
}
.login-password:hover {
transform: scale(1.03);
transition: transform 0.3s ease-in-out;
}
.login-flecha{
width: 14px;
}
.login-input-password {
font-size: 15px;
padding: 4px;
border-radius: 25px;
border: none;
margin-left: 11px;
width: 163px;
color: white;
}
.btnlogin {
background-color: transparent;
border-radius: 25px;
border: solid 2px #676666;
padding: 11px;
margin: 2px;
margin-right: -7px;
width: 35px;
height: 35px;
margin: 3px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s ease-in-out;
margin-left: auto;
margin-right: auto;
}
.btnlogin:hover .login-flecha {
transform: scale(1.2);
transition: transform 0.3s ease-in-out;
}
.login-input::placeholder,
.login-input-password::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.login-close-btn {
position: absolute;
top: 50px;
right: 25px;
font-size: 47px;
cursor: pointer;
transition: transform 0.3s ease-in-out;
z-index: 1;
}
.login-close-btn:hover {
transform: scale(1.2);
transition: transform 0.3s ease-in-out;
}
.login-form-input {
margin-top: 10px;
font-size: 15px;
padding: 12px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 25px;
outline: none;
border: none;
display: block;
margin-bottom: 8px;
margin-left: auto;
margin-right: auto;
width: 400px;
color: white;
transition: transform 0.3s ease-in-out;
}
.login-form-input:hover {
transform: scale(1.03);
transition: transform 0.3s ease-in-out;
}
.login-form button {
padding: 10px;
background: rgb(255 255 255 / 3%);
color: white;
border-radius: 25px;
cursor: pointer;
transition: background 0.3s;
font-size: 18px;
margin-left: auto;
margin-right: auto;
}
.login-form button:hover { background: #919191; }
.login-toggle-form span {
color: #9e9e9e;
cursor: pointer;
}
.oculto {
display: none !important;
}
.login-form {
transform: scale(0.9);
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
position: absolute;
width: 100%;
}
.login-form.active {
opacity: 1;
transform: scale(1);
}
@keyframes loginFadeIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
.success-animation {
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #d5d5d5;
margin-top: 10px;
opacity: 0;
transform: scale(0.5);
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.success-animation.show {
opacity: 1;
transform: scale(1);
}
.check-icon {
font-size: 30px;
color: #d5d5d5;
margin-right: 10px;
}
.address-modal.hidden {
display: none!important;
}
.address-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.3s ease-in-out;
z-index: 11;
}
.address-modal-content {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0);
border-radius: 15px;
text-align: center;
animation: addressFadeIn 0.3s ease-in-out;
position: relative;
color: #fff;
margin-top: 20px;
}
.address-user-icon {
margin-top: 150px;
width: 200px;
margin-bottom: 20px;
border-radius: 125px;
}
.address-toggle-form{
font-size: 15px;
}
.address-input {
margin-top: 10px;
font-size: 15px;
padding: 12px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 25px;
outline: none;
border: none;
display: block;
margin-bottom: 8px;
margin-left: auto;
margin-right: auto;
width: 200px;
color: white;
transition: transform 0.3s ease-in-out;
}
.address-input:hover {
transform: scale(1.03);
transition: transform 0.3s ease-in-out;
}
.address-password {
margin-top: 10px;
font-size: 15px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 25px;
outline: none;
border: none;
display: block;
margin-bottom: 8px;
margin-left: auto;
margin-right: auto;
width: 207px;
display: flex;
width: 224px;
transition: transform 0.3s ease-in-out;
}
.address-password:hover {
transform: scale(1.03);
transition: transform 0.3s ease-in-out;
}
.address-flecha{
width: 14px;
}
.address-input-password {
font-size: 15px;
padding: 4px;
border-radius: 25px;
border: none;
margin-left: 11px;
width: 163px;
color: white;
}
.btnaddress {
background-color: transparent;
border-radius: 25px;
border: solid 2px #676666;
padding: 11px;
margin: 2px;
margin-right: -7px;
width: 35px;
height: 35px;
margin: 3px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s ease-in-out;
margin-left: auto;
margin-right: auto;
}
.btnaddress:hover .address-flecha {
transform: scale(1.2);
transition: transform 0.3s ease-in-out;
}
.address-input::placeholder,
.address-input-password::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.address-close-btn {
position: absolute;
top: 50px;
right: 25px;
font-size: 47px;
cursor: pointer;
transition: transform 0.3s ease-in-out;
z-index: 1;
}
.address-close-btn:hover {
transform: scale(1.2);
transition: transform 0.3s ease-in-out;
}
.address-form-input {
margin-top: 10px;
font-size: 15px;
border-radius: 25px;
outline: none;
border: none;
display: block;
margin-bottom: 8px;
margin-left: auto;
margin-right: auto;
width: 400px;
color: white;
transition: transform 0.3s ease-in-out;
}
.address-form-input:hover {
transform: scale(1.03);
transition: transform 0.3s ease-in-out;
}
.address-form h2{
margin-bottom: 30px;
margin-top: 60px;
}
.address-form button {
font-family: 'SF Pro Display', sans-serif;
padding: 10px;
color: white;
border-radius: 25px;
cursor: pointer;
transition: background 0.3s;
font-size: 18px;
margin-left: auto;
margin-right: auto;
font-weight: bolder;
transition: transform 0.3s ease-in-out;
}
.address-form button:hover {
color: #686868;
font-size: 22px;
transition: transform 0.3s ease-in-out;
}
.address-toggle-form span {
color: #9e9e9e;
cursor: pointer;
}
.oculto {
display: none !important;
}
.address-form {
transform: scale(0.9);
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
position: absolute;
width: 100%;
}
.address-form.active {
opacity: 1;
transform: scale(1);
}
@keyframes addressFadeIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
.success-animation {
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #d5d5d5;
margin-top: 10px;
opacity: 0;
transform: scale(0.5);
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.success-animation.show {
opacity: 1;
transform: scale(1);
}
.check-icon {
font-size: 30px;
color: #d5d5d5;
margin-right: 10px;
}
.address-input-check {
width: 25px;
height: 25px;
border-radius: 12px;
background-color: transparent;
border: 2px solid #676666;
cursor: pointer;
transition: all 0.3s ease;
}
.address-input:checked {
background-color: #272727;
border-color: #1a1a1a;
}
.checkbox-label {
font-size: 16px;
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
justify-content: center;
margin-top: 5px;
}
.checkbox-label input {
margin-left: 10px;
}
.modal-pay {
display: block;
align-content: center;
align-items: center;
justify-items: center;
}
#paymentModal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
backdrop-filter: blur(10px);
}
.modal-content-pay {
position: relative;
background: none;
padding: 30px;
width: 80%;
max-width: 800px;
border-radius: 10px;
color: #ffffff;
overflow-y: auto;
max-height: 90vh;
}
.close2 {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
color: #808080;
}
.info-container {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.checkbox-container {
  display: flex;
  align-items: center; /* Centrado vertical */
  gap: 15px; /* Espacio entre checkbox y label */
  margin: 10px 0; /* Espaciado vertical opcional */
}

.checkbox-grande {
  transform: scale(2); /* Tamaño aumentado */
  transform-origin: center;
  cursor: pointer;
}
.product-info2, .shipping-info {
width: auto;
}
.scrollable-product-list {
max-height: 300px;
overflow-y: auto;
padding-right: 10px;
margin-bottom: 20px;
border-radius: 8px;
}
.product-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.product-image2 {
width: 150px;
height: 150px;
object-fit: contain;
margin-right: 10px;
filter: drop-shadow(0px 14px 11px #220000);
}
#paypal-button-container, #mercado-pago-button {
display: flex;
justify-content: center;
margin-top: 20px;
}
.modal-content-pay button {
padding: 10px 20px;
font-size: 16px;
background-color: #2d2d2d;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.modal-content-pay button:hover {
background-color: #218838;
}
.paypal-button.paypal-button-color-gold, .paypal-button-row.paypal-button-color-gold .menu-button {
background: #ffffff !important;
}
a {
text-decoration: none;
color: white;
}
#loadingScreen {
position: fixed;
bottom: 0px;
width: 100%;
height: 28%;
background: black;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
#progressBarContainer {
position: absolute;
width: 60%;
max-width: 300px;
height: 10px;
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
overflow: hidden;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
z-index: 22;
}
#progressBar {
width: 0%;
height: 100%;
background: #5a0011;
transition: width 3s ease-in-out;
}
#owners-list2 {
display: block !important;
visibility: visible !important;
color: black;
}
.modal-header {
align-items: center;
justify-content: space-between;
padding: 12px 16px;
display: flex;
align-items: center;
}
.back-icon {
height: 20px;
}
.title2 {
font-size: 18px;
font-weight: 100;
margin-right: 100px;
color: rgb(221 180 10);
}
.options-icon {
height: 38px;
margin-right: 0;
}
.owners-content {
flex-grow: 1;
overflow-y: auto;
padding: 20px 16px -2px;
max-height: 550px;
}
.owners-title2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
color: rgb(255, 255, 255);
}
.num-item-multiple-digits {
margin-left: -7px;
}
.owners-list2 {
max-height: 550px;
padding-left: 10px;
}
.owners-list2 .owner-container2 {
display: flex;
gap: 5px;
margin-bottom: 8px;
align-items: center;
}
.owner-container2 .owner-name2 {
color: #ffffff;
margin-left: 10px;
font-size: 18px;
}
.owner-container .owner-number {
color: rgb(221 180 10);
font-size: 16px;
}
.modal-footer {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 10;
}
.owner-num-item2{
color: rgb(221 180 10);
font-size: 18px;
display: inline;
font-weight: 100;
}
.bar-bottom {
width: 100%;
display: block;
margin-bottom: 35px;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
    opacity: 1;
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.animated-message {
  animation: slideInLeft 0.4s ease-out;
}

.animated-image {
  animation: bounceIn 0.6s ease-out;
}