body {
      background:#111 url();
      color: #EBEBEB;
      font-family: "Google Sans Code", monospace;
      font-size:13px;
      text-shadow:0px 0px 1px #666;
      line-height: 17px;
      margin: 0;
      padding: 40px;
    }
    
    a:link,a:visited,a:active {color: lightgrey; text-decoration: underline;}
    a:hover { color: #fff; text-shadow:1px 4px 4px #666;}
    
::-webkit-scrollbar-thumb {
background-color: #EDEADE;}
::-webkit-scrollbar 
{width: 5px; height: 0px; background: transparent;}
    
    

    .container {
      width: 90%;
      max-width: 600px;
      margin: 40px auto;
      background: linear-gradient(to bottom, #252525 0%, #0D0D0D 100%);
      border: 1px solid #000;
      box-shadow: 0 0 25px rgba(235, 217, 195, 0.4);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      overflow: hidden;}
    
    

    .top {
      display: flex;
      flex-direction: row;
      margin: 0;
      padding: 0;}
    
    

    .main-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin: 0;
      padding: 0;
      background: linear-gradient(to bottom, #444 0%, #1d1d1d 100%);}

    
    
    header {
      position: relative;
      margin: 0;
      padding: 0;
      line-height: 0;
      overflow: hidden;
      border-bottom: 1px dotted #fff;}

    header img {
      display: block;
      width: 100%;
      height: auto;}
    
    
    
  .site-name {
     position: absolute;
     bottom: 20px;         
     right: 20px;        
     font-family: georgia, cursive;
     font-size: 18px;
     color: #fff;
     text-shadow: 1px 1px 0px #333;
     font-style:italic;
     letter-spacing: 3px;
     pointer-events: none;}

  .title {
      font:bold 16px 'doto', georgia, cursive;
      color: #fff;
      margin: 0 0 6px 0;
      padding-bottom: 4px;
      border-bottom:1px dotted #fff;
      letter-spacing:3px;} 
    
    
    
    nav {
      background:#0F0F0F;
      border-bottom: 1px dotted #fff;
      text-align: center;}

    nav ul {
      list-style: none;
      margin: 0;
      padding: 6px 0;
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;}

    nav li {
      display: inline-block;}

    nav a {
      text-transform:lowercase;
      font-style:italic;
      letter-spacing:2px;
      font-size: 10px;
      padding: 4px 10px;
      border-radius: 4px;
      transition: all 0.2s ease-in-out;}

    

    main {
      flex: 1;
      padding: 10px 12px;
      background: linear-gradient(to bottom, #0F0F0F 0%, #1d1d1d 100%);
      position: relative;}

   

    aside {
      width: 160px;
      background: linear-gradient(to bottom, #0F0F0F 0%, #1d1d1d 100%);
      border-left: 1px dotted #fff;
      padding: 10px;
      box-sizing: border-box;}

    aside ul {
      list-style: none;
      padding: 0;
      margin: 0;}

    .aside {
      margin: 6px 0;
      padding: 4px;
      background: linear-gradient(to bottom, #0F0F0F 0%, #1d1d1d 100%);
      border-left: 1px dotted #fff;
      border-radius: 5px;
      font-style: italic;
      transition: background 0.2s ease, transform 0.2s ease};

    aside li:hover {
      background: #333;}
    
    aside a:link,
    aside a:visited,
    aside a:active {
    color: #fff;
    text-decoration: none;}
    
    footer {
      background: linear-gradient(to right, #1e1e1e 0%, #131313 100%);
      text-align: center;
      padding: 8px 0;
      font-size: 12px;
      border-top: 1px dotted #fff;
      position: relative;
      font-size:10px;}
    
    

    @media (max-width: 700px) {
      .top {
        flex-direction: column;}
      
      .site-name {font-size:14px;
       position: absolute;
       bottom: 13px;         
       right: 20px; }

      aside {
        width: 100%;
        border-left: none;
        border-top: 1px dotted #fff;}

      nav ul {
        flex-wrap: wrap;
        gap: 8px;
      }

      nav a {
        font-size: 11px;
        padding: 4px 8px;
      }

      .container {
        width: 95%;
        margin: 20px auto;
      }
        
      .imgfloat {
        float: right;
        border: 1px dotted black;
        margin: 0px 0px 15px 20px;
      }
        
      .changelog {
        border: 1px solid #ccc; 
        width: 100%; 
        height: 30px; 
        overflow-y: auto; 
        overflow: scroll;
        padding: 10px; 
      }
        
      #statuscafe {
        padding: 5px;
        font-size: 10px;
      }

      #statuscafe-username {
        color: white;
        text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
        padding-bottom: 6px;
        text-decoration: underline;
      }
    }

.largen img {
    transition:transform 0.25s ease;
}

.largen img:hover {
  width: 1000px;
}

      details {
  margin-bottom: 10px;
  font-size: 14px;
}

    summary {
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
}