body {
   background: black;
   background-image: url("https://overthesea.neocities.org/images/wallpaper3.jpg");
   height: 100%;
   margin: 0px;
   padding: 5px;
   font-weight: regular;
   display:flex;
   align-items: center;
  justify-content: center;
   font-family:"Georgia";
	color: black;}
	
h1 {
   font-size: 2em;
   margin-bottom:20px
}

h2 {
   font-size: 1.5em;
   margin-bottom:20px;
   font-family: 'antique_book_cover';
}

h3 {
   margin-top: 15px;
   font-weight:bold;
}

h1, h2, h3, h4 {margin: 5px}

summary {
  cursor: pointer;
}
   
/* details styling */
.bigdetails {
  padding: 0px;
  border-radius: 1px;
  border:dashed 2px #6d675c;
  margin: 0% 2%;
}
   
   summary.bigsum:hover {
  background: rgba(248, 225, 193, 0.5);
  ;
}

summary.bigsum {cursor: pointer;
padding:10px}

img 
{max-width:100%}

nav {
  margin: 0px 7px 1em;
  padding-top:0px;
  
}

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

nav ul li > a {
  display: inline-block;
}

nav ul li > a,
nav ul li summary {
  padding: 5px;
}

nav h3{
  margin: 5px 0px 0px;
}

p {margin:5px 10px}





   /* Hide scrollbar for IE, Edge and Firefox */
.scroll {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* containers */

 .containerk {
        width:90%;
    max-width:1400px;
        height:auto;
     background:none;
        padding: 0px;
        margin: 0 auto;
      margin-top:4%;
      margin-bottom:3%;
      display:flex;
      border:none;
     opacity:1;
    color:black;
                }

.sidebarnavk {
   font-size:14px;
   background: rgba(248, 235, 213, 0.9);
   border:3px double #6d675c;
   box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.65);
   height:fit-content;
   overflow-y:scroll;
   padding-top: 10px;
   padding-bottom: 5px;
   overflow:auto;
   flex:15%;
   margin:10px;
   order: -1;
   position: sticky;
   top: 5%;
     }

.sidebarrk {
   font-size:14px;
   background: rgba(248, 235, 213, 0.9);
   border:3px double #6d675c;
   box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.65);
   height:fit-content;
   max-height:300px;
   overflow-y:scroll;
   padding-top: 10px;
   padding-bottom: 5px;
   overflow:auto;
   flex:15%;
   margin:10px;
   order: 5;
   position: sticky;
   top: 5%;
  }

 main {
     background: rgba(248, 235, 213, 0.9);
     filter:drop-shadow(1px 1px 1px rgba(0,0,0,0.4));
     padding: 5px;
     margin: 5px;
     color:black;
     flex:60%;
     height:fit-content;
     border:3px double #6d675c;
     order: 2;
}

.teacatsnav {width:150px;
max-width:100%}

.teacatsmain {display:none}







/* details */

::selection {
  background: rgba(255, 0, 0, 0.4);
}



  img.link:hover {
  filter:drop-shadow(1px 1px 1px rgba(255,255,255,0.8))
  } 

@media(max-width:750px){
 
   
   .containerk {
        display:flex;
        flex-direction: column;
        margin:0px auto;
        margin-top:1%;
        width:90%;
      }
   
   main {
        flex:100%;
        order:1;
        height:auto;
      }

    .sidebarnavk {
        flex:100%;
        order:0;
        height:auto;
        z-index:5;
        top:5px;
      }
   
       .sidebarr {
        flex:100%;
        order:7;
        height:auto;
      }
   
nav li {
    display: inline;
}

.teacatsnav {display:none;}

.teacatsmain {display:block;
width:50%}


   
}