/* ============================================================ ABOUT ME — dual theme (💀 rock / 🌸 kawaii) ------------------------------------------------------------ COMO FUNCIONA O SISTEMA DE TEMAS: Os widgets NUNCA usam --pink ou --red diretamente. Eles usam variáveis semânticas (--t-*) que apontam para a paleta certa dependendo do data-theme do . Trocar de tema = trocar 1 atributo = a página inteira muda. ============================================================ */ /* ---------- PALETA ROCK (suas variáveis, intactas) ---------- */ :root { --redhigh: #ffb3b3; --red: #ff6666; --redgrad: #d62828; --redshad: #8b0000; --redshad2: #b22222; --blackhigh: #3d3d3d; --black: #2b2b2b; --blackgrad: #1f1f1f; --blackshad: #141414; --r-main: #d62828; --r-dark: #8b0000; --r-highlight: #ff6b6b50; --r-catchlight: #ffc4c4; --r-outline: #ff3b3b; /* ---------- PALETA KAWAII (suas variáveis, intactas) ---- */ --pinkhigh: #ffd8ec; --pink: #ffa8d3; --pinkgrad: #ff69b4; --pinkshad: #df009c; --pinkshad2: #ff95c1; --p-main: #ffb5d5; --p-dark: #ff8ec6; --p-highlight: #ffccdfb0; --p-catchlight: #ffe0ec; --p-outline: #ff5eae; --shadow: #00000036; } /* ---------- TEMA ROCK 💀 (padrão) ---------- */ body[data-theme="rock"] { --t-high: var(--redhigh); --t-main: var(--red); --t-grad: var(--redgrad); --t-shad: var(--redshad); --t-shad2: var(--redshad2); --t-catchlight: var(--r-catchlight); --t-outline: var(--r-outline); --t-paper: #ffffff; /* widgets claros, como no tema kawaii */ --t-paper-alt: #ffe3e3; /* fundo alternativo com tinta avermelhada */ --t-ink: #4a4a4a; /* texto principal */ --t-ink-soft: #8a8a8a; /* texto secundário */ --t-bg: #1a1a1acc; /* fundo do container */ --t-page-bg: url("bgs/bgpreto.png"); --t-box-shadow: #e9c4c4; /* sombra "chapada" clara, versão red da rosa */ --t-radius: 2px; /* rock = cantos duros */ --t-shadow: #00000066; --t-cursor: url("cursor/cursorRock.gif"); --t-cursor-pointer: url("cursor/cursorRock2.gif"); } /* ---------- TEMA KAWAII 🌸 ---------- */ body[data-theme="kawaii"] { --t-high: var(--pinkhigh); --t-main: var(--pink); --t-grad: var(--pinkgrad); --t-shad: var(--pinkshad); --t-shad2: var(--pinkshad2); --t-catchlight: var(--p-catchlight); --t-outline: var(--p-outline); --t-paper: #ffffff; --t-paper-alt: var(--p-catchlight); --t-ink: #5a5a5a; --t-ink-soft: #797979; --t-bg: #ffe9f4a6; --t-page-bg: url("bgs/background.png"); --t-box-shadow: rgb(240, 212, 222); --t-radius: 8px; /* kawaii = cantinhos redondos */ --t-shadow: #00000036; --t-cursor: url("cursor/cursor2.gif"); --t-cursor-pointer: url("cursor/cursor3.gif"); } /* ============================================================ BASE ============================================================ */ body { margin: 0; padding: 0; background: var(--t-page-bg) repeat 0 0; font-family: 'MS Gothic'; max-width: 1000px; margin-left: auto; margin-right: auto; margin-top: 20px; font-size: small; color: var(--t-ink); } /* a mágica da transição suave: tudo que pinta cor, anima */ body, #container, .widget, .widget-header, .widget-body, .mini-btn, .navButton, .fake-tab, .project-card, .mood-cell, .stat-table th, .stat-table td, .quote, .meter, .top-bar { transition: background-color 0.6s ease, border-color 0.6s ease, color 0.6s ease, box-shadow 0.6s ease, border-radius 0.6s ease; } /* acessibilidade: quem pediu menos movimento, recebe menos */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } #container { width: 1000px; border: solid var(--t-shad) 1px; border-radius: 5px; padding: 5px; box-shadow: 0px 0px 10px 0px var(--t-shad2), 0px 5px 0px 0px var(--t-shadow), inset 0px 0px 0px 2px var(--t-high); background-color: var(--t-bg); margin: 20px auto; backdrop-filter: blur(1px); } /* esconde o cursor nativo, como na home */ html, body, *, *::before, *::after { cursor: none !important; } #custom-cursor { width: 28px; height: 28px; position: fixed; pointer-events: none; z-index: 99999; background-image: var(--t-cursor); /* troca com o tema! */ background-size: contain; background-repeat: no-repeat; transform: translate(-2px, -2px); will-change: transform; } /* em cima de clicáveis, vira a mãozinha do tema */ #custom-cursor.hovering { background-image: var(--t-cursor-pointer); } body[data-theme="rock"] { /* ...variáveis existentes... */ --t-arrow: url("aboutMe/pngs/arrow2.gif"); } body[data-theme="kawaii"] { /* ...variáveis existentes... */ --t-arrow: url("aboutMe/pngs/arrow1.gif"); } /* ============================================================ TOP BAR + THEME TOGGLE ============================================================ */ .top-bar { position: relative; height: 20px; width: 992px; display: flex; align-items: center; justify-content: center; gap: 15px; padding: 5px 3px; border: 1px solid var(--t-shad); background: var(--t-main); box-shadow: inset 0px -17px 0px 0px var(--t-grad), /* metade de baixo, cor forte */ inset 0px 0px 0px 2px var(--t-main), /* anel da COR PRINCIPAL (era o erro!) */ inset 0px 2px 0px 2px var(--t-high); /* brilho de cima */ } .buttons { display: flex; align-items: center; } /* setinha de voltar, morando no canto esquerdo da top-bar */ .home-arrow { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background-image: var(--t-arrow); /* troca com o tema! */ background-size: contain; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; font-size: 0; /* esconde o "←" de texto */ filter: drop-shadow(1px 2px 2px var(--t-shadow)); transition: transform 0.2s ease, filter 0.2s ease; } .home-arrow:hover { transform: translateY(-50%) translateX(-3px); /* o aceno continua! */ } /* balãozinho que segue o cursor */ #cursor-tooltip { position: fixed; z-index: 99998; pointer-events: none; font-family: 'MS UI Gothic'; font-size: 11px; color: var(--t-shad); background: var(--t-paper); border: 1px solid var(--t-shad); border-radius: 8px 8px 8px 0; /* formato de balãozinho de fala */ padding: 2px 8px; box-shadow: 2px 2px 0px var(--t-shadow); opacity: 0; transition: opacity 0.15s ease; } #cursor-tooltip.visible { opacity: 1; } .navButton { font-family: 'Rainyhearts', 'MS UI Gothic'; font-size: 12px; letter-spacing: 0.3px; text-decoration: none; color: white; background: var(--t-main); padding: 2px 10px; text-shadow: 1px 1px var(--t-shad); margin: 0 5px; /* o 3D clássico dos seus botões */ border-top: 2.5px solid var(--t-high); border-left: 2.5px solid var(--t-high); border-right: 2.5px solid var(--t-outline); border-bottom: 2.5px solid var(--t-outline); transform: perspective(1px) translateZ(0); position: relative; overflow: hidden; /* sweep não vaza das bordas 3D */ transition: all 0.2s ease; } /* sweep to right, mantido — agora numa cor que conversa com o fundo */ .navButton:before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--t-grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s ease-out; } .navButton:hover:before { transform: scaleX(1); } /* clique afunda, como os irmãos */ .navButton:active { border: 3px inset var(--t-high); } /* botão do tema: só o gif, mas com a alma do botão antigo */ #theme-toggle { width: 26px; height: 26px; background: none; border: none; padding: 0; /* flutua no cantinho direito sem desalinhar os navButtons */ position: absolute; right: 8px; top: 50%; transform: translateY(-35%); transition: transform 0.25s ease; } /* o hover girando de volta! (girar o botão gira o gif junto) */ #theme-toggle:hover { transform: translateY(-35%) scale(1.15) rotate(15deg); } #theme-toggle:active { transform: translateY(-35%) scale(0.95); } /* os dois gifs empilhados */ .toggle-gif { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(1px 2px 2px var(--t-shadow)); opacity: 0; } /* qual aparece depende do tema (mostra o destino) */ body[data-theme="rock"] .toggle-gif-rock { opacity: 1; } body[data-theme="kawaii"] .toggle-gif-kawaii { opacity: 1; } /* a giradinha de 360° na troca de tema, igual a original */ .toggle-gif.spin { animation: iconSpin 0.5s ease; } @keyframes iconSpin { from { transform: rotate(0deg) scale(0.4); opacity: 0; } to { transform: rotate(360deg) scale(1); } } /* pulse nos gifs do toggle (mesmo ritmo do troféu, pra parecerem irmãos) */ .toggle-gif { animation: softPulse 2.4s ease-in-out infinite; } #theme-toggle:hover .toggle-gif { animation: none; /* hover do botão (cresce + inclina) assume */ } @keyframes softPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ============================================================ HEADER (modelo da home: gif + título no canto) ============================================================ */ .aboutHeader { position: relative; height: 120px; /* mesma altura do header da home */ border: solid var(--t-shad); border-radius: 5px 5px 0 0; border-width: 1px 1px 0px 1px; padding-bottom: 20px; overflow: hidden; /* título alinhado no cantinho inferior esquerdo, como na home */ display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; } /* as duas camadas de gif ocupam o header inteiro, empilhadas */ .header-layer { position: absolute; inset: 0; background-position: left bottom; background-repeat: repeat-x; transition: opacity 0.8s ease; /* o crossfade entre headers ✨ */ } /* qual camada aparece depende do tema do body */ body[data-theme="rock"] .header-rock { opacity: 1; } body[data-theme="rock"] .header-kawaii { opacity: 0; } body[data-theme="kawaii"] .header-rock { opacity: 0; } body[data-theme="kawaii"] .header-kawaii { opacity: 1; } /* faixa de stamps — carrossel infinito com DUAS camadas, uma por tema, crossfade igual ao header */ .stampBar { background: var(--t-catchlight); border: solid var(--t-catchlight); border-width: 0px 1px 1px 1px; padding: 0; margin-bottom: 12px; position: relative; /* âncora das camadas */ overflow: hidden; height: 55px; } .stampInner { position: absolute; /* as duas camadas ocupam o mesmo lugar */ top: 0; left: 0; height: 100%; display: flex; width: max-content; align-items: center; animation: scrollStamps 60s linear infinite; transition: opacity 0.8s ease; /* o crossfade ✨ */ } /* qual camada aparece depende do tema (igual ao header) */ body[data-theme="rock"] .stamps-rock { opacity: 1; } body[data-theme="rock"] .stamps-kawaii { opacity: 0; } body[data-theme="kawaii"] .stamps-rock { opacity: 0; } body[data-theme="kawaii"] .stamps-kawaii { opacity: 1; } /* hover pausa as duas */ .stampBar:hover .stampInner { animation-play-state: paused; } .stampInner span { display: flex; flex-shrink: 0; align-items: center; } .stampInner img { display: block; height: 55px; margin: 0; flex-shrink: 0; image-rendering: pixelated; border: 1px dotted var(--t-high); } @keyframes scrollStamps { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ----------- TITULO ------------- */ /* ----------- TITULO ------------- */ #title { position: relative; /* traz o título pra FRENTE dos gifs */ z-index: 1; } #title .title1 { font-family: 'Nunito'; font-size: 70px; font-weight: 900; margin: 0 0 0 10px; margin-bottom: -15%; display: inline-block; background: linear-gradient( to bottom, var(--t-catchlight) 0%, var(--t-main) 45%, var(--t-grad) 55%, var(--t-grad) 100% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0px -2px var(--t-catchlight)) drop-shadow(0px 1px var(--t-outline)) drop-shadow(1px 0px var(--t-outline)) drop-shadow(0px -1px var(--t-outline)) drop-shadow(-1px 0px var(--t-outline)) drop-shadow(0px 3px rgb(255, 255, 255)) drop-shadow(3px 0px white) drop-shadow(0px -3px white) drop-shadow(-3px 0px white) drop-shadow(0px 3px var(--t-shadow)) drop-shadow(0px 1px var(--t-shadow)); } /* ============================================================ SCRAPBOOK — layout assimétrico em colunas ============================================================ */ #scrapbook { columns: 3 300px; /* masonry caseiro: 3 colunas que fluem */ column-gap: 14px; padding: 5px; } /* ---------- WIDGET (o "molde" de todas as caixas) ---------- */ .widget { display: inline-block; /* necessário pro layout em columns */ width: 100%; box-sizing: border-box; margin-bottom: 14px; background: var(--t-paper); border: 1px solid var(--t-shad); border-radius: var(--t-radius); box-shadow: 0px 5px 0px 0px var(--t-box-shadow), inset 0px -5px 0px 0px var(--t-box-shadow); position: relative; break-inside: avoid; /* não deixa a coluna cortar o widget */ } /* rotações do scrapbook (sutis de propósito) */ .tilt-l { transform: rotate(-1.2deg); } .tilt-r { transform: rotate(1.1deg); } /* hover: endireita e levanta um tiquinho */ .widget:hover { transform: rotate(0deg) translateY(-2px); transition: transform 0.25s ease; z-index: 2; } /* widgets largos ocupam a coluna inteira igual, mas o conteúdo interno pode ser em grade */ /* .widget.wide { mantido pra você diferenciar depois se quiser } */ /* ---------- HEADER do widget ---------- */ .widget-header { padding: 0; border-bottom: 1px solid var(--t-shad); background: var(--t-main); box-shadow: inset 0px -12px 0px 0px var(--t-grad), inset 0px 0px 0px 2px var(--t-main), inset 0px 2px 0px 2px var(--t-high); color: white; font-weight: bolder; text-shadow: 1px 1px var(--t-shad), 0px 1px var(--t-shad), 1px 0px var(--t-shad), 0px -1px var(--t-shad), -1px 0px var(--t-shad), -1px -1px var(--t-shad), 1px -1px var(--t-shad), -1px 1px var(--t-shad); border-radius: var(--t-radius) var(--t-radius) 0 0; padding-top: 1px; } .widget-header p { margin: 5px; font-size: 16px; font-family: 'Rainyhearts'; } .widget-body { padding: 8px 10px; } .widget-body.centered, .centered { text-align: center; } /* ---------- DECORAÇÕES DE SCRAPBOOK ---------- */ /* fita adesiva no topo */ .widget.tape::before { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 70px; height: 16px; background: var(--t-high); opacity: 0.75; border-left: 1px dashed var(--t-shad2); border-right: 1px dashed var(--t-shad2); z-index: 3; } /* adesivos nos cantos */ .sticker-heart::after, .sticker-star::after { position: absolute; top: -10px; right: -6px; font-size: 18px; transform: rotate(15deg); z-index: 3; text-shadow: 0px 2px 2px var(--t-shadow); } .sticker-heart::after { content: "❤"; color: var(--t-grad); } .sticker-star::after { content: "★"; color: var(--t-grad); } /* papel de caderno pro tiny facts (funciona nos dois temas) */ .widget.notebook .widget-body { background-image: repeating-linear-gradient( transparent, transparent 19px, var(--t-high) 19px, var(--t-high) 20px ); line-height: 20px; } hr.scrap-divider { border: none; border-top: 1px dashed var(--t-shad2); margin: 8px 0; } /* ============================================================ COMPONENTES INTERNOS ============================================================ */ /* textinho de anotação */ .scribble { font-family: "Rainyhearts"; font-size: 10px; text-transform: uppercase; color: var(--t-shad2); margin: 6px 0 3px 0; } /* listas fofas */ .cute-list { list-style: none; padding-left: 5px; margin: 4px 0; line-height: 20px; } .cute-list li::before { content: "✦ "; color: var(--t-grad); } .cute-list.crossed li::before { content: "✗ "; } /* botão pequeno reutilizável (receita dos botões do seu player) */ .mini-btn { display: inline-block; font-family: 'MS UI Gothic'; font-size: 12px; text-decoration: none; color: white; background: var(--t-main); padding: 2px 8px; border-top: 2.5px solid var(--t-high); border-left: 2.5px solid var(--t-high); border-right: 2.5px solid var(--t-outline); border-bottom: 2.5px solid var(--t-outline); text-shadow: 1px 1px var(--t-shad); } .mini-btn:hover { filter: brightness(1.08); } .mini-btn:active { border: 3px inset var(--t-high); } .big-btn { font-size: 14px; padding: 4px 12px; } /* favoritos em grade */ .fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; margin: 0; } .fav-grid dt { font-family: "Rainyhearts"; font-size: 9px; text-transform: uppercase; color: white; background: var(--t-main); text-shadow: var(--t-shad) 1px 1px 1px; border-radius: 3px; padding: 2px 3px; width: fit-content; } .fav-grid dd { margin: 2px 0 0 0; } /* --- expansão dos favoritos longos --- */ /* estado fechado: corta em 2 linhas com reticências */ .fav-grid dd.clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* botãozinho sutil, estilo anotação de canto */ .fav-more { font-family: "Rainyhearts"; font-size: 8px; text-transform: uppercase; background: none; border: none; padding: 1px 0; margin-top: 1px; color: var(--t-shad2); text-decoration: underline dotted; } .fav-more:hover { color: var(--t-grad); } /* tabela de personalidade */ .stat-table { width: 100%; border-collapse: collapse; } .stat-table th, .stat-table td { border: 1px solid var(--t-shad2); padding: 3px 5px; text-align: left; } .stat-table th { background: var(--t-catchlight); color: var(--t-grad); font-family: 'MS UI Gothic'; } /* story corner */ .story-title { font-weight: bold; color: var(--t-grad); margin: 2px 0; } .story-preview { margin: 2px 0; color: var(--t-ink-soft); } .story-full { display: none; margin: 4px 0; } .story.open .story-full { display: block; } /* foto tripla: IRL ⇄ pixel, com a pixel acompanhando o tema */ .me-photo { position: relative; text-align: center; margin-bottom: 6px; } /* as duas versões pixel ficam empilhadas sobre a IRL */ .me-photo .me-pixel { position: absolute; top: 0; left: 50%; transform: translateX(-50%); opacity: 0; /* todas começam escondidas */ transition: opacity 0.4s ease; pointer-events: none; width: 80%; } .me-photo .me-irl { transition: opacity 0.4s ease; } /* modo pixel ligado: esconde a IRL... */ .me-photo.show-pixel .me-irl { opacity: 0; } /* ...e mostra APENAS a pixel do tema ativo */ body[data-theme="rock"] .me-photo.show-pixel .me-pixel-rock { opacity: 1; } body[data-theme="kawaii"] .me-photo.show-pixel .me-pixel-kawaii { opacity: 1; } /* polaroid */ .polaroid-img { max-width: 90%; border: 6px solid var(--t-paper-alt); outline: 1px solid var(--t-shad2); box-shadow: 0px 3px 5px var(--t-shadow); image-rendering: pixelated; } .photo-caption { margin: 5px 0 0 0; } .photo-date { font-family: "Courier New", monospace; font-size: 10px; color: var(--t-ink-soft); margin: 2px 0 0 0; } /* estante de coleções */ .shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; } .shelf figure { margin: 0; text-align: center; } .shelf img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--t-paper-alt); border: 1px dashed var(--t-shad2); image-rendering: pixelated; } .shelf figcaption { font-size: 10px; color: var(--t-ink-soft); } /* medidor de hiperfoco */ .fixation-name { font-weight: bold; color: var(--t-grad); margin: 2px 0 6px; } .meter { height: 10px; background: var(--t-paper-alt); border: 1px solid var(--t-shad2); border-radius: 10px; overflow: hidden; } .meter-fill { height: 100%; background: linear-gradient(to bottom, var(--t-catchlight), var(--t-grad)); } .meter-label { font-size: 10px; color: var(--t-ink-soft); margin: 3px 0 0; } /* cards de projetos */ .project-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } .project-card { background: var(--t-paper-alt); border: 1px solid var(--t-shad2); border-radius: var(--t-radius); padding: 6px; transition: transform 0.2s ease; } .project-card:hover { transform: rotate(-1deg) scale(1.03); } .project-name { font-weight: bold; color: var(--t-grad); margin: 0 0 3px; } .project-card p { margin: 0; } /* abas de navegador falsas */ .fake-tabs { display: flex; flex-wrap: wrap; gap: 4px; } .fake-tab { background: var(--t-paper-alt); border: 1px solid var(--t-shad2); border-bottom: 3px solid var(--t-grad); border-radius: 5px 5px 0 0; padding: 2px 8px; font-size: 11px; } /* café */ .coffee-count { font-size: 20px; font-weight: bold; color: var(--t-grad); margin: 4px 0; } /* preview 3x2 no widget */ .meme-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 8px; } .meme-preview img { width: 100%; aspect-ratio: 1; /* quadradinhos uniformes na preview */ object-fit: cover; /* preenche sem distorcer */ border-radius: 5px; border: 1px solid var(--t-shad2); display: block; transition: transform 0.15s ease; } .meme-preview img:hover { transform: scale(1.06); } /* janela da galeria */ .meme-window { width: min(620px, 92vw); max-height: 85vh; /* nunca passa de 85% da tela */ display: flex; flex-direction: column; overflow: hidden; /* corta o que passar das bordas arredondadas */ } /* grade masonry rolável */ .meme-grid { flex: 1; /* ocupa o espaço que sobra abaixo do header */ min-height: 0; /* ← A CHAVE: deixa o flex encolher a grade */ overflow-y: auto; /* rola dentro da janela em vez de vazar */ padding: 12px; columns: 3 130px; } .meme-item { width: 100%; /* nunca mais larga que a coluna */ height: auto; /* mantém a proporção */ outline: 1px solid var(--rt-shad2); display: block; break-inside: avoid; transition: transform 0.15s ease; } /* pixel pet */ .pixel-pet { width: 64px; image-rendering: pixelated; transition: transform 0.15s ease; } .pixel-pet:hover { transform: scale(1.1); } .pixel-pet.petted { animation: petBounce 0.4s ease; } @keyframes petBounce { 30% { transform: scale(1.25) rotate(-8deg); } 60% { transform: scale(0.95) rotate(5deg); } } /* citações */ .quote { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--t-grad); background: var(--t-paper-alt); font-style: italic; } /* moodboard */ .moodboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .mood-cell { aspect-ratio: 1; background: var(--t-paper-alt); border: 1px dashed var(--t-shad2); border-radius: var(--t-radius); } /* blinkies */ .blinkie-shelf { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; } .blinkie-shelf img { image-rendering: pixelated; border: 1px dotted var(--t-main); } /* footer */ .aboutFooter { text-align: center; margin-top: 15px; padding: 8px; border-top: 1px dashed var(--t-shad2); color: var(--t-ink-soft); } .spotify-inner { display: flex; gap: 6px; padding: 6px; align-items: center; } #sp-art { width: 45px; height: 45px; border: 1px solid var(--t-shad); image-rendering: pixelated; background: var(--t-paper-alt); } .sp-info { flex: 1; min-width: 0; overflow: hidden; } .sp-status { font-family: "Press Start 2P"; font-size: 5px; text-transform: uppercase; color: white; text-shadow: var(--t-shad) 1px 1px 1px; background-color: var(--t-main); border-radius: 3px; padding: 2px 3px; width: fit-content; margin-bottom: 3px; } .sp-track { font-family: 'MS UI Gothic'; font-size: 13px; width: 100%; color: var(--t-shad2); font-weight: bold; } .sp-track a { color: var(--t-shad2); text-decoration: none; } .sp-artist { font-family: 'MS UI Gothic'; font-size: 11px; color: var(--t-ink-soft); } /* responsivo básico: em telas pequenas, uma coluna só */ @media (max-width: 720px) { body, #container { width: auto; max-width: 100%; } #scrapbook { columns: 1; } /* top-bar: largura fluida em vez dos 992px fixos */ .top-bar { width: auto; margin: 0 4px; flex-wrap: wrap; /* se apertar muito, os botões quebram linha com dignidade */ height: auto; padding: 5px 30px; /* respiro lateral pra setinha e o toggle não colarem nos botões */ } /* título em tamanho de bolso, numa linha só */ #title .title1 { font-size: 30px; white-space: nowrap; /* proíbe a quebra em duas linhas */ } /* header um pouco mais baixo, combinando com o título menor */ .aboutHeader { height: 100px; padding-bottom: 30px; } /* stamps num tamanho mais amigável pra tela pequena */ .stampBar { height: 45px; } .stampInner img { height: 45px; } }