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


  /*
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)
   */


/*    
    --bigborder: 10px solid rgb(0, 0, 0);
    --Pookiestarionlabeltextcolor: black;
    --labelboxborder: thick double black;
    --labelbackgroundcolor: rgba(101, 0, 19, 0.72);
    --heightnavimg: 50px;
    --heightnavimg2: 40px;
    --widthnavimg: auto;
    --outline-black: 4px inset rgba(123, 0, 0, 0.2);

*/

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


*, *::before, *::after { padding: 0px; margin: 0px; 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;
}
*/
  
body {
    margin: 0 auto;
    font-family: "Open Sans",Helvetica,Arial,sans-serif!important;
    color: #4d4d4d;
    background-color: rgb(0, 0, 0);
    text-align: center;
    background-image: url("p/b3.png");
}

p {
    padding: 0.3em;
}
main {
    width: 100%;
}

/*
h1, p { padding: 0 1em 0 1em; }

h1 { font-size: 1.5em }
*/

/*
nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: rgba(0, 0, 0, 0.54);
    justify-content: center;
    align-items: center;
    
}

nav  a:link, a:visited, a:hover, a:active {
    color: white;
    text-decoration: none;
}

nav img {
    height:20px;
    width: auto;
}

nav p {
    display: inline;
    margin-top: 0.6em;
    margin-bottom: 0px;
    padding-top: 0;
    padding-right: 0.5em;
    padding-left: 0.5em;
    padding-bottom: 0.2em;
}

*/


.aboutPookie {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    column-gap: 5px;
    margin: auto;
    margin-top:3em;
    margin-bottom: 3em;
    padding: 0.8em;
    min-width: 333px;
    max-width: 1000px;
    background-color: rgba(0, 0, 0, 0.63);
    border: 1px double var(--raven-purple);
    border-radius: 10px;
    xcolor: var(--pookie-red);
    color: var(--raven-purple);
    font-family: var(--Maco), 'Courier New', sans-serif;
    font-size: 1.5em;
    
}

.aboutPookie p {
    margin:0;
    baxckground-color: rgba(255, 192, 203, 0.12);
}

.aboutPookie2 {}


/*
#aboutPookie p {
    background-color: pink;
}
*/


.vampayapookie {
    display: block;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    width: 44%;
}
.vampayapookie p {width: 100%;}
.ppookieline {
    font-family: var(--RubikGlitch);
    font-size: 0.8em;
    color: #2a6681;
    width: 100%;    
}
.ppookieline2 {
    font-family: var(--VT);
    color: var(--gray)
}
.ppookietext {
    font-size:0.91em;
    width: 52%;
    margin:0;
    font-family: var(--Silkscreen)
    
}
.sliced_pookie {
   
    max-width: 77%;
    border-radius: 2%;
    border: var(--labelboxborder);
    box-shadow: 0px 0px 34px #520000;
    
}
.ppookietext_smoll {
    width: 15%;
    font-size: 0.6em;
    font-family: var(--Anta)
}
.ppookie100 {
    width: 100%;
}
.ppookieimg_s {
    width: 100%;
    border-radius: 2%;
    xborder: var(--labelboxborder);
    box-shadow: 0px 0px 10px 15px rgb(0, 0, 0);
   
}

.pookiesname {
    display: block;
    font-size: 4em; 
    margin-top: 0.3em;
    margin-bottom: 1.3em;
    font-family: var(--FrakturCook);
}

label {
    font-size: 3em;
    display: none;
    z-index: 200;
    
}
#toogle {
    display: none;

}
#toogle:checked + nav {
    display: flex;
}



#header-area {
    
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-family: var(--CoralPixel);
    font-size: 2em;
    height: 56vh;
    background-image: url("x_crimson_eyez/1086940_20240929082617_1.webp");
    background-size: cover;
    background-position: left; 
    background-attachment: scroll;
    text-shadow: 2px 1px #000;
    transition:
        background-image: 2s;
  
}
/*
#xheader-area:hover {
    transform: scale(1.05) translateY(20px);
    background-image: url("/moar/screenshots01/1086940_20250213024608_1.webp");
    background-size: auto;
    transition: 2s
}
*/

#header-area h1 {
    font-size: 3em;
    font-family: monospace;
    text-shadow: 4px 2px #000;
    
}





header {
    text-align: center;
    font-family: var(--Perma), cursive;
    background-color: white;
    border: var(--bigborder);
    border-radius: 5px;
    width: 89%;
    margin: 0 auto;
    margin-bottom: -100px;

}
h4 {background-color: var(--labelbackgroundcolor);
    border: var(--labelboxborder);
    text-align: center;
    font-size: 1.5em;
    font-family:fantasy;
}



#Pookiestariano {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(150px, auto);
    grid-gap: 10px;
    margin: 0 auto;
    margin-top:7em;
    margin-bottom:7em;
    max-width: 980px;
    min-width: 980px;
    transform: rotateZ(2deg) scale(1);
    color: var(--Pookiestarionlabeltextcolor);

}

#Pookiestariano h4 {
    font-family: var(--Perma), cursive;
}

#Pookiestariano a {
    color: black;
    
}


section {
    background-color: var(--bgcolor);
    
}

#sec1 {
    grid-column: 3/5;
    grid-row: 3/5;
    background-image: url(/moar/p/AyyAAstarion.png);
    background-size: cover;
    border-radius: 30px;
   /* border: var(--bigborder); */
    transform: rotate(-6deg) scale(1.2);
    border: double 4px var(--pookie-red);
    outline: solid 10px #000000;
    outline-offset: 0px;
    background-position:left -28px center;
   
}

