header div {

    margin-bottom: 1em;
}

#item-counter {
	background: linear-gradient(0deg, #ce7510 5%, #b82525 100%);
	border: 5px outset #A41A1A;
		width: 210px;
			position: relative;
				top: 10px
	
}

a:has(img) {
	background: linear-gradient(0deg, #ce7510 5%, #b82525 100%);
	border: 5px outset #A41A1A;
	font-family: "Crayon";
    text-decoration: none;
}

hr {
	
    border: none;
    border-bottom: 1px dashed var(--accent);
}

/* tag button styles */

.tag, #reset {
	font-size: 15px;
    margin-bottom: 0.5em;
    padding: 0.5em;
    background: linear-gradient(0deg, #ce7510 5%, #b82525 100%);
	border: 5px outset #A41A1A;
	font-family: "Crayon";
	position: relative;
	bottom: 120px;
}

.tag::before {
    content: "#";
	
}

/* change accent color for different tag categories */
.color-coded {--accent: rgb(180, 25, 25);}

/* styles for when a tag is selected */
.active {
    background-color: var(--accent);
    color: var(--bg);
}

#gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.item {
    width: calc(20vw - 1.5em);
    height: calc(20vw - 1.5em);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--accent);
}

.hidden, .item-info {
    display: none;
}

#to-top-btn {
	
    display: none;
    position: fixed;
    padding: 15px;
    bottom: 20px;
    right: 30px;
    z-index: 1;
    background: linear-gradient(0deg, #ce7510 5%, #b82525 100%);
	border: 5px outset #A41A1A;
	font-family: "Crayon";
}

footer {
	  background: linear-gradient(0deg, #ce7510 5%, #b82525 100%);
	border: 5px outset #A41A1A;
	font-family: "Crayon";
    margin-top: 3em;
	font-size: 15px;
	width: 320px;
	text-align: center
}


/*  */
/* styles for controlling how the gallery thumbnails look */
/*  */

/* defaults */
.item img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.zoom img {object-fit: none;}

.crop img {object-fit: cover;}

.top-left img       {object-position: top left;}
.top-center img     {object-position: top center;}
.top-right img      {object-position: top right;}

.center-left img    {object-position: center left;}
.center-center img  {object-position: center;}
.center-right img   {object-position: center right;}

.bottom-left img    {object-position: bottom left;}
.bottom-center img  {object-position: bottom center;}
.bottom-right img   {object-position: bottom right;}


/*  */
/* Lightbox styles */
/*  */

#lightbox {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(10, 10, 10, 0.90);
    color: white;

    display: none;

    overflow-y: auto;
}

#close-btn {
    z-index: 2;
    position: absolute;
    top: 1em;
    right: 1em;

    font-size: 24px;
    color: white;
    cursor: pointer;
}

#lightbox .flex {
    display: flex;
    gap: 2em;
    justify-content: space-between;

    height: 100vh;
    padding: 0 1em;
}

/* the main image in the lightbox */
#lightbox-img {
    margin: 1em 0;
    width: 60%;
}

#lightbox-img img {
    /* make it centered and as big as possible in the containing div */
    object-fit: scale-down;
    object-position: center;

    width: 100%;
    height: 100%;
    margin: 0 auto;
}

/* the info section of the lightbox */
#lightbox-info {
    display: flex;
    flex-direction: column;
    margin: auto 0 1em 0;
    width: 35%;
}

#lightbox-title, #lightbox-date, #lightbox-desc, #lightbox-tags {
    word-break: break-word;
    overflow-y: auto;
    scrollbar-width: thin;
    margin-bottom: 0.5em;
}

#lightbox-date, #lightbox-tags {
    text-align: right;
    font-family: 'Courier New', Courier, monospace;
}

#lightbox-desc {
    max-height: 30em;
    margin-bottom: 1.5em;
}
#lightbox-desc img {max-width: 45%;}
#lightbox-desc video, #lightbox-desc iframe {max-width: 90%;}

#lightbox-tags {
    margin-top: 0;
    padding-left: 0;
    list-style-type: none;
}

