@import url('https://fonts.googleapis.com/css2?family=Cantata+One&family=Poller+One&family=Poppins:wght@300;400;700&family=Orbitron:wght@400;700;900&display=swap');

/* VARIABLES */
:root {
	--acc: #DC7D1F;
	--light: #F0E9DC;
	--dark: #271A15;
	--font: 'Poller One', cursive;
	--bg: url(https://icecreampizzer.neocities.org/bg/mainbg.png);
	--card: rgba(13, 9, 7,0.9);
	--liborder: rgba(220, 125, 31, 0.2);
	
}

.art {--bg: url(https://icecreampizzer.neocities.org/bg/artbg.png);}

.personal {--bg: url(https://icecreampizzer.neocities.org/bg/personalbg.png);}

.link {--bg: url(https://icecreampizzer.neocities.org/bg/linkbg.png);}

.loatm {
	--acc: #FEB206;
	--dark: #072222;
	--font: 'Orbitron', sans-serif;
	--bg: url(https://icecreampizzer.neocities.org/bg/loatmbg.png);
	--card: rgba(1, 7, 7, 0.9);
	--liborder: rgba(254, 178, 6, 0.2);
}

.tia {
	--acc: #FC7425;
	--dark: #27161F;
	--font: 'Cantata One', serif;
	--bg: url(https://icecreampizzer.neocities.org/bg/tiabg2.png);
	--card: rgba(13, 7, 10, 0.9);
	--liborder: rgba(67, 37, 52, 0.2);
}



/* BIG BOYS */
body {
	background-color: rgb(13, 9, 7); 
	background-image: var(--bg);
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0;
	font-size: 1rem;
	color: var(--light);
	font-family: 'Poppins', sans-serif;
}

a {
	color: var(--acc);
	font-weight: bold;
	transition: color 0.3s;
	text-decoration: none;
}

a:hover {
	color: #F0E9DC;
}

iframe {
	width: 100%;
	height: 250px;
	margin-bottom: 15px;
}

ul li {list-style-type: square; margin-bottom: 10px;}

hr {
	border-bottom: 1px solid #665954;
	opacity: 0.6;
	border-top: none;
	border-right: none;
	border-left: none;
	margin: 20px auto;
}

/* MAIN LAYOUT BLOCKS */
.container {
	max-width: 1100px;
	margin: auto;
	padding: 0;
}

.bg-darken {
	background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.5)) fixed;
}

.main-content {
	flex: 0 0 70%;
}

.main-content .p-md-25 {
	background: var(--card);
}

.main-header {
	margin-bottom: 15px;
	padding: 15px;
	text-align: center;
}

.main-header img {
	max-width:800px;
}

.main-footer {
	background: var(--dark);
	padding: 15px;
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.sidebar {
	flex: 0 0 27%;
	margin: 0 auto;
}

.sidebar img {
	max-width: 200px;
	max-height: 250px;
}

/* GLOBAL CUSTOMIZED STUFF */
.btn, .btn-side {
	margin: 5px;
	padding: 10px 15px;
	background: var(--dark);
	transition: all 0.2s ease;
	color: var(--acc);
	min-width:0;
	border: 2px solid var(--acc);
	cursor: pointer;
	font-weight: bold;
}

.btn-side {
	flex: 1 1 0;
	min-width: 50px;
}

.btn:hover {
	background: var(--acc);
	color: var(--dark);
}

.btn-side:hover {
	background: var(--acc);
	color: var(--dark);
	box-shadow: -4px 4px 0 var(--dark);
	transform: translate(4px, -4px);
}

.btn-active {
	background: var(--acc);
	color: var(--dark);
}

.nav {font-size: 1.1rem; display: flex; flex-flow: row wrap; justify-content: center;}

.nav-item {flex: 1 1 0; min-width: 100px;}

.active {background: var(--acc); color: var(--dark);}

.card {background: var(--card); padding: 15px;}

.sm-cap {font-size: 0.9rem; padding: 0 10px;}

.sc {font-variant: small-caps;}

.sticky {position: sticky; top: 0;}

.w-100 {width: 100%;}

.w-75, .w-md-75 {width: 75%;}

.w-50, .w-md-50 {width: 50%;}

.w-25 {width: 25%;}

/* PAGE SPECIFIC STUFF */
.banner {
	background-size: cover;
	max-width: 90%;
	background-repeat: no-repeat;
	margin: auto;
}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown .btn, #filterNav p {margin-bottom: 0;}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #271a15;
  min-width: 180px;
  left: 0;
  z-index: 1;
  overflow: auto;
  max-height: 300px;
  margin-left: 5px
}

/* Links inside the dropdown */
.dropdown-content div {
	cursor: pointer;
	transition: all 0.3s ease;
	padding: 6px;
}

.dropdown-content div:hover {background-color: var(--acc);}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .btn {background-color: var(--acc); color: var(--dark);}

.blogs {overflow: hidden;}

.blog-entry {
	text-align: justify;
	margin: 0 5px 40px;
	border-bottom: 1px dashed #f0e9dc;
	padding-bottom: 20px;
	display: none;
}

.blog-entry h1, .caption h1 {
	margin-bottom: 0;
	text-align: left;
}

.show {display: block;}

.changelog {
	max-height: 300px;
	padding: 0 10px;
	overflow: auto;
	text-align: left;
}

ul.changelog, ul {
	padding-left: 15px;
}

.changelog li {
	border-bottom: 1px solid var(--liborder);
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.changelog .first {border-bottom: none;}

.char-img {
	max-height: 390px;
	max-width: 100%;
	overflow: hidden;
}

.char-img-pers {
	max-height: 350px;
	max-width: 100%;
	overflow: hidden;
}

.img-fit {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.char-sidebar {flex: 0 0 40%; background: var(--card);}

.char-sidebar .sticky {
	overflow: hidden;
	height: 100vh;
	position: sticky;
	top:0;
}

.char-sidebar img {
	object-fit: cover;
	width: 100%;
	height: 100%;	
}

.char-sidetext div {padding: 20px 40px;}

.char-sidetext {
	position: absolute;
	padding: 15px 0;
	bottom: 0;
	width: 100%;
	height: 50vh;
	display: flex;
	align-items: end;
	color: #ffffff;
}

.char-sidetext h1 {font-size: 3rem; margin-bottom: 0;}

.char-sidetext h2 {margin-top: 0; margin-bottom: 0;}

.char-content {flex: 0 0 60%; background: var(--card); min-height: 100vh; display: flex;}

.char-content .content {padding: 5px 45px; margin:auto;}

.char-content .blurb {margin-bottom: 40px; margin-top: 30px;}

.char-content h2 {margin-top: 25px;}

.info-row {
	display: flex;
	justify-content: space-between;
}

.info-row p, .info-row span, .info-col {
	line-height: 1;
	margin: 6px 10px;
}

.info-row span {text-align: right;}

/* -- SPECIAL LITTLE BOYS -- */

/* STATUS CAFE */
#statuscafe {padding: .5em;}

#statuscafe-username {margin-bottom: .5em;}

#statuscafe-content {margin: 0 1em 0.5em 1em;}

/* MUSIC PLAYER BY ADILENE.NET */
#musicplayer{
    background: var(--dark); /* background color of player */
    border:2px solid var(--acc); /* border around player */
	min-width: 200px;
    max-width: 100%; /* width of the player */
}
	
.titlediv {
	font-size: 0.9rem;
	border-bottom: 2px solid var(--acc);
	padding: 5px;
	text-align: center;
	white-space: pre-line;
	min-height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: row wrap;
}

.songtitle {
    padding:5px; /* padding around song title */
    display:block;
}

.controls{
    font-size:18px !important; /* size of controls */
    background-color: var(--dark); /* background color of controls */
    text-align:center;
    width:100%;
}

.controls td {
    padding:8px 5px 0px 5px; /* padding around controls */
}

.seeking {
    background-color:var(--dark);/* background color of seeking bar */
    display:flex;
    justify-content: space-evenly;
    padding:5px; /* padding around seeking bar */
}

.current-time {
    padding-right:5px;
}

.total-duration {
    padding-left:5px;
}

i.fas:hover{
    cursor: pointer;
}

i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward {
    color: var(--acc); /* color of controls */
}
    
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background-color: var(--dark); /* background color of seeking bar - make the color same as .seeking background color */
}
    
input[type=range]:focus {
    outline: none;
}
    
/* settings for chrome browsers */
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 2px; /* thickness of seeking track */
	cursor: pointer;
	background: var(--acc); /* color of seeking track */
}
    
input[type=range]::-webkit-slider-thumb {
	height: 10px; /* height of seeking square */
	width: 10px; /* width of seeking square */
	border-radius: 0; /* change to 5px if you want a circle seeker */
	background: var(--acc); /* color of seeker square */
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -4.5px; 
}
    
/* settings for firefox browsers */
input[type=range]::-moz-range-track {
	width: 100%;
	height: 2px; /* thickness of seeking track */
	cursor: pointer;
	background: var(--acc); /* color of seeking track */
}
    
input[type=range]::-moz-range-thumb {
	height: 10px; /* height of seeking square */
	width: 10px; /* width of seeking square */
	border-radius: 0; /* change to 5px if you want a circle seeker */
	background: var(--acc); /* color of seeker square */
	cursor: pointer;
	border:none;
}
	

/* TEXT STYLES */
h1, h2, h3, h4, h5 {font-family: var(--font);}

h1 {font-size: 2.5rem; margin-bottom: 20px; margin-top: 40px;}

h2 {font-size: 1.7rem; margin-bottom: 15px; margin-top: 40px;}

h3 {font-size: 1.4rem; margin-bottom: 10px;}

p {line-height: 1.6; margin-top: 0;}

.title {font-size: 5rem; margin: 0;}

.subtitle {font-size: 3rem;}

.accent {color: var(--acc);}

.bg-accent {background: var(--acc);}

.warning {color: #DA553A; font-weight: bold;}

.bg-warning {background: #DA553A; padding: 10px;}

.bg-warning h2 {margin-top: 20px;}

.dots {border-bottom: 2px dotted;}

.text-center {text-align: center;}

.text-left, .text-left-center {text-align: left;}

.text-right, .text-right-center {text-align: right;}

.text-justify {text-align: justify;}

/* FLEX STUFF */
.column, .column-row {
	display: flex;
	flex-flow: column wrap;
}

.row {
	display: flex;
	flex-flow: row wrap;
}

.row-align-center {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

.reverse {flex-direction: row-reverse;}

.flex {display: flex;}

.center {align-items: center; justify-content: center;}

.justify-center {justify-content: center;}

/* MODAL STUFF - GLOBAL */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: rgba(13, 9, 7,0.95);
  overflow: auto;
  transition: all 0.2s;
}

.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 100%;
  max-width: 1200px;
}

.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  transition: 0.3s ease;
}

.close:hover,
.close:focus {
  color: var(--acc);
  text-decoration: none;
  cursor: pointer;
}

.mySlides {display: none;}

.prev,
.next {
	cursor: pointer;
	position: absolute;
	width: auto;
	min-height: 20vh;
	top: 45vh;
	margin-top: -50px;
	padding: 16px;
	display: flex;
	align-items: center;
	color: white;
	font-weight: bold;
	font-size: 20px;
	transition: 0.3s ease;
	user-select: none;
	-webkit-user-select: none;
}

.next {right: 0;}

.prev:hover,
.next:hover {
	background-color: rgba(0,0,0,0.9);
}

img.demo {
	opacity: 0.6;
}

.active,
.demo:hover {
	opacity: 1;
}

div.hover-shadow, img.hover-shadow {
	transition: 0.3s ease;
}

.hover-shadow:hover {
	box-shadow: -4px 4px 0 var(--acc);
	transform: translate(4px, -4px);
	cursor: pointer;
}

/* MODAL STUFF - GALLERY */
.row.gallery {
	justify-content: center;
	text-align: center;
}

.row.gallery p {
	opacity: 0.8;
	margin-top: -5px;
}	

.row.gallery h3 {
	margin-top: 0;
	margin-bottom: 15px;
}

.row.gallery .col-3 img {
	max-height: 200px;
	max-width: 150px;
	margin: 8px;
}

.row.gallery .col-4 img {
	max-height: 250px;
	max-width: 200px;
	margin: 8px;
}

.row.gallery .col-3 div {
	margin: 8px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.portrait {
	max-height: 100vh;
	max-width: 90%;
}

.portrait-display {
	display: flex;
	justify-content:center;
}

.caption {
	padding: 15px 45px;
}

.caption h1 {
	text-align: center;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
}

/* COLUMNS */
.col-1 {flex: 0 0 8.33%;}

.col-2 {flex: 0 0 16.33%;}

.col-3 {flex: 0 0 25%;}

.col-4 {flex: 0 0 33.33%;}

.col-5 {flex: 0 0 42%;}

.col-6 {flex: 0 0 50%;}

.col-7 {flex: 0 0 58%;}

.col-8 {flex: 0 0 66.67%;}

.col-9 {flex: 0 0 75%;}

.col-11 {flex: 0 0 91.67%;}

.col-12 {flex: 0 0 100%;}

.col {flex: 1 1 0;}

/* PADDING AND MARGINS */
.pt-10, .py-10, .p-10 {padding-top: 10px;}

.pb-10, .py-10, .p-10 {padding-bottom: 10px;}

.pl-10, .px-10, .p-10 {padding-left: 10px;}

.pr-10, .px-10, .p-10 {padding-right: 10px;}

.pt-15, .pt-md-15, .py-15, .p-15, .p-md-15 {padding-top: 15px;}

.pb-15, .pb-md-15, .py-15, .p-15, .p-md-15 {padding-bottom: 15px;}

.pl-15, .pl-md-15, .px-15, .p-15, .p-md-15 {padding-left: 15px;}

.pr-15, .pr-md-15, .px-15, .p-15, .p-md-15 {padding-right: 15px;}

.px-20, .p-20, .p-md-20 {padding-left: 20px; padding-right: 20px;}

.pt-20, .py-20, .py-md-20, .p-20, .p-md-20 {padding-top: 20px;}

.pb-20, .py-20, .py-md-20, .p-20, .p-md-20 {padding-bottom: 20px;}

.p-25, .p-md-25 {padding: 25px;}

.p-30, .p-md-30 {padding: 30px;}

.py-30, .py-md-30 {padding-top: 30px; padding-bottom: 30px;}

.mt-0, .my-0, .m-0 {margin-top: 0;}

.mb-0, .my-0, .m-0 {margin-bottom: 0;}

.ml-5, .mx-5, .m-5 {margin-left: 5px;}

.mr-5, .mx-5, .m-5 {margin-right: 5px;}

.mb-10, .my-10, .m-10 {margin-bottom: 10px;}

.mt-10, .my-10, .m-10 {margin-top: 10px;}

.ml-10, .ml-md-10, .mx-10, .m-10 {margin-left: 10px;}

.mr-10, .mr-md-10 .mx-10, .m-10 {margin-right: 10px;}

.mx-n10 {margin-left: -10px; margin-right: -10px;}

.ml-15, .ml-md-15, .mx-15, .m-15 {margin-left: 15px;}

.mr-15, .mr-md-15, .mx-15, .m-15 {margin-right: 15px;}

.mt-15, .my-15, .m-15 {margin-top: 15px;}

.mb-15, .my-15, .m-15 {margin-bottom: 15px;}

.ml-20, .ml-md-20, .mx-20, .m-20 {margin-left: 20px;}

.mr-20, .mr-md-20, .mx-20, .m-20 {margin-right: 20px;}

.mx-n20 {margin-left: -20px; margin-right: -20px;}

.mt-20, .my-20, .m-20 {margin-top: 20px;}

.mb-20, .my-20, .m-20 {margin-bottom: 20px;}

.mt-30, .my-30 {margin-top: 30px;}

.mx-auto {margin-left: auto; margin-right: auto;}

/* RESPONSIVE STUFF */
@media (max-width: 768px) {
	.w-md-75 {
	  max-width: 75%;
  }
}

@media (max-width: 768px) {
  .row, .row-align-center {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .column-row {
    flex-flow: row wrap;
  }
}

@media (max-width: 960px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .sidebar, .main-content {
    flex: 0 0 100%;
  }
}

@media (max-width: 768px) {
  .btn-side {
	min-width: 90px;
  }
}

@media (max-width: 768px) {
  .nav-title, .nav-items {
	margin: auto;
  }
}

@media (max-width: 768px) {
  .text-left-center, .text-right-center {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .p-md-20, .p-md-30 {
	padding: 15px;
  }
}

@media (max-width: 768px) {
  .px-md-15 {
	padding: 0;
  }
}

@media (max-width: 768px) {
  .portrait, .w-md-50 {
    max-width: 70%;
  }
}

@media (max-width: 768px) {
  .ml-md-20, .ml-md-15, .ml-md-10 {
	  margin-left: 0;
  }
}

@media (max-width: 768px) {
  .mr-md-20, .mr-md-15, .mr-md-10 {
	  margin-right: 0;
  }
}

@media (max-width: 768px) {
	.row-gallery .col-3 img {
	max-height: 250px;
	max-width: 200px;
	}
}

@media (max-width: 768px) {
	.char-content .content, .char-sidetext div {
		padding: 25px;
	}
}