/*
 * Name: Plant Cell
 * Author: loren
 * Website: https://ribo.zone
*/

 * {
     font-family: 'courier';
     box-sizing: border-box;
     margin: 0;
     scrollbar-width: thin;
}
 body {
     background: url(https://ribo.zone/32bitcafe/plantcellbg.jpg), honeydew;
      /* background image downloaded from https://textures.neocities.org */
     color: midnightblue;
}
 section {
     margin: 10px;
     padding: 10px;
     background-color: rgb(255,255,255,.9);
     border: 1px solid;
     border-radius: 5px;
}
 h1 a {
     font-family: 'arial black';
     letter-spacing: -3px;
     text-underline-offset: 3px;
     text-transform: uppercase;
     font-size: 60px;
     text-decoration-style: wavy;
     color: white;
     text-shadow: -1px 0 midnightblue, 0 1px midnightblue, 1px 0 midnightblue, 0 -1px midnightblue;
     margin-bottom: 20px;
}
 h2, h3 {
     font-family: 'arial black';
     letter-spacing: -1px;
     line-height: 0.8;
     color: white;
     text-shadow: -1px 0 midnightblue, 0 1px midnightblue, 1px 0 midnightblue, 0 -1px midnightblue;
     text-transform: uppercase;
     margin: 5px 0;
}
 h4 {
     margin: 5px 0;
}
 p {
     margin: 2px 0; 
}
 a {
     font-family: 'arial black';
	 color: darkseagreen;
     font-size: 14px;
	 text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 3px;
}
 a:hover {
     text-decoration-style: wavy;
}
 .header {
     padding: 0px;
     text-align: left;
	 width: 100%;
}
 .topnav {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     border: 1px solid;
     padding: 0;
     background-color: rgb(255,255,255,.9);
     border: 1px solid;
     border-radius: 5px;
     margin-top: 10px;
}
 .topnav a {
     float: left;
     display: block;
     text-transform: uppercase;
     color: darkseagreen;
     font-family: 'arial black';
     letter-spacing: -1px;
     line-height: 0.8;
     font-size: 20px;
     text-decoration: none;
}
 .topnav a:hover {
     color: white;
}
 .flip {
     text-shadow: -1px 0 midnightblue, 0 1px midnightblue, 1px 0 midnightblue, 0 -1px midnightblue;
}
 .main {
     padding: 10px;
}
 .main::-webkit-scrollbar {
     width: 10px;
}
 .main::-webkit-scrollbar-track {
     background: rgb(255,255,255,.9);
     border-radius: 5px;
     border: 1px solid;
}
 .main::-webkit-scrollbar-thumb {
     background-color: darkseagreen;
     border-radius: 5px;
	 border: 1px solid;
}
 .panel h3 {
     margin: 10px 0;
}
 .column {
     float: left;
}
 .sidebar ul {
     list-style-type: none;
     margin: 10px;
     padding: 5px;
     background-color: rgb(255,255,255,.9);
     border: 1px solid;
     border-radius: 5px;
}
 .sidebar li {
     display: block;
     padding: 2px;
}
 .row {
     display: flex;
     flex-wrap: wrap;
}
 .row:after {
     content: "";
     display: table;
     clear: both;
}
 .footer {
     text-align: center;
     padding: 10px;
     width: 100%;
     background-color: rgb(255,255,255,.9);
     border: 1px solid;
     border-radius: 5px;
}

 @media screen and (max-width: 700px) {
     .container {
         padding: 5px;
    }
     .column.sidebar, .column.main {
         width: 100%;
    }
     .topnav {
         flex-direction: column;
         padding: 10px;
         width: 65vw;
         margin: 10px auto;
    }
     .topnav a {
         display: block;
         margin: 5px;
         font-size: 16px;
    }
     .header h1 {
         float: left;
    }
     .header button {
         float: right;
    }
     h1 a {
         font-size: 50px;
    }
     .mobile-only {
         margin-bottom: 10px;
    }
	 .mobile-only h2 {
		 margin-bottom: 0;
	}
}

 @media screen and (min-width: 700px) and (max-width: 1100px) {
     .container {
         padding: 10px;
    }
     .column.sidebar, .column.main {
         width: 100%;
    }
     .topnav {
         padding: 5px;
    }
     .topnav a {
         display: block;
         padding: 10px;
         font-size: 16px;
    }
     .header button {
         float: right;
    }
     .panel {
         width: 45vw;
         margin: 0 auto;
    }
	 .mobile-only {
         display: none;
    }
}

 @media screen and (min-width: 1100px) {
     .container {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 75vw;
    }
     .column.sidebar {
         width: 15vw;
    }
     .column.main {
         width: 60vw;
         overflow-y: auto;
         overflow-x: hidden;
         max-height: 65vh;
    }
     .topnav {
         overflow-x: auto;
         overflow-y: hidden;
    }
     .topnav a {
         position: relative;
         text-align: center;
         margin: 10px;
    }
     .mobile-only {
         display: none;
    }
}

.rev { unicode-bidi: bidi-override; direction: rtl; }
.obem { position: absolute; display:inline-block; z-index: -1; width: 0px; height: 0px; overflow: hidden; }