html {
      align-items: center;
      background-color: #d6d4d8; 
	  /* alt: f7eee4*/ 
      color: #c5c8c6;
      display: flex;
      font: 15px/1 "Inconsolata", monospace;
      height: 100%;
      justify-content: center;
	  margin: 0;
	  
    }

    body {
      background-color: #1d1f21;
      border-radius: 2px;
      box-shadow: 1px 1px 6px #1d1f2187;
      color: #c5c8c6;
      display: flex;
      flex-direction: column;
      min-height: 30ch;
      min-width: 50vw;
      padding: 2em;
	  margin: 0.5rem;
	--secondary-color: #8f8c89;
	transition: all 0.2s;
    }

/* Hidebutton */
#show,#content{display:none;}
#show:checked~#content{display:block;}
/*/ Hidebutton */

/* Mouseover */
#sidebar {
    display: none;
}
.cart:hover #sidebar {
    display:block;
}
/* /Mouseover */
	
	section {  
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--secondary-color);
  transition: background-color 0.2s;
  border: none;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  border-radius: 7px;
	
}


    p {
      margin: 0;
    }

    p span {
      color: #b5bd68;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    a:focus,
    a:hover {
      font-weight: bold;
    }

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

    nav {
      column-gap: 2em;
      display: grid;
	  grid-gap: 1rem;
      grid-template-columns: auto auto auto auto ;
      padding: 1em 1rem;
	  margin-top: 0.2rem;
	  margin-bottom: 0.2rem;	 
	min-width: 24rem;
    background: var(--secondary-color);
	transition: background-color 0.2s;
	border: none;
	border-radius: 10px;		
    }

    ul:nth-child(1n) li:first-child {
      color: #a54242;
    }

    ul:nth-child(2n) li:first-child {
      color: #de935f;
    }
    
    ul:nth-child(3n) li:first-child {
      color: #f0c674;
    }
    
    ul:nth-child(4n) li:first-child {
      color: #484094;
    }

    ul:nth-child(5n) li:first-child {
      color: #85678f;
    }
	
	
    li:first-child {
      font-weight: bold;
    }

    li:last-child {
      margin: 0 0 1em;
    }

    p #cursor {
      background-color: #b5bd68;
      animation: blink 1s infinite;
    }

    @keyframes blink {
      0% { opacity: 0; }
      49% { opacity: 0; }
      50% { opacity: 1; }
    }
	u2 {display: grid;
	grid-template-columns: auto auto auto auto;}
	u3 {display: grid; 
	grid-template-columns: auto auto auto auto;}
	u4 {display: grid;
	grid-template-columns: auto auto auto auto;
		  grid-gap: 3rem;}
		u5 { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}
	u6 {height:92px;}
			u7 {display: grid;
	grid-template-columns: auto auto auto auto auto;
		  grid-gap: 3rem;}
	
	span.from {padding-right: 20px;
	color: #ebedd5 ;}
	span.from1 {padding-right: 10px;
	color: #2b2a2b ;}
	span.from2 {padding-right: 20px;
	color: #b30000 ;}
	/* /from3 rot */
	span.from3 {padding-right: 20px;
	color: #ff0000 ;}