/* 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;
}

.grid-container {
  display: grid;
  grid-template-columns: minmax(360px, 900px);
  grid-template-rows: max-content auto max-content;
  max-width: 900px;
  margin: 0 auto;
  grid-template-areas:
    "header"
    "main"
    "footer";
   height:100%;
    }

/* TEXT EMBELLISHMENTS */

a:link,
a:visited,
a:active {text-decoration: none;
color: #ff819e;
border-top: 1px dashed #0fbabb;
border-bottom: 1px dashed #0fbabb;}

a:hover {text-decoration: none;
color: #fff;
background: #ff819e;}

/* HEADER */

header { grid-area: header;
padding-top: 5rem;
text-align:center;
 }

h1 {
    display: block;
    text-align: center;
color: #ff819e;
font-weight: normal;
    font-family: 'Barriecito', cursive;
font-size: 300%;
margin: 0;}

h2 {
    display: block;
    text-align: center;
color: #ff819e;
font-weight: normal;
    font-family: 'Barriecito', cursive;
font-size: 200%;
margin: 2rem 0;}

.resize {-webkit-animation: hue 5s infinite;
animation: hue 5s infinite;
display: block;
margin: 2rem auto;
}

.original {display: block;
margin: 3rem auto;}

.small {font-size: 80%;
line-height: 150%;}

.buttons {display: block;
width: 80%;
margin: 2rem auto;
text-align: center;}

.buttons img {margin: 0.25rem;
box-shadow: 2px 2px 5px #aaa;}

strong, b {color: #0fbabb;}


/* MAIN TEXT AREA */

main { grid-area: main;
text-align: justify;
    font-family: 'Lunasima', sans-serif;
    line-height: 200%;
    font-size: 100%;}


/* FOOTER */

footer { grid-area: footer;
text-align: center;
padding: 5rem 0;
font-size: 66%;
font-family: 'Lunasima', sans-serif;}

.cliques {font-size: 85%;
text-align: right;}


#statuscafe {
    padding: 1rem;
width: 70%;
display: block;
margin: 2rem auto;
background: #c1baf1;
border-radius: 20px;
}

#statuscafe-username {
font-family: 'Permanent Marker', cursive;;
font-weight: normal;
font-size: 110%;
}

/* TABLET SIZING */

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



}

/* MOBILE SIZING */

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


}