body
{font:17px "Standard", sans-serif;letter-spacing:1px;color:#dcc6ff;font-weight:thin;background:#290e18;line-height:26px;}
b {color:#b085ff;font-weight:900;}

.page {
  display: flex;
  justify-content: center;
}

.container {
  display: grid;
  grid-template-columns: repeat(5, 200px);
  row-gap: 20px;
  column-gap: 20px;
}

/*  .item {
   border: black 1px dotted;
 } */
.header-logo {
  grid-area: 1/1/1/2;
  text-align: center;
}
.navi {
  grid-area: 2/1/3/2;
  display: flex;
  gap: 10px;
  flex-direction: column;
  font-size: 1rem;
  padding: 10px;
}
.navi a {
  font:25px "Roboto Mono", monospace, arial;
  font-weight: bold;
  font-size: 1.5rem;
  text-decoration: none;
  padding: 10px;
  justify-content: flex;
  color: #b085ff;
  border-bottom:3px solid #b085ff;
}
.navi a:hover {
  -webkit-text-decoration: dashed;
          text-decoration: dashed;
  color:#290e18;
  background-color: #b085ff;
  font-style: italic;
}
.bigtitle {font:32px "Roboto Mono", monospace, arial;font-weight:bold;text-transform:none;text-align:left;color:#b085ff;border-bottom:1px solid #b085ff;margin-bottom:10px;margin-top:10px}

.h2 {font:24px "Roboto Mono", monospace, arial;font-weight:bold;text-transform:none;text-align:left;color:#b085ff;margin-bottom:10px;margin-top:10px}

.h2_bis {font:24px "Roboto Mono", monospace, arial;font-weight:bold;text-transform:none;text-align:left;color:#dcc6ff;margin-bottom:10px;margin-top:10px}

.content {
  grid-area: 2/2/5/6;
  padding: 10px;
}
.content a {
  color: #b085ff;
}
.content a:hover {
  color: #290e18;
  background-color: #b085ff;
  margin-bottom:10px
}
.quote {
  padding: 10px;
  border-left: 3px solid #b085ff;
  background-color: #290e18;
  color: #dcc6ff;
}
.img {position: absolute;

}
.encart {font-size: 80%; line-height:20px; border-top: dashed #b085ff 1px; border-bottom: dashed #b085ff 1px
}
.notes {font-size: 80%; line-height:20px; border-top: dashed #b085ff 1px;
  
}
.container-video {
  position: relative;
  overflow: hidden;
  width: 99%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  border-bottom:2px solid #9a9a9a;
  border-right:2px solid #9a9a9a;
  margin-top:20px;
  margin-bottom:20px;
 
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  
}
.responsive {
  max-width: 100%;
  height: auto;
}
  
#toc_container {
background: #290e18 none repeat scroll 0 0;
border: 1px solid #b085ff;
display: table;
font-size: 90%;
margin-bottom: 1em;
padding: 0px;
width: auto;
}
.toc_title {
font-weight: 700;
text-align: center;
}
#toc_container li, #toc_container ul, #toc_container ul li{
list-style: outside none none !important;
}   
  
#VD_BM_1, #VD_BM_2, #VD_BM_3, #VD_BM_4, #VD_BM_5, #VD_BM_6, #VD_BM_7, #VD_BM_8, #VD_BM_9, #VD_BM_10
{font:24px "Roboto Mono", monospace, arial;font-weight:bold;text-transform:none;text-align:left;color:#b085ff;margin-bottom:10px;margin-top:30px}
  



.item-7 {
  grid-area: 1/4/1/4;
  display: flex;
  justify-content: end;
  align-items: center;
}


@media screen and (max-width: 800px) {
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .header-logo {
    text-align: center;
    margin-bottom: -20px;
  }
  .navi {
    width: 100%;
    justify-content: start;
    align-items: flex-start;
    padding-left: 10px;
  }
  .outlink {
    display: flex;
    flex-direction: column;
  }
  .outlink .updates, .outlink .song {
    width: 100%;
  }
  .content {
    justify-content: center;
    text-align: left;
    flex-wrap: wrap;
  }
  .item-7 {
    justify-content: start;
  }
}