/*----- fonts -----*/

@font-face {
  font-family: 'Montserrat';
  src:
    url(../_fonts/Montserrat.ttf),
    url(../_fonts/Montserrat.woff2);
}

@font-face {
  font-family: 'Cinzel Decorative';
  src:
    url(../_fonts/CinzelDecorative.ttf),
    url(../_fonts/CinzelDecorative.woff2);
}


/*----- end fonts -----*/





/*----- ground level -----*/

.spare {display: none;} /* made it necessary for some divs to stay hidden so keep it => check which ones */

* {
  margin: 0;
  font-family: 'Montserrat';
  color: #333;
}

* a {
  color: #141198;
}

html {
  background-image: url(../_images/ecailles.png);
  background-repeat: repeat;
  font-size: 16px;
}

html, body {
  /* necessary for <main>* to take up all remaining space, with flex body and the flex shorthand in header/main/footer*/
  height: 100%;
}

body {
  display: flex;
  flex-flow: column;
}

header {
  flex: 0 1 auto; /* See above comment // Shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto*/
  background-image: url(../_images/marble.jpg);
  background-size: cover;
  background-position: center;
  border-bottom: ridge rgba(229, 195, 102) 3px;
}

main {
  flex: 1 1 auto; /* Same as for header */
}

footer {
  flex: 0 1 auto; /* Same as for heaedr */
}

hr {
  width: 60%;
  max-width: 500px;
  margin: 50px auto;
  color: #666
  ;
}

/*----- end ground level -----*/





/*----- header -----*/

.pagename {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 15px;
  background-color: #e5c36633;
  border: rgba(234, 203, 119, 0.5) ridge 1px;
  font-family: 'Cinzel Decorative';
  font-size: 1rem;
  font-weight: bold;
  text-shadow: 0 0 5px rgb(255, 255, 255);
  color: black;
}

.bubblenav {
  position: relative;
  width: calc(100% - 20px);
  max-width: 800px;
  margin: auto;
  height: 150px;
}

.bubble {
  position: absolute;
}

.splash {
  top: 20%;
  left: 5%;
}

.historyback {
  bottom: 15%;
  left: 15%;
}

.stamps {
  top: 25%;
  right: 5%;
}

.bubble a, .historyback button { 
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  font-variant-caps: all-small-caps;
  font-family: 'Cinzel Decorative';
  background-color: #e5c36633;
  box-shadow: 0 0 3px whitesmoke inset, 0 0 5px 2px #151e3d;
  color: #151e3d00;
}

.splash a i {
  font-size: 1.7rem;
  padding: 10px;
  color: rgba(51, 51, 51, 0.5);
  text-shadow: 0 0 5px whitesmoke;
}

.splash a i span {
  display: none; /* hides the html-required text */
}

.historyback button {
  font-size: 1.2rem;
  text-shadow: 0 0 5px whitesmoke;
  width: 50px;
}

.stamps a {
  font-size: 1.2rem;
  text-shadow: 0 0 5px whitesmoke;
  padding: 10px;
}

.bubble a:hover, .historyback button:hover {
  box-shadow: 0 0 10px 5px #e5c366, 0 0 10px 5px whitesmoke inset;
  font-weight: bold;
  color: #151e3d;
}

.splash a i:hover {
  color: rgb(0, 0, 0, 0.75);
}

nav {
  margin-top: 10px;
  margin-bottom: 10px;
}

nav ul {
  width: fit-content;
  margin: auto;
  list-style-type: none;
  padding: 0; /* removes <ul> automatic padding */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.dropdown {
  padding: 13px 0; /* minimum 13px on top and bottom compensates for padding and border thickness of [.dropdown > a] // subsequent paddings and margins from other divs can be added then */
}

.dropdown > a {
  color: whitesmoke;
  text-decoration: none;
  font-family: 'Cinzel Decorative';
  font-size: 1.2rem;
  letter-spacing: 2px;
  width: fit-content;
  padding: 10px 15px;
  border: ridge #e5c366 3px;
  background-color: rgba(21, 30, 61, 0.9);
}

.submenu {
  display: block;
  position: absolute;
  transform: translateX(10px);
  z-index: 99;
}

.submenu a {
  display: none;
  width: fit-content;
  margin-top: 5px;
  padding: 10px;
  text-decoration: none;
  font-size: .9rem;
  font-family: 'Cinzel Decorative';
  font-variant-caps: small-caps;
  font-style: italic;
  font-weight: 600;
  color: #333;
  border-radius: 3px;
  background-color: rgba(245, 245, 245, 0.75);
  border: solid 1px rgba(234, 203, 119);
}

.submenu a:first-of-type {
  margin-top: 23px; /* moves the submenu slightly down // equals 10px on top of the .dropdown padding // havent't figured out how exactly to make it cleaner */
}

.submenu a:hover {
  background-color: rgba(234, 203, 119, 0.5);
}

.dropdown:hover .submenu a {
  display: block;
}

.menu:hover, .menu.active:hover {
  background-color: rgba(234, 203, 119, 0.5);
  color: #0e142a;
  text-decoration: underline 1px dotted;
}

.menu.active {
  background-color: #0e142a;
}

/*----- end header -----*/





/*----- main -----*/

main {
  width: calc(100% - 20px);
  max-width: 800px;
  margin: 10px auto;
  background-color: rgba(234, 203, 119, 0.25);
  box-shadow: 0 0 5px black inset;
  border-radius: 3px;
}

.outer {
  margin: 15px;
}

/*----- end main -----*/





/*----- footer -----*/

footer {
  background-image: url(../_images/marble.jpg);
  background-size: cover;
  background-position: center;
  border-top: ridge rgba(229, 195, 102) 3px;
}

.footer-shader {
  background-color: rgba(21, 30, 61, 0.6); /* dims the background image since it doesn't work if directly on top of it */
  height: 100%;
  width: 100%;
  position: relative;
}

.social-media {
  width: fit-content;
  height: fit-content;
  display: flex;
  height: 100%;
}

.social-media__name {
  width: fit-content;
  margin: auto;
  height: fit-content;
}

.social-media__name a {
  display: flex;
  padding: 30px;
  text-decoration: none;
}

.social-media__name a img {
  height: 40px;
}

.social-media__name a p {
  height: fit-content;
  margin: auto;
  font-size: 0.75rem;
  color: rgba(245, 245, 245, 0.75);
  font-style: italic;
  padding: 5px;
  display: none;
}

.navig-footer {
  position: absolute;
  bottom: 40%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #333;
  border-radius: 3px;
  background-color: rgba(245, 245, 245, 0.25);
  border: solid 1px rgba(234, 203, 119);
  padding: 8px 10px;
}

.navig-footer a {
  text-decoration: none;
  color: #141198;
  font-weight: bold;
  margin: 0 10px;
  font-size: 1rem;
}

.navig-footer a:first-of-type {
  margin-left: 0;
}

.navig-footer a:last-of-type {
  margin-right: 0;
}

.dated-copyright {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: whitesmoke;
  font-size: 0.8rem;
  width: calc(100% - 120px);    /* keeps copyright statement on one line */
}

.dated-copyright i {
  color: whitesmoke;
  font-size: 0.8rem;
}

/*----- end footer -----*/