/* NYMPHAEA v.1 - sappho's spell [http://sailorcrystal.net/nymphaea/] */
/* DESKTOP/TABLET/MOBILE VERSION */
/* made by evenstar AT gmail DOT com; licenced under Creative Commons Attribution-ShareAlike 4.0 International: http://creativecommons.org/licenses/by-sa/4.0/ */



/*
      'ello there, curious bun! :D *pinches cheeks*

      don't panic! you're not doing anything wrong! you are very welcome
      to look at, mess around with, and learn from my code (as you should
      be with anyone's, but let's not quibble...), as per the ShareAlike
      Licence it is under!

      !!! PLEASE *DO NOT* COPY IT VERBATIM, THOUGH !!!

      this is *literally* all I ask. if you would like a CSS stylesheet of
      your own made wholly by me, please contact me via evenstar@gmail.com
      and we can discuss a commission! you will be respecting my work and
      helping me keep my bills paid! <3

      please respect this, or don't expect me to respect you or extend
      any kindness towards you.

      don't be a Svenja.
      don't be a Franziska.
      be awesome instead.

      quick caveat: be aware this code may not be perfect, because CSS
      is a constantly changing beast, and I'm always learning myself!
      (check out w3schools.org for tutorials and tips & tricks using the
      most up-to-date CSS!)

      please enjoy perusing my code, and I hope it inspires your own.
      now get out there and make a wonderful webpage! <3
*/



/* BODY & CONTAINER */
html,
body {
	font-size: 16px;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
	}

.grid-container {
    display: grid;
    grid-template-columns: minmax(300px, 1005px);
    grid-template-rows: max-content max-content auto max-content;
    min-height: 100vh;
    max-width: 1005px;
    margin-left: auto;
    margin-right: auto;
    grid-template-areas:
        "header"
        "nav"
        "main"
        "footer";
	}


/* SCROLLBAR */

::-webkit-scrollbar {
	height:0.7rem; 
	width: 0.7rem;
	}
	
::-webkit-scrollbar-corner {
	background:#fff;
	}

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

::-webkit-scrollbar-thumb {
    background-color: #436292;
    border: 2px solid #fff;
    border-radius: 10px;
	}

::-webkit-scrollbar-thumb:hover {
    background-color: #5396a1;
	}


/* HEADER */

header { 
	grid-area: header;
	text-align: center;
	margin: 0;
	}

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


/* TEXT LEVEL SEMANTICS */

h1 {
	font-family: 'Cinzel Decorative', serif;
    font-size: 250%;
    line-height: 100%;
    background: linear-gradient(to bottom, #5a98a4, #565799);
    text-indent: 2rem;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: 0;
    margin-bottom: 1rem;
    font-weight: bold;
    }

h2 {
	font-family: 'Playfair Display', serif;
	font-size: 150%;
	color: #5990a2;
	margin: 0;
	padding: 0;
	line-height: 100%;
	margin-bottom: 1rem;
	}

h3 {
	font-family: 'Playfair Display', serif;
	text-transform: uppercase;
	font-size: 115% !important;
	color: #b3abd1;
	line-height: 150%;
	margin-bottom: 0;
	margin-top: 0;
	text-indent: 1rem;
	letter-spacing: 5px;
	border-bottom: 1px dashed #fff;
	}

strong {
	color: #436292;
	letter-spacing: 1px;
	}

em {
	color: #8387a3;
	}


/* NAVIGATION */

nav {
	grid-area: nav;
	text-align: center;
	word-spacing: 3rem;
	font-size: 165%;
	padding-top: 2rem;
	padding-bottom: 2rem;
	background:transparent;
	}

nav a:link,
nav a:visited,
nav a:active {
	text-decoration: none;
	color: #80a2cd;
	display: inline-block;
	font-family: 'Playfair Display', serif;
	transition: all 0.75s ease-in-out;
	}

nav a:hover {
	color: #fff;
	text-shadow: 0px 0px 5px #5c99a4, 0px 0px 10px #5c99a4, 0px 0px 15px #5c99a4;
	transition: all 0.75s ease-in-out;
	}


/* MAIN */

main { 
	grid-area: main;
	text-align: justify;
	padding: 0.25rem;
	font-family: 'Lunasima', sans-serif;
	font-size: 100%;
	line-height: 200%;
	color: #6d6d6d;
	}

main a:link,
main a:visited,
main a:active {
    text-decoration: none;
    color: #5899a4;
    text-shadow: 0 0 3px #83bdd1;
    transition: all 0.3s ease-in-out;
	}

main a:hover {
	text-decoration: none;
	color: #fff;
	background: #446693;
	transition: all 0.3s ease-in-out;
	}

main p {
	margin: 0 0.15rem 2rem 0.15rem;
	}

.choice {
	display: block;
	width: 75%;
	margin: 1rem auto;
	text-align: center;
	}

img.menu {
	width: 125px;
	margin: 0.75rem;
	height: auto;
	border-radius: 50%;
    border: 5px solid #fff0;
    outline: 1px solid #7fced3;
	transition: all 0.8s ease-in-out;
	filter: opacity(70%) brightness(90%);
    box-shadow: 0 0 5px #468b98;
	}

img.menu:hover {
    margin: 0.75rem;
    height: auto;
    border-radius: 50%;
    border: 5px solid #fff0;
    outline: 1px solid #7fced3;
    box-shadow: 0 0 20px #468b98;
	transition: all 0.8s ease-in-out;
	filter: opacity(100%) brightness(110%);
	}


img.thumb {
	width: 125px;
	margin: 0.75rem;
	height: auto;
	border-radius: 50%;
    border: 5px solid #fff0;
    outline: 1px solid #7fced3;
	transition: all 0.8s ease-in-out;
	filter: opacity(70%) brightness(90%);
    box-shadow: 0 0 5px #468b98;
	}

img.thumb:hover {
    margin: 0.75rem;
    height: auto;
    border-radius: 50%;
    border: 5px solid #fff0;
    outline: 1px solid #7fced3;
    box-shadow: 0 0 20px #468b98;
	transition: all 0.8s ease-in-out;
	filter: opacity(100%) brightness(110%);
	}

a.thumb {
	background: none !important;
	}

p.images {
	display: block;
	width: 75%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	}

.button {
	margin: 0.5rem;
	}


/* FOOTER */

footer {
	grid-area: footer;
	text-align: center;
	padding: 2rem;
	margin: 2rem 0;
	font-family: 'Playfair Display', serif;
	font-size: 80%;
	color: #a5a5a5;
	line-height: 150%;
	}

footer b, 
footer strong {
	font-family: 'Playfair Display', serif;
	}

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

footer a:hover {
	color: #5990a2;
    transition: all 0.2s ease-in-out;
	}