#sec1 h4 {
    transform: rotate(3deg) scale(1.5);
    margin-right: 1.1em;
    width: 272px;
    position: absolute;
    top: -6px;
    right:-6px;
}

#sec2 {
    grid-column: 1/3;
    grid-row: 1/5;
    border-radius: 11%;
    background-image: url(/moar/p/AyyDockstarion.png);
    background-size: cover;
    background-position: right -11px center;
    border: var(--bigborder);
   
}

#sec2 h4 {
    transform: rotate(-11deg) scale(1.5);
    width: 185px;
    top: 145px;
    left:-4px;
    position: fixed;
}

#sec3 {
    grid-column: 3/7;
    grid-row: 1/3;
    border-top-right-radius: 30%;
    border-bottom-left-radius: 90%;
    border-top-left-radius: 20%;
    border-bottom-right-radius: 15%;
     background-image: url(/moar/p/AyyAngistarion.png);
    border: var(--bigborder);
    background-size: cover;
    background-position: top -85px right;
   
}

#sec3 h4 {
        transform: rotate(7deg) scale(1.5);
    width: 179px;
    margin-left: 109px;
    margin-top:-18px;
    position: absolute;
    

}

#sec4 {
    grid-column: 5/7;
    grid-row: 3/7;
     border-top-right-radius: 60%;
    border-bottom-left-radius: 60%;
    border-top-left-radius: 10%;
    border-bottom-right-radius: 10%;
    background-image: url(/moar/p/AyyPookiestarion.png);
    background-size: cover;

    background-position: center;
    border: var(--bigborder);
    
    
}

#sec4 h4 {
 transform: rotate(7deg) scale(1.5);
    width: 183px;
    margin-left: 174px;
    margin-top: 512px;
    position:absolute;
}

#sec5 {
    grid-column: 1/5;
    grid-row: 5/7;
     border-top-right-radius: 196%;
    border-bottom-left-radius: 47%;
    border-top-left-radius: 62%;
    border-bottom-right-radius: 46%;
    background-image: url(/moar/p/AyyRaptorstarion.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    background-position: top -10px left;
    
    
    
    border: var(--bigborder);

}

#sec5 h4 {
transform: rotate(-6deg) scale(1.5);
    width: 198px;
    margin-left: 325px;
    margin-top: 242px;
    position: absolute;
}







/* ------------- MEDIA --------------------------*/
@media screen and (max-width: 767px) {
    
       
    #Pookiestariano {
        display: none;
        transform: scale(0.3) translateX(-260px);
        margin: 0 auto;
        overflow: hidden;
    }
    
    
}




/* ------------- MEDIA --------------------------*/
@media only screen and (max-width: 1200px) {
    
   
    
    
    #Pookiestariano {
        transform: scale(0.6) translateX(-260px);
        margin: 0 auto;
        
    }
}






#two-boxxy {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}


#two-boxxy article {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    margin: 3em 0 3em 0;
    background-color: rgba(0, 0, 0, 0.55);
    color: rgba(131, 0, 15, 0.65);
    font-family: 'Courier New', sans-serif;
    max-width:  555px;
    border-radius: 4px;
    overflow: hidden;
   /* color: rgba(152, 0, 76, 0.65);  */
    align-items: center;
}

#two-boxxy article:hover {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    margin: 3em 0 3em 0;
    background-color: rgba(0, 0, 0, 0.55);
    color: rgba(131, 0, 15, 0.65);
    font-family: 'Courier New', sans-serif;
    max-width:  722px;
    border-radius: 4px;
    overflow: hidden;
   /* color: rgba(152, 0, 76, 0.65);  */
    align-items: center;
}

.diary_iframo {
    height: 600px;
    width: 600px;
    border:dotted 2px #000000;
}

.diary_iframo:hover {
    height: 777px;
    width: 777px;
    overflow-x: hidden;
}







    
    
  

footer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    
}

.mahblinkies img {
    height: 56px;
    width: auto;
}

/* -------------------------------------------------------------------- */
/* ------------- MEDIA --------------------------*/
@media screen and (max-width: 1080px) {
.aboutPookie {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    column-gap: 5px;
    margin: auto;
    margin-top:3em;
    margin-bottom: 3em;
    padding: 0.8em;
    min-width: 314px;
    max-width: 1000px;
    background-color: rgba(0, 0, 0, 0.63);
    border: 1px double var(--raven-purple);
    border-radius: 10px;
    xcolor: var(--pookie-red);
    color: var(--raven-purple);
    font-family: var(--Maco), 'Courier New', sans-serif;
    font-size: 1.5em;
    transform: scale(0.9)
    
}
    .vampayapookie {
    display: block;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    width: 100%;
    font-size: 1.5em
}
    .ppookietext {
    font-size:0.91em;
    width: 90%;
    margin:0;
    font-family: var(--Silkscreen)
    
}
.aboutPookie p {
        max-width: 100%;
    }   
    
.sliced_pookie {
   
    min-width: 90%;
    border-radius: 2%;
    border: var(--labelboxborder);
    box-shadow: 0px 0px 34px #520000;
    
}    
    
    .ppookieimg_s {
    width: 77%;
    border-radius: 2%;
    xborder: var(--labelboxborder);
    box-shadow: 0px 0px 10px 15px rgb(0, 0, 0);
   
}
}