@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/bold/style.css');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rammetto+One&display=swap');


:root {
    /* Images */
    
    /*Put your entire header background image CSS here */
    --header-background: url(https://placehold.co/800x150) center no-repeat; 
    
    /*Fonts*/
    --body-font: "Yusei Magic", sans-serif; /* Body text font */
    --header-font: "Yusei Magic", serif; /* Font for headers */
    
    /* Colors */
    /* If you want a transparent background for any element, set the value to none */

    --light: #FFF9D9;
    --dark: #292824;
    --acc: #555;
    
    --background: #FFF9D9; /*Main background color*/
    --textcolor: #2A2925; /*Body text color*/
    
    --mainbg: none; /*Content background color*/
    --mainlink: #292824; /*Content link color*/
    --mainlinkhover: #8C674D; /*Content link hover color*/

    --navbg: none; /*Sidebar background color*/
    --navheader: #2A2925; /*Sidebar header color*/
    --navborder: none; /*If you don't want a border under the headers in the menu, change this to none*/
    
    --navlink: #607c00; /*Sidebar link color*/
    --navlinkbg: none; /*Sidebar link background*/
    --navlinkhover: #FFF; /*Sidebar link hover color*/
    --navlinkbghover: #5d1d5f; /*Sidebar link hover background*/
    
    --formbg: #ebebeb; /*Form element background*/
    --formtext:#666; /*Form element text color*/

    --maxHeight: 500px;
    --border: 2.5px solid var(--dark);
    --borderRad: 5px;

    --transition: ease 0.25s;
}

@font-face {
    font-family: "pigmo";
    src: url("assets/Pigmo-00.otf");
}

pigmo {
    font-family: "pigmo";
}



* { margin: 0; padding: 0; }

::selection {
color: #2A2925;
background: #F3E18F;
}
::-moz-selection {
color: #2A2925;
background: #F3E18F;
}

seethru {
    color: #292824BF;
}

img {
  max-width: 100%;
  height: auto;
  pointer-events: none;
}

monospace, voca {
    font-family: "M PLUS 1 Code", monospace;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

voca {
text-transform: uppercase;
font-weight: 700;
}

body { 
    /*background: linear-gradient(to bottom, rgba(229, 185, 135, 0.25) 0%,rgba(229, 185, 135, 0.25) 100%), url("assets/scrapBGLeft.png") 0px 79.15px repeat-y, url("assets/scrapBGRight.png") 0px 79.15px repeat-y, url("assets/plaidBG.gif") 0px 79.15px; 
    background-position: left top, left top, right top, left top;*/
    /*background: url("assets/plaidBG.gif") 0px 79.15px; */
    background: #f9edb4; /*linear-gradient(to bottom, #F3E18F 0%, #F9E49F 100%);*/
    background-image: linear-gradient(90deg, transparent 50%, #F3E18F 50%);
    background-size: 100px 100px;
    padding-top: 0px;
    color: var(--dark);
    font: 1em var(--body-font); 
    font-smooth: never;
}

i {
    vertical-align: -2.5%;
    margin-right: 2.5px;
}

.boogie i {
    vertical-align: -7.5%;
}

/*marquee {
  font-size: smaller;
  padding: 0.5em;
  padding-top:0.2em;
  color: var(--light);
  background-color: var(--dark);
  font-weight: 800;
  margin: -10px -10px;
}*/

.buttons marquee {
padding:0;
color: var(--light);
background-color: var(--dark);
font-size:0;
margin: 1em 0em;
}


#container { 
    max-width: 1000px;
    padding: 10px;
    margin: 10% auto;
    display: flex;
    gap:15px;
    flex-wrap:wrap;
    border: var(--border);
    box-shadow:0 0 0 5px var(--light);
    background: var(--light);
    /*background: url("assets/paperBG.gif") 0px 79.15px; padding-top: 0px;*/
    border-radius: var(--borderRad);
}

#main-header {
    height: 150px; 
    flex:1 0 100%;
    background: var(--light);
    background-size:cover;
}

main { 
    padding:15px;
    padding-left: 0;
    padding-right: 30px;
    background:none;
    flex:1 1 calc(70% - 45px);
    height: var(--maxHeight);
    overflow: auto;
    scrollbar-color: var(--dark) transparent;
    scrollbar-width: thin;
}

main a { 
    color: var(--mainlink); 
    font-weight: 700;
    transition: var(--transition);
}

main a:hover { 
    color: var(--mainlinkhover); 
}


main p {
    margin:.5em 0px .5em 0px;
    line-height:1.5;
}

main h1, main h2, main h3, main h4 {
  /*color: var(--dark);*/
  text-transform: uppercase;
  background: var(--dark);
    color: var(--light);
    padding: 5px 1em;
    border-radius: var(--borderRad);
}


main h1 {
    font: 2em var(--header-font); 
}

main h2 { 
    font: 1.7em var(--header-font);
}

main h3 { 
    font: 1.4em var(--header-font); 
    text-transform: none;
}

main h4 {
    font:0.9em var(--header-font);
    text-transform: none;
}

main img { 
    margin: 5px; 
    max-width:90%;
}

main ul { 
    list-style: inside; 
}

main ul li ul {
    margin-left:15px;
}

main input, main textarea, main select, main button, a.button { 
    background: var(--light); 
    color: var(--dark); 
    border: var(--border); 
    font: 1em var(--body-font);
    padding: 5px; 
    margin: 5px;
    text-decoration: none;
    border-radius: var(--borderRad);
}

main button, a.button {
    padding: 5px 1em;
    margin-left: 0;
    background: var(--dark); 
    color: var(--light); 
}
main button:hover, a.button:hover {
    color: var(--dark); 
    transition: var(--transition);
}

#content button:nth-of-type(4n-7):hover, a.button:nth-of-type(4n-7):hover {background-color: #FD671A;}
#content button:nth-of-type(4n-6):hover, a.button:nth-of-type(4n-6):hover {background-color: #F3E18F;}
#content button:nth-of-type(4n-5):hover, a.button:nth-of-type(4n-5):hover{ background-color: #A7C27D;}
#content button:nth-of-type(4n-4):hover, a.button:nth-of-type(4n-4):hover {background-color: #5BB2E7;}

a.button {
margin: 1em 0em;
margin-right: 1em;
}
 
p:has(+p a.button) {
    padding-bottom:0.5em;
}

h3:has(+div) {
   margin-bottom:0.5em;
}


.box {
border: var(--border); 
border-radius: var(--borderRad);
padding: 1em;
}

.box h1, .box h2 {
background: var(--dark);
color: var(--light);
padding: 5px 1em;
margin:-0.6em;
margin-bottom:0em;
border-radius: 0px;
}

h1 i, h2 i {
    vertical-align: -2.5%;
    font-size: 90%;
}

#sidebar {
    flex:1 1 30%;
    text-align: center;
}

