@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans+Expanded:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
  --pink: rgb(255, 121, 224);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Zalando Sans Expanded', sans-serif;
}

body {
  background: #fff;
}


.app {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
}


header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 25px;
  background: #111;
  color: white;
  position: sticky;
  top: 0;
  z-index: 1000;
}


.menu {
  position: fixed;
  right: 0;
  top: 0;
  width: 250px;
  height: 100vh;
  background: white;
  transform: translateX(100%);
  transition: 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu.active {
  transform: translateX(0);
}

.menu ul {
  list-style: none;
}

.menu a {
  text-decoration: none;
  font-size: 20px;
  color: black;
}

.menu ul li:hover {
   color: var(--pink);
    transform: scale(1.1);
    transition: 0.2s ease;
}


main {
  display: grid;
  grid-template-columns: 300px 1fr;
  padding: 40px;
  gap: 40px;
}


.tools {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}


.palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}


.palette .color:nth-child(1) { background: #EED582; }
.palette .color:nth-child(2) { background: #F099C3; }
.palette .color:nth-child(3) { background: #F04600; }
.palette .color:nth-child(4) { background: #F53B66; }
.palette .color:nth-child(5) { background: #F50CCE; }
.palette .color:nth-child(6) { background: #F50BED; }
.palette .color:nth-child(7) { background: #B700F0; }
.palette .color:nth-child(8) { background: #8E43F0; }
.palette .color:nth-child(9) { background: #6329F0; }
.palette .color:nth-child(10) { background: #0055F5; }
.palette .color:nth-child(11) { background: #38B8F5; }
.palette .color:nth-child(12) { background: #29EFF0; }
.palette .color:nth-child(13) { background: #00F0CC; }
.palette .color:nth-child(14) { background: #35F0B3; }
.palette .color:nth-child(15) { background: #18F561; }
.palette .color:nth-child(16) { background: #00F044; }
.palette .color:nth-child(17) { background: #A4F000; }
.palette .color:nth-child(18) { background: #749B34; }
.palette .color:nth-child(19) { background: #9B8A34; }
.palette .color:nth-child(20) { background: #F0C800; }
.palette .color:nth-child(21) { background: #F09700; }
.palette .color:nth-child(22) { background: #615101; }
.palette .color:nth-child(23) { background: #F0C76D; }
.palette .color:nth-child(24) { background: #111; }
.palette .color:nth-child(25) { background: #fff; }

.color {
  width: 40px;
  height: 40px;
  border: 2px solid #222;
  cursor: pointer;
}

.color:hover {
  transform: scale(1.1);
  border-color: rgb(255, 121, 224);
}


.buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

button {
  background: var(--pink);
  color: white;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-family: monospace;
  transition: 0.2s;
}

button:hover {
  transform: translateY(-2px);
  background: #111;
}


.canvas-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  width: 500px;
  height: 500px;
}

.cell {
  border: 1px solid var(--pink);
}


#loadingScreen { position: fixed; top:0; left:0; width:100vw; height:100vh; background-color:black; display:flex; flex-direction:column; justify-content:center; align-items:center; cursor:pointer; z-index:9999; } #animationWrapper { width: 50px; height: 50px; background-image: url('../images/frames.png'); background-repeat: no-repeat; background-size: 400px 50px; image-rendering: pixelated; animation: playFrames .8s steps(8, jump-none) infinite; /* 8 frames */ transform: scale(4); /* optional for bigger display */ transform-origin: center; } @keyframes playFrames { from { background-position: 0% 0%; } to { background-position: 100% 0%; } } /* Optional: Loading text animation */ #loadingScreen p { color: white; position: absolute; bottom: 50px; font-family: 'Zalando Sans Expanded', sans-serif; font-size: 16px; animation: pulse 1s infinite alternate; } @keyframes pulse { 0% { opacity: 0.3; } 100% { opacity: 1; } }


.toggle {
  width: 40px;
  height: 40px;
  background: url('../images/menu.png') center/contain no-repeat;
  cursor: pointer;
}

.toggle.active {
  background: url('../images/icone-x-rose.png') center/contain no-repeat;
}

footer {
  margin-bottom: 10px;
}