#lightbox-tags li {
    background-color: white;
    color: black;
    border: 1px solid white;
    display: inline-block;
    margin-left: 0.5em;
    margin-bottom: 0.5em;
}
#lightbox-tags li::before {content: ' #';}
#lightbox-tags li:nth-child(even) {
    background-color: lightgray; 
    border: 1px solid lightgray;
}

/* styles for navigation buttons & progress tally */
#lightbox-nav {
    display: flex;
    justify-content: space-between;
    
    margin-top: 2em;
}

#prev-btn, #next-btn {
    padding: 0.5em 4em;
    cursor: pointer;

    min-width: 10em;

    border: 1px solid white;
    background-color: rgba(0, 0, 0, 0);
    color: white;
}

#progress {
    padding: 0.5em;
}


/*  */
/* responsive section */
/*  */

/* dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: rgb(19, 19, 19);
        --txt: rgb(221, 221, 221);
        --accent: rgb(63, 151, 73);
    }
    .color-coded {--accent: rgb(236, 115, 115);}
}

/* scaling */
@media screen and (max-width: 1200px) {
    .item {
        width: calc(25vw - 2em);
        height: calc(25vw - 2em);
    }
}

@media screen and (max-width: 1000px) {
    .item {
        width: calc(33vw - 2em);
        height: calc(33vw - 2em);
    }
}


/* mobile view */
@media screen and (max-width: 800px) {
    /* gallery */
    .item {
        width: calc(50vw - 2em);
        height: calc(50vw - 2em);
    }

    /* lightbox */
    #lightbox {
        overflow-y: scroll;
    }

    #lightbox .flex {
        margin-top: 0;
        flex-direction: column;
        height: auto;
        gap: 1em;
    }

    #close-btn {
        position: static;
        display: block;
        text-align: right;
        padding-top: 0.5em;
        padding-right: 0.5em;
    }

    #lightbox-img {
        width: 100%;
        height: 65vh;
    }
    
    #lightbox-img img {
        height: 100%;
    }

    #lightbox-info {
        margin-top: 0;
        width: 100%;
        gap: 0.5em;
    }

    #lightbox-title, #lightbox-date, #lightbox-desc, #lightbox-tags {
        margin-bottom: 0;
        max-height: none;
    }

    #lightbox-nav {
        order: -1;
        margin-top: 0;
    }
}