.item {
    /*padding:15px;*/
    background:none;
    margin-bottom:15px;
}

.item img {
margin-bottom:1em;
}

.menu ul {
    list-style:none;
    display:inline;
    margin:0;
    text-align: center !important;
}

.menu ul li {
    display:block;
}

.menu a { 
    display: block; 
    text-decoration: none; 
    padding:5px;
    color: var(--light);
    background: var(--dark);
    margin-bottom:0.5em;
    border: var(--border);
    width: 50%;
    text-transform: uppercase;
    transition: var(--transition);
    border-radius: var(--borderRad);
}

.menu a:hover, .menu a:focus { 
    color: var(--dark);
    background: var(--light);
}

footer {
    background:var(--light);
    padding:15px;
    text-align:center;
    flex: 1 0 calc(100% - 30px);
}


/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  display: inline-block;
  max-width: 100%;
  margin: auto;
}

.col25 {width: calc(25% - 1.5em);}
.col50 {width: calc(50% - 1.5em);}
.col75 {width: calc(75% - 1.5em);}
.col60 {width: calc(60% - 1.5em);}
.col40 {width: calc(40% - 1.5em);}
.col70 {width: calc(70% - 1.5em);}
.col30 {width: calc(30% - 1.5em);}
.col20 {width: calc(20% - 1.5em);}
.col80 {width: calc(80% - 1.5em);}
.first {
  padding-right: 1.5em;
}
.morePadding {
  padding-left: 3em;
}


/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

.columnAlt {
  columns: 2;
  padding: 0px 15px; /* adds padding between the text and the border */
  padding-bottom:0.5em;
  column-gap: 5px;
}
/* this is extra */
.columnAlt p {
  margin-top: 0;
}

summary {
    background: var(--dark);
    color: var(--light);
    padding: 5px 1em;
}

details[open] summary {
    padding-bottom: 0.5em;
  margin-bottom: 0.25em;
}

details {
    margin-top:1em;
    border: var(--border);
    border-radius: var(--borderRad);
}

