/* --- HEAL THE WORLD BITCHES --- */

/*
◊  Blessed are the peacemakers 
◊  for they will be called children of God. 
◊  Matthew 5:9 
*/

/* Dear diary that is public,
 * My "if anything happens to me" statment 
 * is that I really love humanity DEEP IN 
 * MAH SOUL, BABY. Just want to make 
 * sure people know that, aside from 
 * me always shitposting. */

/* HIER KÖNNTE IHRE WERBUNG STEHEN */

:root {
    --red-color: #ff3333;
    --orange-color: #ff6633;
    --yellow-color: #ffcc33;
    --lightgreen-color: #99ff33;
    --lightblue-color: #10b6fb;
    --bluelila-color: #4343ff;
    --lila-color: #9933cc;
    --darkpink-color: #cc33cc;
    --pink-color: #fe50a6;
    --white-color: rgb(255, 255, 255);
    --gray: #42425d;
    --pookie-red: rgba(131, 0, 15, 0.65);
    --raven-purple: rgba(99, 59, 133, 0.7);
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    margin: 0;
    background-color: black;
    
    
}

img {
    max-width: 100%;
}

p {
    padding: 0.3em;
}
#hero {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(rgba(114, 111, 134, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.21)),
        url(../moar/x_onyx/1086940_20240706044546_1.webp);

    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 90vh;
    width: 100%;
    text-align: center;
}

#hero h1 {
    color: white;
    font-size: 2.7em;
    font-family: fantasy;
    margin-top: 0;
    margin-bottom: 2em;
}

#hero a {
    min-width: 300px;
    border: 1px solid #000;
    padding: 1em;
    border-radius: 5px;
    color: #ffffff;
    font-family: monospace;
    text-decoration: none;
    font-size: 2em;
    font-weight: 700;
    background-color: rgba(0, 0, 0, 0.24);
    margin-left: 1em;
    margin-right: 1em;
}

#hero a:first-of-type {
    text-decoration: line-through;
}

#hero img {
    width: 100%;
}

.herotext {
    display: block;
    padding: 4em;
    background-color: rgba(80, 76, 106, 0.99);
    font-family: var(--Anta);
    font-size: 1.5em;
}

.herotext2 {
    display: block;
    padding: 2em;
    background-color: rgb(0, 0, 0);
    font-family: var(--Pirata);
    font-size: 0.8em;
    color: #4c4353;
    max-width: 666px;
    margin: 0 auto;
    line-height: 0.8em;
    width: 33%;
    text-align: center;
}

.herotext:first-line {
    font-weight: 666;
}

.hero2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: linear-gradient(rgba(114, 111, 134, 0), rgba(0, 0, 0, 0), rgb(0, 0, 0)),
        url(../moar/x_onyx/1086940_20240914035415_1.webp);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.hero2 h1 {
    color: white;
    font-size: 2.5em;
    font-family: fantasy;
    margin-top: 0;
    margin-bottom: 2em;
    text-align: center;
}

.hero3 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: linear-gradient(rgba(114, 111, 134, 0), rgba(0, 0, 0, 0), rgb(0, 0, 0)),
        url(../moar/x_onyx/1086940_20240915090752_1.webp);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.hero4 {
    display: flex;
    min-height: 100vh;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    background-image: linear-gradient(rgba(114, 111, 134, 0), rgba(0, 0, 0, 0), rgb(0, 0, 0)),
        url(../moar/x_crimson_eyez/1086940_20240713230415_1.webp);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.hero4 a {
    width: 300px;
    border: 1px solid rgba(5, 5, 5, 0.72);
    padding: 3em;
    margin: 1em;
    text-align: center;
    color: white;
    background-color: rgba(240, 248, 255, 0.37);
    font-family: monospace;
    font-size: 2em;
    text-decoration: none;
    border-radius: 22px;
}

.hero5 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: linear-gradient(rgba(114, 111, 134, 0), rgba(0, 0, 0, 0), rgb(0, 0, 0)),
        url(../moar/x_onyx/1086940_20240830002419_1.webp);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    background-color: #1d1d21;
    text-align: center;
    padding-top: 6em;
    color: #000000;
}

.foo {
    padding: 20px;
    text-align: justify;
    font-family: monospace;
    max-width: 33%;
}

.end {
    padding: 2em;
    padding-top: 5em;
    background-color: #1d1d21;
    text-align: center;
    clear: both;
    width: 100%;
    display: block;
}