article {
    padding: 5 5 2px;
    border-bottom: 1px solid var(--brown-white);
    color:var(--brown-white);
}    
.maincol {
    float: left;}
.left {width: 63%; padding-right: 2%;}
.right {width: 35%;}

.notebox{
    width:88%; 
    height:150px;
    overflow-y:auto;
    background:var(--white-brown);
    color:var(--brown-white);
    border:2px solid;
    border-color:var(--brown-white);
    padding: 5px 5px 2px
}
.tape{
    content:"";
    display:block;
    height:20px;
    margin:-1% -2% 7% 4%;
    width: 100px;
    background-color: var(--purple-otha);
    border-right: 1px dotted var(--purple-otha);
    border-left: 1px dotted var(--purple-otha);
    opacity: 0.5;
    box-shadow:0.5px 0.5px 1px rgb(0,0,0,0.2);
    position:absolute;
}
.tab-menu {display: flex;flex-wrap: wrap;}
.tab-menu > input {display: none;}
.tab-menu .tab-menu-item {align-items: center;border-radius: 15px 15px 0px 0px;border: 2px solid var(--brown-white);color: var(--white-brown);background-color: var(--brown-white);border-bottom: none;display: flex;flex: 1;height: 30px;justify-content: center;order: -1;}
.tab-menu .tab-menu-item:hover {background-color: var(--purple-otha);color: var(--white-brown);}
.tab-menu > input:checked + .tab-menu-item {background-color:var(--white-brown);border-color: var(--brown-white);color: var(--brown-white);}
.tab-menu .tab-menu-contents {display: none;height: 270px;border: 2px solid var(--brown-white);border-top: var(--white-brown);width: 100%;}
.tab-menu > input:checked + .tab-menu-item + .tab-menu-contents {display: block;overflow-y:auto; padding: 15px 15px 15px}

.grid {
    display: grid;
    grid-template-columns: 
    repeat(2, 50%);
    grid-column-gap:3%;
    padding-left: 14%;
    padding-right: 2px;
}
.wrapper {
    margin: auto;
    margin-top: 10%;
    width: 50%;
    padding-left:20%;
    background-color: var(--white-brown);
}
.menu {
    text-align: left;
    margin-bottom:5%;
    margin-top:5%;}

summary {
    list-style-type:'*';
    cursor: pointer;
    font-family:myrtille_pixel; 
    color: var(--purple-otha); 
    font-size: 40px;
} 

.cdr{font-family:monospace; font-size:11px;}


.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
	transition: opacity 200ms;
  visibility: hidden;
	opacity: 0;
	&.light {
    background:transparent;
  }
  .cancel {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: default;
  }
  &:target {
    visibility: visible;
    opacity: 1;
  }
}
.popup {
	margin: 75px auto;
	padding: 20px;
	background:var(--white-brown);
	border: 1px solid var(--brown-white);
	width: 300px;
	box-shadow: 0 0 0px rgba(0,0,0,0.5);
	position: relative;
  .light & {
    border-color:var(--brown-white);
    box-shadow: 0 0px 0px rgba(0,0,0,0.25);
  }
  .content {
    max-height: 400px;
    overflow: auto;
  }
}
    @media only screen and (max-width: 1000px) {.wrapper {width:100%;padding-left: 0%;}.desc {display: none;}.grid{grid-column-gap: 3%;padding: 1% 5% 1% 5%;}.tape{margin:-3% 6% auto}}