/*
      made by Kirryn of Digital Girl Designs [digital-girl.net]
      exclusively for the use of Minako & Minakos Sailor Moon Page [minakos-sailormoonpage.net]

      licenced under Creative Commons Attribution-ShareAlike 4.0 International: http://creativecommons.org/licenses/by-sa/4.0/
*/

/* BASICS */

html,
body {
  font-size: 16px; /* base font reset */
  margin: 0;
  padding: 0;
  height: 100%;
  background: #fff;
  font-family: "Poppins", sans-serif;
}

.container {
  display: grid;
  grid-template-columns: auto minmax(400px, 1000px) minmax(100px, 400px) auto;
  grid-template-rows: max-content max-content auto max-content;
  grid-template-areas:
    "nav nav nav nav"
    ". header header ."
    ". main sidebar ."
    "footer footer footer footer";
}

img { 
    max-width: 100%; 
    height: auto; 
}

#tooltips {
  max-width: 300px;
  z-index: 10;
  margin: 1rem;
  padding: 0.5rem;
  border-radius: 10px;
  background: #ffe6ec;
  -moz-box-shadow: 0 -1px 3px rgba(204, 204, 204, 0.5);
  -webkit-box-shadow: 0 -1px 3px rgba(204, 204, 204, 0.5);
  box-shadow: 0 -1px 3px rgba(204, 204, 204, 0.5);
  font-family: "Poppins", Arial, sans-serif;
  border: 1px solid #fff;
  font-size: 11px;
  line-height: 150%;
  color: #ee56ae;
}

/* SCROLLBAR */

::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-corner {
  background: #fff;
}

::-webkit-scrollbar-track-piece {
  background-color: #fff;
}

::-webkit-scrollbar-thumb {
  background-color: #f3acc6;
  border: 1px solid #eee7f1;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #ef88ba;
  border: 1px solid #fff;
}

/* HEADER */

header {
  grid-area: header;
  text-align: center;
  padding: 2rem 0.5rem;
}

.resize {
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.subheader {
  display: inline-block;
  width: 65%;
  height: auto;
  text-align: justify;
  line-height: 150%;
  margin: 0 auto 2rem 0;
  background: #f3f3f3 content-box;
  padding-right: 15px;
  padding-left: 15px;
  border-left: 1px solid #f8d2d3;
  border-right: 1px solid #f8d2d3;
}

.subheader p {
  padding: 1rem;
}

/* NAVIGATION BAR */

nav {
  grid-area: nav;
  text-align: center;
  background: #c1c1c1;
  border-bottom: 1px solid #f3acc7;
}

.mobilenav {
  display: none;
  overflow: hidden;
  background-color: #ccc;
  position: relative;
  padding: 1rem;
  text-align: left;
}

.mobilenav #myLinks {
  display: none;
}

.mobilenav a {
  color: white;
  padding: 1rem 0;
  text-decoration: none;
  display: block;
}

.mobilenav a.icon {
  background: #ccc;
  color: white;
  display: block;
  position: absolute;
  padding: 1rem;
  right: 0;
  top: 0;
}

.mobilenav a.icon:hover {
  background-color: #ccc;
  color: #f38ec4;
}

.mobilenav a:hover {
  color: #f38ec4;
}

