/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
code,
img {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    text-decoration: none;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* boring text stuff */

h1 {
    font-size: 2.5em;
}

h2,
button {
    font-size: 2em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.2em;
}

h5 {
    font-size: 0.9em;
}

h6 {
    font-size: 0.7em;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-family: "Montserrat";
    font-weight: 600;
    color: #FFFFFF;
    text-align: center;
}

/* real styling begins */
body {
    /*background: #060008;*/
    image-rendering: pixelated;
    background: url("./img/bg5.png") no-repeat center center fixed;
    background-size: cover;
    line-height: 1.8;
    max-width: 70vw;
    margin: auto;
}

/* this is not needed since i made it work better but i'll keep this here to remember how aspect ratio media queries work :v
@media (max-aspect-ratio: 500/333) {  
}*/
.star {
    color: #CBD7F1;
}

.light {
    color: #FEFDC1;
}

.buttons {
    text-align: center;
    margin-top: 10px;
}

.buttons>a {
    margin-right: 10px;
}

hr {
    border: 0;
    height: 3px;
    width: 35vw;
    margin: 10px auto;
}

@keyframes movinggradient {
    from {
        background-position: 35vw;
    }

    to {
        background-position: 0px;
    }
}

.sillylittlethings {
    width: 70vw;
    position: absolute;
    bottom: 0;
}

.sillylittlethings>img {
    display: table;
    position: relative;
    margin: auto auto 4px auto;
}

.movinggradient {
    background-image: repeating-linear-gradient(to left, #4b4b88, #4b884b, #88884b, #885F4B, #884b4b, #4b4b88);
    background-position: 0px;
    animation: movinggradient 1s linear infinite;
}