:root[data-theme='light'] {
      --bg-color: #ffffff;
      --text-color: #000000;
      --link-color: #000000;
      --link-hover: #666666;
      --border-color: #000000;
      --border-hover: #cccccc;
      --stroke-color: black;
      --bg-button: #b9b9b9;
      --bg-button-hov: #dcdce0;
      --bg-input: #ccc;
      --cm-shadow: #ddd;
      --bg-button-lite: #e3e3e3;
      --bg-button-lite-hov: #cacaca;
      --bg-button-lite-border: #b9b9b9;
    }
    
    :root[data-theme='dark'] {
      --bg-color: #111111;
      --text-color: #ffffff;
      --link-color: #ffffff;
      --link-hover: #cccccc;
      --border-color: #ffffff;
      --border-hover: #555555;
      --stroke-color: white;
      --bg-button: #444;
      --bg-button-hov: #666;
      --bg-input: #262626;
      --cm-shadow: transparent;
      --bg-button-lite: #000;
      --bg-button-lite-hov: #1c1c1c;
      --bg-button-lite-border: #333;
    }
    
    .editor-nav {
      display: flex;
      left: 50%;
      gap: 10px;
      justify-content: space-between;
      margin-top: 20px;
      transform: translateX(-50%);
    }
    .nav-leftbar {
        display: flex;
        gap: 10px;
    }
  
    body {
      margin: 0;
      height: 100vh;
      color: var(--text-color);
      background: var(--bg-color);
      font-family: 'Inter', sans-serif;
    }
    body.centered {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .m-0 {
        margin: 0;
    }
    .m-10 {
        margin: 10px;
    }
    .m-15 {
        margin: 15px;
    }
    .m-20 {
        margin: 20px;
    }
    
    .inline-flex-center {
        display: inline-flex;
        justify-content: center;
    }
    
    .theme-transition body {
      transition: background 0.6s ease-in-out, color 0.6s ease-in-out;
    }

    .logo {
      display: inline-flex;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      align-items: center;
      gap: 1rem;
    }

    .logo-text {
      font-size: 2rem;
      font-weight: 500;
      letter-spacing: -0.5px;
      user-select: none;
    }
    
    .description {
        margin-top: 25px;
        letter-spacing: 1px;
    }

    .squares-logo-sm {
      width: 48px;
      height: 48px;
    }
    
    aside {
        position: absolute;
        bottom: 20px;
    }
    
    .footer {
        display: inline-flex;
        font-size: 0.8rem;
        gap: 20vw;
    }
    
    @media only screen and (max-width: 560px) {
        .footer {
            display: inline-flex;
            font-size: 0.8rem;
            gap: 20vw;
            padding: 0 10%;
        }
    }
    
    ul {
        display: inline-flex;
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
    }
    ul.type-links {
        gap: 10px;
    }
    ul>li {
        list-style-type: none;
    }
    
    a, a:active {
        color: var(--link-color);
        text-decoration: none;
        border-bottom: 1px solid var(--border-color);
    }
    a:hover, a:active:hover {
        color: var(--link-hover);
        border-bottom-color: #ccc;
    }
    
    .no-select {
        user-select: none;
    }
    
    .theme-toggle {
      position: relative;
      width: 20px;
      height: 20px;
      border: none;
      border-radius: 50%;
      background-color: var(--text-color);
      transition: all 0.3s ease-in-out;
    }
    .ignore-theme {
        color: #fff;
    }
    
    nav {
      position: absolute;
      top: 0;
      width: 70vw;
    }
    .nav-content.desktop {
        display: flex;
        justify-content: center;
        margin-top: 25px;
    }
    .landscape-button {
      padding: 6px 12px;
      max-width: max-content;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: none;
      background-color: var(--bg-button);
      color: var(--text-color);
      border-radius: 10px;
      font-family: inherit;
      font-size: 0.8rem;
      cursor: pointer;
      transition: background-color 0.2s ease-in-out;
      user-select: none;
    }
    
    .landscape-button:hover {
      background-color: var(--bg-button-hov);
    }
    .path-moveable,.path-expandable,.path-shrinkable {
        transition: transform 0.3s ease;
    }
    .landscape-button:hover .path-moveable {
        transform: translateX(3px);
    }
    .button-share.path-moveable {
        transform: translateY(3px);
    }
    .landscape-button:hover .button-share.path-moveable {
        transform: translateY(0);
    }
    .landscape-button:hover .path-expandable {
        transform: scale(1.35) translateX(-3.15px) translateY(-3px);
    }
    .landscape-button:hover .path-shrinkable {
        transform: scale(0.7) translateX(5px) translateY(5px);
    }
    
    .landscape-input {
        border: 1px solid var(--bg-button);
        padding: 0 15px;
        border-radius: 10px;
        background-color: var(--bg-input);
        color: var(--text-color);
        font-family: 'Inter', sans-serif;
    }
    
    button {
        cursor: pointer;
    }
    
    .button-icon {
      width: 24px;
      height: 24px;
      display: inline-block;
    }
    .button-label {
        font-weight: bold;
    }