.mobilepanel {
  display: none;
  overflow: hidden;
  padding: 0.25rem 0;
  background: #f3aac5;
  background-image: linear-gradient(to top, #f5bccb, #fff);
  text-align: center;
  font-size: 0.9rem;
  border-radius: 25px;
  box-shadow: 0 -2px 5px #aaa;
}

.mobilepanel a {
  display: inline-block;
  margin: 0 1rem;
  color: #000;
}

.mobilepanel a:hover {
  color: #e52388;
}

.accordion {
  cursor: pointer;
  width: 100%;
  text-align: center;
  display: block;
  padding: 0.5rem 0;
}

.accordion:hover {
  color: #eb379c;
}

.sub2::after {
  content: " \21B4";
}

.sub3 {
  font-size: 90%;
}
.sub3::before {
  content: "[";
  font-size: 90%;
}
.sub3::after {
  content: "]";
  font-size: 90%;
}

.menu {
  font-size: 0; /* eliminates whitespace from inline-block*/
}

.menu li {
  display: inline-block; /* blocks just line up without floats */
  width: 10%;
  height: 100%;
  text-align: center;
  position: relative; /* sets positioning context for 2nd level menu */
  padding-inline-start: 0;
}

.menu > li a {
  text-decoration: none; /* removes underline */
  font-size: 1.2rem; /* re-establish a font-size */
  line-height: 1.5em; /* centers the text vertically*/
  text-align: center; /* centeres the text horizontally */
  display: block; /* links now fill the block*/
  color: #fff;
  padding: 1rem 5px;
}

.menu > li > a:hover {
  color: #ee56ae;
  background: transparent;
  transition: 0.5s;
}

.dropdown > li > a:hover {
  color: #000;
  background-image: linear-gradient(to top, #f5bccb, #fff);
  transition: 0.5s;
}

.dropdown {
  /* just a class name for 2nd level menus */
  position: absolute; /* positions the menu UNDER the list item*/
  width: 100%; /* makes the width of the menu the same as the list item */
  visibility: hidden; /* hides the menu until needed */
  padding-inline-start: 0;
  margin: 0;
}

.menu li:hover .dropdown {
  visibility: visible; /* shows the submenu when the list item is hovered */
  margin: 0;
}

.dropdown > li,
.dropdown > li a {
  display: block;
  width: 100%;
  background: #999; /* something different for example */
  color: #000;
  font-size: 1rem; /* re-establish a font-size */
}

.dropdown > li > a {
  color: #f5bccb;
}

.subdrop {
  position: absolute; /* positions the 3rd level menu */
  width: 100%;
  visibility: hidden; /* hides the menu until required */
  padding-inline-start: 10px;
}

.dropdown li:hover .subdrop {
  visibility: visible; /* shows the menu when list item is hovered */
  display: block;
  width: 100%;
  position: absolute; /* positions the list items of 3rd level menu */
  top: 0; /* lines up the menu with the list item */
  left: 100%; /* pushes the list item over to the right side */
}

.subdrop > li,
.subdrop > li > a {
  display: block;
  width: 100%;
  color: #f5bccb;
  background: #666; /* another level, another color */
}

.subdrop > li > a {
  /* jsut some styling */
  border-bottom: none;
}

.subdrop > li > a:hover {
  /* jsut some styling */
  background-image: linear-gradient(to top, #f5bccb, #fff);
  color: #ee56ae;
  transition: 0.5s;
}

/* MAIN TEXT AREA */

main {
  grid-area: main;
  text-align: justify;
  padding: 1rem 0.5rem;
  line-height: 180%;
  color: #838383;
}

main a:link,
main a:visited,
main a:active {
  text-decoration: none;
  color: #ef84b9;
  border-bottom: 1px dashed #e0d4ea;
  transition: 0.3s;
}

main a:hover {
  color: #892b9f;
  border: 0;
  transition: 0.3s;
}

main i,
main em {
  color: #a66d84;
}

main strong,
main b {
  color: #ea42a0;
  letter-spacing: 1px;
}

.intro {
  padding: 0.5rem 2rem;
  background: #fff;
  font-size: 1.1rem;
}

.news {
  padding: 0.25rem 1rem;
  background: #fff;
}

aside {
  display: block;
  width: 75%;
  font-size: 1.15rem;
  text-align: justify;
  margin: 1rem auto;
  color: #000;
  background-image: linear-gradient(to top left, #ef84b9, #f5baca);
  padding: 1rem;
  border-radius: 25px;
  box-shadow: 0px -3px 5px #ddd;
}

aside b,
aside strong,
aside em,
aside i {
  color: #000;
}

.center {
  text-align: center;
}

.meta {
  display: block;
  text-align: right;
  font-family: "Lora", serif;
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 1px;
  line-height: 100%;
  text-transform: uppercase;
}

.newsimg {
  float: left;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  width: 65px;
  border: 5px solid white;
}

/* SIDEBAR */

.sidebar {
  grid-area: sidebar;
  padding: 0.25rem 1rem;
}

section.sidebar {
  padding: 0.5rem;
  background: #eee;
  background-image: linear-gradient(to top, #eee, #fff);
  margin: 0 1rem 4rem 1rem;
  border-radius: 25px;
  border: 1px solid #f8e8ea;
  box-shadow: 0 -3px 5px #ccc;
}

.sidebar p {
  margin: 0.25rem 0.5rem;
  font-size: 0.85rem;
  text-align: justify;
}

.sidebar a:link,
.sidebar a:visited,
.sidebar a:active {
  text-decoration: none;
  color: #ef84b9;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #892b9f;
  border: 0;
  transition: 0.3s;
}

.sidebar i,
.sidebar em {
  color: #565656;
  letter-spacing: 1px;
}

.sidebar strong,
.sidebar b {
  color: #9479cb;
}

.cbox {
  text-align: center;
}

.cbox iframe {
  display: block;
  width: 90%;
  overflow: auto;
  overflow-anchor: none;
  border-radius: 10px;
  border: 1px pink solid;
  background: white;
  margin: 1rem auto;
  padding: 0.5rem;
}

.sideimg {
  display: block;
  margin: 1rem auto;
  max-width: 100%;
  height: auto;
}

.outstanding {
  display: inline-block;
  max-width: 88px;
  height: auto;
  margin: 0.25rem;
}

.outstanding2 {
  display: inline-block;
}

.bssmfansites {
  display: block;
  width: 95%;
  text-align: center !important;
  margin: 0 auto;
}

/* TEXT EMBELLISHMENTS */

h1 {
  color: #ee56ae;
  font-size: 250%;
  margin: 0.25rem;
  padding: 0;
  font-variant: small-caps;
  font-family: "Questrial", sans-serif;
  line-height: 100%;
}

h1::before {
  content: url(/images/h1bg.png);
  margin-right: 1rem;
}

h1.header {
  color: #ef84b9;
  font-size: 400%;
  margin: 0.25rem;
  padding: 0;
  font-family: "Questrial", sans-serif;
  font-variant: small-caps;
  letter-spacing: 3px;
  text-shadow: 2px 2px 4px #bbb;
}
h1.header::before {
  content: "";
  margin: 0;
}
h2 {
  color: #9f40b6;
  font-size: 160%;
  margin: 0.25rem;
  padding: 0 0 2rem 0;
  font-family: "Lora", serif;
  font-style: italic;
}
h2.header {
  color: #ef84b9;
  font-size: 200%;
  margin: 0.25rem;
  padding: 0 0 2rem 0;
  font-family: "Questrial", sans-serif;
  letter-spacing: 8px;
  text-shadow: 1px 1px 3px #ddd;
  font-style: normal;
}
h3 {
  color: #c283ce;
  font-size: 160%;
  line-height: 100%;
  text-indent: 2rem;
  margin: 0.25rem;
  padding: 0;
  font-family: "Questrial", sans-serif;
  background: url(/images/h3bg.png) top left no-repeat;
}
h4 {
  color: #ef88ba;
  font-size: 140%;
  margin: 0.25rem;
  padding: 0.5rem 0 1rem 0;
  font-family: "Questrial", sans-serif;
  letter-spacing: 3px;
}
h5 {
  color: #e253a7;
  font-size: 120%;
  margin: 0.25rem;
  padding: 0.5rem 0 0.5rem 0;
  font-family: "Questrial", sans-serif;
  text-align: center;
  line-height: 100%;
  letter-spacing: 3px;
}
h5::before {
  content: url(/images/h5bg.png);
  margin-right: 0.5rem;
}
h5::after {
  content: url(/images/h5bg.png);
  margin-left: 0.5rem;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(239, 136, 186, 0.75), rgba(0, 0, 0, 0));
    margin: 3rem 0;
}

main ul {
  list-style-image: url(/images/bullet.png);
  padding-left: 3.5rem;
  padding-bottom: 1rem;
}

main ul li {
  padding-left: 0.5rem;
}

blockquote {
  font-family: "Lora", serif;
  line-height: 160%;
  color: #76003a;
  display: block;
  font-size: 1.1rem;
  margin: 1rem 4rem;
  padding: 0.5rem;
  background: url(/images/blockquotebg.png) bottom right no-repeat;
}

/*Subnavigation
==================================== */

/* Unternavigation */

.subnav {
	border-radius: 5px;
	margin: 0.75rem 0;
	padding: 0;
	list-style: none;
	overflow: auto; /* ersetzt clear:both */
}

.subnav li a {

	border-radius: 5px;
	display: block;
	padding: 0.375rem 0.25rem;
	color: #d06fa1 !important;
      font-size: 16px !important;
      font-family: "Poppins", sans-serif;
	background: #fcf9fb;
	text-align: center;
	vertical-align: middle;
}

.subnav li a:hover {

	border-radius: 5px;
	background: rgba(252, 252, 192, 0.66);
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
}


/* table fexible
============================= */


.row { /**** for create an art of table ****/
	display: block;
	margin: 0;
	padding: 0.75em 0;
	width: 100%;
	clear: left; 
	overflow: auto; 
}

.col-33 .row, .col-25 .row, .col-50 .row, .col-66 .row, col-100 .row, .col-75 .row, .col-12_5 .row, .col-37_5 .row, .col-62_5 .row, .col-87_5 .row, col-16 .row  {
	padding: 0.25em 0;
}

.col-33, .col-25, .col-50, .col-66, .col-100, .col-75, .col-12_5, .col-37_5, .col-62_5, .col-87_5, .col-16{
	margin: 0 0.5%;
	padding: 0;	
	float: left;
}

.col-33:last-child, .col-25:last-child, .col-50:last-child, .col-66:last-child, .col-75:last-child, .col-12_5:last-child, .col-37_5:last-child, .col-62_5:last-child, .col-87_5:last-child , .col-16:last-child{
	margin-right: 0 !important;
}

.col-16 {/**** for one sixth contains ****/
	width: 15.66%;
}

.col-33 { /**** for three three contains ****/
	width: 32%;
}

.col-25 { /**** for four three contains ****/
	width: 24%;
}

.col-12_5 { /**** for one eighth contains ****/
	width: 11.5%;
}

.col-25 { /**** for two eighth or one fourth contains ****/
	width: 24%;
}

.col-37_5 { /**** for three eighth contains ****/
	width: 36.5%;
}

.col-50 { /**** for four eighth or two half contains ****/
	width: 49%;	
}

.col-62_5 { /**** for five eighth contains ****/
	width: 61.5%;
}

.col-75 { /**** for six eighth or three fourth contains ****/
	width: 74%;
}

.col-87_5 { /**** for seven eighth contains ****/
	width: 86.5%;
}

.col-66 { /**** for six three contains ****/
	width: 65%;
}

.col-100 { /**** 100% ****/
	width: 99%;
}

/* Past Designs
============================= */
.past {
	margin: 10px 0 0 0;
	padding: 0.5rem;
	background-color: #faf3f9;
	border-top: #ffffff;
	border-bottom: #ffffff;
	overflow: auto; /* ersetzt clear:both */
}

.past > img {
	margin: 0.25% 0.25% 0.25% 0.5%;
	border: 0.5em solid #ffffff;	

	box-shadow: 0px 0px 3px #faf5f9;
	-moz-box-shadow: 0px 0px 3px #faf5f9; 
	-webkit-box-shadow: 0px 0px 3px #faf5f9;
}

.past > .date {
	display: block;
	margin: 6px 0 6px 60px;
	padding: 3px 4px 3px 12px;
	background: #ffffff;
}

.past > .date > b {
	padding: 0 5px;
}

.past > .date > a {
 	padding: 0 0.25rem 0 10%;
}


/* FOOTER */

footer {
  grid-area: footer;
  text-align: center;
  padding: 2rem 0.5rem;
  font-size: 70%;
  color: #555;
  background: #eee;
}

footer a:link,
footer a:visited,
footer a:active {
  text-decoration: none;
  color: #a774b1;
}

footer a:hover {
  color: #bb4d93;
}

.legal {
  margin: 0 1rem;
}

/* TABLET SIZING */

@media only screen and (max-width: 1329px) {
  .menu > li a {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 999px) {
  .container {
    display: grid;
    grid-template-columns: auto minmax(400px, 1000px) auto;
    grid-template-rows: max-content max-content auto max-content max-content;
    grid-template-areas:
      "nav nav nav"
      ".  header ."
      ". main ."
      ". sidebar ."
      "footer footer footer";
  }

  .mobilenav {
    display: block;
  }

  .menu {
    display: none;
  }

}