/*
    @ is a rule
      is an html entity
    . is a class
    # is an id
   :: is a pseudo-element
*/

@font-face {
    font-family: stone-echos;
    src: url('fonts/Stone Echos.ttf') format('truetype');
}

body {
    /*font-family: tinos;*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: black;
    font-size: 17.5px;
    /*
    no selecting
    user-select: none;
    -moz-user-select: none;
    */
}

.bigstuff {
    font-family: stone-echos;
    font-size: 70px;
}

#header {
    position: fixed;
    line-height: 74%;
    margin-top: 16px;
    z-index: 21;
}
/* mobile */
@media (max-width:400px) {
    #header {
        font-size: 60px;
    }
}

#footer {
    position: relative;
    float: right;
    margin-right: 18px;
    margin-bottom: 20px;
}

#footer-img {
    position: sticky;
    float: left;
    margin-top: -190px;
    width: 300px;
    z-index: 10;
    pointer-events: none; /* leave me be */
}

#main {
    margin-left: 8px;
    position: relative;
    z-index: 20;
}

/* via https://stackoverflow.com/a/24357132 */
span.line {
    display: inline-block;
    white-space: nowrap;
    font-size: inherit;
}

a {
    color: black;
    text-decoration: none;
    /* https://stackoverflow.com/questions/18047353/fix-css-hover-on-iphone-ipad-ipod */
    /* cursor: pointer; */
}
a:hover {
    font-style: italic;
/*
    transition-delay: 0s;
    animation: speed ease forwards;
    animation-duration: 0.2s;
    https://www.tutorialspoint.com/set-the-speed-of-the-hover-effect-with-css
*/
}
#footer a:hover {
    color: #98bbf5;
}


/* doesn't work on iOS :( */
*::selection {
    /* background: #82717b; */
    background: #ab998e;
    /* color: #cc3fb2; */
    /* color: #db48c0; */
    color: #d622b5;
}
*::-moz-selection {
    background: #ab998e;
    color: #d622b5;
}
*::-webkit-selection {
    background: #ab998e;
    color: #d622b5;
}

.bigstuff::selection {
    background: #ab998e;
    color: #53e097;
}
.bigstuff::-moz-selection {
    background: #ab998e;
    color: #53e097;
}
.bigstuff::-webkit-selection {
    background: #ab998e;
    color: #53e097;
}

/* no animation for ::selection :(
 *
 https://stackoverflow.com/questions/15455880/css-selection-pseudo-element-animation

 via https://www.w3schools.com/howto/howto_css_glowing_text.asp

    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}
*/