details p {
    padding: 5px 1em;
}

a.ytList {
    text-decoration: none;
}

/* Skip to content button */
#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--light);
    color:var(--mainlink);
    z-index:1001;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

 .item img {
        margin-top:5%;
    }


.boogie li:nth-child(4n+1) a:hover {background-color: #FD671A;}
.boogie li:nth-child(4n+2) a:hover {background-color: #F3E18F;}
.boogie li:nth-child(4n+3) a:hover {background-color: #A7C27D;}
.boogie li:nth-child(4n+4) a:hover {background-color: #5BB2E7;}


.buttons img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
image-rendering: pixelated;
filter: sepia(50%);
margin-right:-5px;
}

@import url('https://fonts.googleapis.com/css2?family=Rammetto+One&display=swap');
lim {
    font-family: "Rammetto One", sans-serif;
    font-size: 90%;
    text-transform: uppercase;
}

main img {
    filter: sepia(50%);
}


.linkedSites img {
width: 81px;
pointer-events: auto !important;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
filter: sepia(75%) contrast(90%);
}

.linkedSites img:hover {
filter: none;
transition: var(--transition);
}

.pixellate {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}

.warning {
    background: var(--dark);
    color: var(--light);
    padding: 1em;
    font-size: smaller;
    text-align: center;
    margin-bottom: 0.5em;
    border-radius: var(--borderRad);
}

.warning i {
font-size: 200%;
}

.bigger img {
    width:90%;
    margin-right:5px;
    width: 88px !important;
}

@keyframes floating {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-5px);
    }
    100% {
        transform: translatey(0px);
    }
}

@keyframes rotating {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

smaller {
    font-size: smaller;
}

small {
    font-size: small;
}


.scrollbox {
    border: var(--border);
    height: 100px;
    margin: 1em 0em;
    padding:0px 10px;
    overflow-y: auto;
    overflow-x:none;
    border-radius: var(--borderRad);
}


.scrollbox h4 {
background: var(--dark);
color: var(--light);
padding: 5px 1em;
border-radius: 0px;
text-align: left;
position: sticky;
/*margin:0px 0;*/
margin:-0.6em -0.7em;
margin-bottom:0em;
padding-bottom: 0.5em;
margin-bottom: 1em;
position: sticky;
top: 0em;
z-index: 2;
}

.scrollbox h4 a {
    color: var(--light);
    text-decoration: none;
}

.scrollbox hr, #rss hr {
border: none;
border-top: var(--border);
overflow: visible;
text-align: center;
border-radius: var(--borderRad);
}

#rss p{
    font-size:smaller;
}

.scrollbox mark, #rss mark {
    background: var(--dark);
    color: var(--light);
    padding: 1px 0.5em;
     font-size:smaller;
     border-radius: var(--borderRad);
     margin-right:5px;
     /*border: 1px dashed var(--light);
     box-shadow:0 0 0 1px var(--dark);*/
}

.noFilter {
 filter: sepia(0%);
}

.speech-bubble {
    position: relative;
    background: var(--dark);
    border-radius: .4em;
    max-height:50px;
    margin-top:0em;margin-right:0.5em;
    padding: 1em 2em;
    padding-bottom:1.5em;
    border-radius: var(--borderRad);
    margin-bottom:1em
}

.speech-bubble:after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-right-color: var(--dark);
    border-left: 0;
    margin-top: -20px;
    margin-left: -20px;
}


@media screen and (max-width:900px) {
#container {
        width: auto;
        margin: 2em;
    }
}

@media screen and (max-width:800px) {
    /*.column, .col25, .col75, .col50, .col60, .col40, .col70, .col30, .col20, .col80 {
    width: 100%;
    }*/

    .responsive {
        width: 100%;
    }

    main {
        height: auto;
        }

    #sidebar {
        flex-basis: 30%;
    }
    
    main {
        flex-basis: calc(80% - 45px);
        padding: 0em 0.5em;
    }

    .item img {
        width: 50%;
        margin-top:0%;

    }

    .buttons.info {
       display: none;

    }

    .speech-bubble {
        margin:0;
        padding-bottom:2em;
    }

    .socials {
        display:block;
    }

}

.tag {
  background:var(--dark);
  color:var(--light);
  font-weight: 800;
  text-align: left;
  padding:2.5px 0.5em;
  display:inline-block;
  font-size: x-small;
  margin-right: 5px;
  border-radius: var(--borderRad);
}