/* SITE TITLE v.# - layout name [http://urlhere] */
/* 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
*/

/* THE MAIN STUFF */

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

.container {
  display: grid;
  grid-template-columns: auto minmax(300px,800px) auto;
  grid-template-rows: max-content auto max-content;
  grid-template-areas:
    ". header ."
    ". main ."
    "footer footer footer";
}

/* TEXT EMBELLISHMENTS */

.soon {text-align: center;
font-style: italic;}

/* HEADER */

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

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

/* MAIN TEXT AREA */

main { grid-area: main;
text-align: justify;
font-family: 'Inclusive Sans', sans-serif;
font-size: 100%;
line-height: 160%;
color: #414141;
padding: auto 0.25rem;}

p {text-indent: 1.5rem;}

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

a:hover {text-decoration: none;
color: hotpink;}

/* FOOTER */

footer { grid-area: footer;
text-align: center;
padding: 2rem;
font-size: 75%;
font-family: 'Inclusive Sans', sans-serif;
color: #616161;}


/* TABLET SIZING */

@media only screen and (max-width: 799px) {



}

/* MOBILE SIZING */

@media only screen and (max-width: 414px) {


}