@font-face {font-family: 'EagleLake';
 src: url('https://overthesea.neocities.org/EagleLake.ttf');}

body {
   background-image: url(https://overthesea.neocities.org/herd/grass.jpg);
   background-attachment:fixed;
   height: 100%;
   margin: 20px;
   padding: 0;
   font-family: Georgia;
   font-weight: regular;
}
h1,
h2 {
   text-align: center;
   font-family: 'EagleLake',
      
}
h1 {
   font-size: 1.2em;
}
h2 {
   font-size:1.1em;
   margin-top:5px;
}
h3 {font-size:15px;
text-transform:uppercase;
margin-bottom:9px}

  .container {
        max-width: 900px;
        width:80%;
        height:auto;
     background:none;
        padding: 0px;
        margin: 0 auto;
      margin-top:1%;
      margin-bottom:3%;
      display:flex;
      border:none;
     opacity:1
                }

header {
   max-width: 400px;
   width:auto;
   height:auto;
        padding: 5px;
        margin: 0 auto;
      margin-top:2%;
        margin-bottom:2%;
      background:rgba(248, 235, 213, 0.9);
          border:3px double #6d675c;
      box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.65);
      opacity:0.9;
   content-align:center; 
}

.sidebar {
        font-size:14px;
        background: rgba(109, 103, 92, 0.95);
   border:3px double rgba(248, 235, 213, 1);
   box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.65);
        height:auto;
        padding: 0;
        overflow:auto;
        flex:20%;
   margin:10px;
        order: -1;
                    }

   main {
        background-color: rgba(248, 235, 213, 0.8);
        background-size: 100%;
      filter:drop-shadow(1px 1px 1px rgba(0,0,0,0.4));
        padding: 5px;
      margin: 5px;
        color:black;
        flex:80%;
        height:auto;
        max-height:550px;
        overflow-y:scroll;
      border:3px double #6d675c;
      
      opacity: 0.9;
        order: 2;
            }
            
            li::marker {
  content: "✦ ";
  font-size: 1em;
}

  ul > li ::marker {
  content: "✧ ";
  font-size: 1.2em;
}



 a.nav1:link, a.nav1:visited, a.nav1:active {
            display:block;
            opacity: 0.4;
            background-color: #000000; 
            padding:5px;
            margin:1px;
            text-decoration:none;
            font-weight: normal;
            color: #ffffff;
            font-size:12px;
            line-height:10px;
                }

    a.nav1:hover {
            display:block;
            opacity: 0.5;
            background-color: #f8ebd5;
            color: #000000;
            padding:5px;
            margin:1px;
            text-decoration:none;
            font-style: italic;
            font-weight: normal;
            font-size:12px;
            line-height:10px;
                }
hr{border:1px solid #6d675c;
   width:55%}

img.portraitleft {height:160px;
width:auto;
float:left;
margin:10px;
margin-right:20px}

img.portraitright {height:160px;
width:auto;
float:right;
margin:10px;
margin-left:20px}

 

@media(max-width:750px){
 
   
   .container {
        display:flex;
        flex-direction: column;
        margin:0px auto;
        width:90%;
        max-width:1000px;
      }
   
  img.portraitleft {height:auto;
width:40%;
margin:5px;
margin-right:5px}

  img.portraitright {height:auto;
width:40%;
margin:5px;
margin-left:5px}
   
   main {
        flex:100%;
        order:2;
        max-height:500px;
      overflow-y:scroll;
      }

 

    .sidebar {
        flex:100%;
        order:5;
      }
   
}