/*imports the Jersey 10 fonts*/ @font-face { font-family: "Jersey 10"; src: url("fonts/Jersey10-Regular.ttf") format("truetype"); } /*:root denotes the tag*/ /*all the global variables*/ :root { --c1: #00FF00; --c2: #0000FF; --c3: #FFA500; --c4: #FF0000; --c5: #FFFFFF; --c6: #FFFF00; --h: 150px; --s: calc(var(--h)/3); --ss: calc(var(--s)/2); } /*light theme*/ .light { --base: #F1F1F2; --baseopp: #2B2B2B; } /*dark theme*/ .dark { --base: #2B2B2B; --baseopp: #F1F1F2; } /*for all*/ * { margin: 0; padding: 0; box-sizing: border-box; } /*the scene*/ #scene { height: 100vh; display: flex; justify-content: center; align-items: center; perspective: 1000px; background-color: var(--base); } /*the name at the top*/ #name { position: fixed; top: 6px; font-size: 4rem; font-family: "Jersey 10"; letter-spacing: 3px; -webkit-text-stroke: 0.1px #2B2B2BBB; } /*the letters of the name*/ #name span:nth-child(1) { color: var(--c2); } #name span:nth-child(2) { color: var(--c3); } #name span:nth-child(3) { color: var(--c4); } #name span:nth-child(4) { color: var(--c6); } #name span:nth-child(5) { color: var(--c1); } #name span:nth-child(6) { color: var(--c2); } #name span:nth-child(7) { color: var(--c3); } /*the button in the name for theme switch*/ #name button { position: absolute; top: 0; font-family: "Jersey 10"; font-size: 4rem; color: var(--c4); background: none; border: none; -webkit-text-stroke: 2px color-mix(in srgb, var(--baseopp) 60%, transparent); } /*rotation start stop button label*/ #controller { transform-style: preserve-3d; } /*the cube*/ #cube { height: var(--h); aspect-ratio: 1; transform-style: preserve-3d; animation: rotate 5s linear infinite; } /*logic for rotation pause play*/ #control:checked + label #cube { animation-play-state: paused; } /*the rotation animation*/ @keyframes rotate { 0% { transform: rotateX(0deg) rotateY(0deg); } 50% { transform: rotateX(180deg) rotateY(180deg); } 100% { transform: rotateX(360deg) rotateY(360deg); } } /*the cubies*/ .cubie { position: absolute; height: var(--s); aspect-ratio: 1; transform-style: preserve-3d; } /*the core*/ #core { position: relative; transform-style: preserve-3d; top: 50%; left: 50%; transform: translate(-50%, -50%); height: var(--s); aspect-ratio: 1; } /*each face*/ .face { position: absolute; height: var(--s); aspect-ratio: 1; border-radius: 6px; backface-visibility: hidden; } /*the front face*/ .front { transform: translateZ(var(--ss)); } /*the back face*/ .back { transform: rotateY(180deg) translateZ(var(--ss)); } /*the left face*/ .left { transform: rotateY(-90deg) translateZ(var(--ss)); } /*the right face*/ .right { transform: rotateY(90deg) translateZ(var(--ss)); } /*the top face*/ .top { transform: rotateX(90deg) translateZ(var(--ss)); } /*the bottom face*/ .bottom { transform: rotateX(-90deg) translateZ(var(--ss)); } /*the inner front face*/ .front::after { content: ""; position: absolute; inset: 5px; border-radius: 6px; background: var(--c1); } /*the inner back face*/ .back::after { content: ""; position: absolute; inset: 5px; border-radius: 6px; background: var(--c2); } /*the inner left face*/ .left::after { content: ""; position: absolute; inset: 5px; border-radius: 6px; background: var(--c3); } /*the inner right face*/ .right::after { content: ""; position: absolute; inset: 5px; border-radius: 6px; background: var(--c4); } /*the inner top face*/ .top::after { content: ""; position: absolute; inset: 5px; border-radius: 6px; background: var(--c5); } /*the inner bottom face*/ .bottom::after { content: ""; position: absolute; inset: 5px; border-radius: 6px; background: var(--c6); } /*footer*/ footer { position: fixed; font-family: "Jersey 10"; bottom: 0; right: 0; margin: 1rem; margin-right: 3rem; font-size: 18px; } /*the link in footer*/ footer a { text-decoration: none; -webkit-tap-highlight-color: transparent; color: var(--baseopp); } /*behaviour of the link in footer*/ footer a:active { font-size: 15px; } /*the image in the footer*/ footer img { position: absolute; height: 1.5rem; bottom: 0; margin-left: 6px; }