@font-face {
    font-family: "Helvetica Punk";
    src: url('https://ironiczombie.neocities.org/fonts/HelveticaPunk.eot');
    src: url('https://ironiczombie.neocities.org/fonts/HelveticaPunk.eot?#iefix') format('embedded-opentype'),
        url('https://ironiczombie.neocities.org/fonts/HelveticaPunk.woff2') format('woff2'),
        url('https://ironiczombie.neocities.org/fonts/HelveticaPunk.woff') format('woff'),
        url('https://ironiczombie.neocities.org/fonts/Helvetica%20Punk.ttf') format('truetype'),
        url(https://ironiczombie.neocities.org/fonts/HelveticaPunk.svg#HelveticaPunk') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: "Crayon";
    src: url('https://ironiczombie.neocities.org/fonts/crayon%20font/CrayonHandRegular2016Demo.eot');
    src: url('https://ironiczombie.neocities.org/fonts/crayon%20font/CrayonHandRegular2016Demo.eot?#iefix') format('embedded-opentype'),
        url('https://ironiczombie.neocities.org/fonts/crayon%20font/CrayonHandRegular2016Demo.woff2') format('woff2'),
        url('https://ironiczombie.neocities.org/fonts/crayon%20font/CrayonHandRegular2016Demo.woff') format('woff'),
        url('https://ironiczombie.neocities.org/fonts/crayon%20font/CrayonHandRegular2016Demo.ttf') format('truetype'),
        url('https://ironiczombie.neocities.org/fonts/crayon%20font/CrayonHandRegular2016Demo.svg#Crayon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/*Grid used to put all my stuff in */

.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(1, 1fr);
    gap: 9px;
	
}
    /*div1 is for the header */
.div1 {
    grid-column: span 3 / span ;
    grid-row: span 1 / span 1;
	grid-column-start: 3;
	background: linear-gradient(0deg, #ce7510 5%, #b82525 100%);
	border: 5px outset #A41A1A;
		
}
/*div2 is for the blog */
.div2 {
    grid-column: span 3 / span 3;
    grid-row: span 5 / span 5;
    grid-column-start: 2;
    grid-row-start: 3;
	background: linear-gradient(0deg, #ce7510 5%, #b82525 100%);
	border: 5px outset #A41A1A;
}
/*div3 is for the status box */
.div3 {
    grid-row: span 3 / span 3;
    grid-column-start: 5;
    grid-row-start: 3;
	background: linear-gradient(0deg, #ce7510 5%, #b82525 100%);
	overflow-x: hidden;
	line-height: 23px;
	border-radius: 10px;
	box-shadow: 5px 5px 2px 0px rgba(79, 10, 42, 0.65);
	border: 5px outset #A41A1A;
	
	
}
/*div4 is for the guestbook */
.div4 {
    grid-row: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 6;
	background: linear-gradient(0deg, #ce7510 5%, #b82525 100%);
	border: 5px outset #A41A1A;
	line-height: 18px;

}
/*div5 is for the outside links */
.div5 {
    grid-column: span 5 / span 5;
    grid-column-start: 1;
    grid-row-start: 8;
	background: linear-gradient(0deg, #ce7510 5%, #b82525 100%);
	border: 5px outset #A41A1A;
		
}
/*div6 is for the links to other pages */
.div6 {
    grid-row: span 5 / span 5;
    grid-column-start: 1;
    grid-row-start: 3;
	background: linear-gradient(0deg, #ce7510 5%, #b82525 100%);
		text-decoration: underline;
	line-height: 40px;
		border: 5px outset #A41A1A;
}

    

body {
	background: #FFFFFF 
		url(https://ironiczombie.neocities.org/images/pexels-vi-t-anh-nguy-n-2150409023-31608281.jpg) no-repeat top right;
	background-size: cover
		
	
}
/*Title */
h1 {
  	font-family: "Helvetica Punk";
	text-align: center;
    font-size: 30px;
    color: black;
	padding: 5px;
	background: linear-gradient(0deg, #ce7510 5%, #b82525 100%);
	border: 5px outset #A41A1A;
		
		
}
/*subtitle*/
h2 {
	font-family: "Helvetica Punk";
	text-align: center;
	
}
/*Everything inside the grid */
div {
	display: flex;
  justify-content: center;
	font-family: "Crayon";
	text-align: center
}
/*Drawing of me */
h4 {
	position: absolute;
	left: 30px;
	clip-path: polygon(50% 0%, 69% 21%, 98% 35%, 82% 63%, 79% 91%, 50% 81%, 21% 91%, 19% 61%, 2% 35%, 30% 25%);
}
	
	h5 {
	Position: relative;
		top: 130px;
	left: -25px;
	font-size: 20px;
	
}
/*Links to other pages*/


.w3-bar-item {
	font-size: 20px;
	background: linear-gradient(0deg, #ce7510 5%, #b82525 100%);
	border: 5px outset #A41A1A;
	text-align: center;
	position: relative;
	top: -130px;
	left: 600px;
	font-family: "Crayon";
}

.w3-container {
	font-family: "crayon";
	background: linear-gradient(0deg, #ce7510 5%, #b82525 100%);
	border: 5px outset #A41A1A;
	line-height: 15px;
	width: 500px;
	position: relative;
	left: 400px;
	top: -120px
	
}
a {
	color: black
	
}

nav {
	font-family: "crayon";
	background: linear-gradient(0deg, #ce7510 5%, #b82525 100%);
	border: 5px outset #A41A1A;
	width: 150px;
	color: black
	
}	



/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position:fixed;
top:2em;
margin-bottom:20px;
left:0;
margin-left:20px;
display:flex;
z-index:99;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}
#glenplayer02 a {text-decoration:none;}
 
#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}
 
.music-controls {
user-select:none;
-webkit-user-select:none;
width:13px;
font-size:13px;
cursor:pointer;
}
 
.playy, .pausee {color:#fff;} /* color of play & pause buttons */
 
.pausee {display:none;}
 
.sonata {
margin-left:10px;
color:#000; /* color of music note symbol */
}
 
.labeltext {
margin-left:1px;
font-family:courier new;
font-size:9px;
color:#fff; /* color of song title */
}