*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }

    body {
      overflow:hidden;
      font-family:'Julius Sans One',sans-serif;
      background:#111; color:#fff;
    }

    main {
      display:flex;
      width:100vw; height:100vh;
    }

    .panel {
      flex:1;
      background-size:cover;
      background-position:center;
      pointer-events:none;
    }
    .panel.left  { background-image:url('./images/left-bg.jpg') }
    .panel.right { background-image:url('./images/right-bg.jpg'); filter:sepia(100%) }

    .logo {
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      z-index:10;
    }
    .logo img {
      width:200px; border-radius:50%;
      transition:transform .4s,box-shadow .4s;
    }
    .logo:hover img {
      transform:scale(1.1);
      box-shadow:
        0 0 8px 2px rgba(181,139,59,.8),
        0 0 16px 4px rgba(181,139,59,.6),
        0 0 32px 8px rgba(181,139,59,.4);
    }

    /* burger */
    .burger {
      position:fixed; top:20px; left:20px;
      display:flex; flex-direction:column; gap:4px;
      z-index:20; cursor:pointer;
    }
    .burger span {
      width:24px; height:1px; background:#c7b28a;
    }

    /* menu */
    nav {
      position:fixed; top:0; left:0; bottom:0;
      width:240px; padding:60px 20px;
      background:rgba(0,0,0,.7);
      overflow:auto; z-index:20;
      display:none;
      font-family:'Julius Sans One',sans-serif;
    }
    nav.active { display:block }
    nav a {
      display:block; padding:6px 0;
      text-transform:lowercase;
      color:#c7b28a; text-decoration:none;
      transition:color .2s;
    }
    nav a:hover { color:rgba(199,178,138,1) }
    .submenu { margin-left:1em }
    .submenu a {
      color:#c7b28a;
    }