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

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

/* 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);
    --bluebaby: #a4c2f4;
    --pinkbaby: #ff4b97;
}

  /*
var(--Maco) - var(--Pirata) - var(--Perma) - var(--Anta) 
var(--NotoJP) - var(--Courier) - var(--CourierItalic) 
var(--CourierBold) - var(--CourierBoldItalic) - var(--CoralPixel) 
var(--RubikGlitch) - var(--FrakturCook) - var(--Winds) 
var(--Aldrich) - var(--BitGrid) - var(--Cinzel) 
var(--Jersey) - var(--ShareTech) - var(--Silkscreen) 
var(--VT) - var(--Zen) - var(--Play) - var(--PlayBold)
   */


/*
* { outline: 1px solid red }
*/


*, *::before, *::after { padding: 0; margin: 0; box-sizing: border-box}

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

a:link, a:visited, a:hover, a:active {text-decoration: none; color: var(--raven-purple)}

body {
    margin: 0 auto;
    background-color: rgb(0, 0, 0);
    text-align: center;
    background-image: url("../moar/p/b3.png");
    color: #4d4d4d;
}

p {
    padding: 0.7em;
    vertical-align: middle;
}

  #header-area {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-size: 2em;
    height: 36vh;
    background-color: rgba(0, 4, 121, 0.54);
    background-image: url("../moar/x_devotional_fang/20240622231527_1.webp");
    background-blend-mode: screen;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    text-shadow: 2px 1px #000;
    transition:
        background-image: 2s;
    margin-bottom: 2em;
  }

img {
    border-radius: 0.5em;
}
main {
    width: 90vw;
    margin: 0 auto;
    padding: 1em;
    background-color: rgba(0, 0, 0, 0.53);
    border-radius: 1em;
}


#wholefockingpage {
    background-color: rgba(0, 0, 0, 0.68);
    font-family: var(--Aldrich);
    
}

.modramble {
    font-family: var(--VT);
    font-size: 1.7em;
    max-width: 50%;
    margin: 0 auto;
}
.modramblehead {
    font-family: var(--Jersey);
    font-size: 3.5em;
    color: var(--raven-purple);
    padding: 0;
}
.modramblehead p {
    vertical-align: middle;
}
.modrambleheadBG3 {
    color: rgb(0, 0, 0);
    text-shadow: 1px 1px 12px #754ccc;
    font-size: 7em;
    line-height: 1.2em;
    font-family: var(--Winds);
}
.modrambleheadAstarion {
    color: rgb(0, 0, 0);
    text-shadow: 1px 1px 9px #c60000;
    font-size: 8em;
    line-height: 1.8em;
    font-family: var(--Cinzel);
}

.modintro {
    xbackground-color: rgba(96, 0, 146, 0.17);
}

.Modblah2 {
    xbackground-color: rgba(183, 170, 0, 0.24);
}

.Modblah3 {
    xbackground-color: rgba(2, 23, 185, 0.24);
}

.dedicationz {
    xbackground-color: rgba(0, 88, 128, 0.25);
    color: var(--raven-purple);
    padding: 1em;
    font-size: 0.9em;
    font-family: var(--Silkscreen);
}
.dedicationz p {
    padding: 0.3em;
}

.screenshotspam {
    xbackground-color: rgba(0, 103, 128, 0.25);
}

.howtoget {
    xbackground-color: rgba(0, 240, 0, 0.25);
    line-height: 1.6em;
    font-family: var(--Silkscreen);
}

.imfoarrrmation {
    width: 777px;
    margin: 0 auto;
    text-align: left;
}

 




 /* ------------- MEDIA -------------------------- */
@media only screen and (max-width: 1200px) {
     .modramblehead {
        font-size: 3em;
    }

    .modrambleheadAstarion {
        font-size: 6em;
        line-height: 1.5em;
    }
    .modrambleheadBG3 {
        font-size: 4em;
        line-height: 1.2em;
    }
}





/* ------------- MEDIA -------------------------- */
@media screen and (max-width: 700px) {
    .modramblehead {
        font-size: 2em;
    }

    .modrambleheadAstarion {
        font-size: 4em;
        line-height: 1.5em;
    }
    .modrambleheadBG3 {
        font-size: 4em;
        line-height: 1.2em;
    }
}
    
    
footer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
}
/* -------------------------------------------------------------------- */