/* GENERAL */
:root {
  --primary: #8596b0;
  --secondary: #a3afc3;
  --bg-text: #ffffff;
  --light-bg-text: #8596b0;	
  --dark-bg-text: #ffffff;	
  --field-text: #666;	
  --black: #000000;
  --white: #ffffff;
}
html {
    scroll-behavior: smooth;
    scrollbar-color: transparent;
    scrollbar-color: var(--primary) transparent;
    scrollbar-width: thin;
}
html, body {
    margin: 0;
    height:100%;
    width:100%;
    padding:0;
	text-wrap: balance;
}
.center {
    display: flex;
    justify-items: center;
    align-items: center;
	justify-content: center;
}
.post, .page {
    margin: 0;
}
.flex{
	display: flex;
}
a {
	color: inherit;
}
/* BUTTON STYLING */
.btn {
	cursor: pointer;
	overflow: hidden;
	z-index: 1;
	padding: 0;
}
.btn a {
	transition: 0.5s;
	color: var(--white);
    text-decoration: none;
}
.btn a::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0%;
	background-color: var(--primary);
	z-index: -1;
	border-radius: 50% 50% 0 0;
	transition: 0.5s;
}
.btn:hover a::before {
	height: 180%;
}
.page-button .btn {
    background-color: var(--primary);
    height: 40px;
}
/* SPINNER STYLING */
.spinner-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border-top: 4px solid #fff;
  border-right: 4px solid transparent;
  animation: spinner-rotate 1s linear infinite;
}

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}
/* DARK/LIGHT MODE STYLING */
.switch-to-dark {
	display: block;
}
.switch-to-light {
	display: none;
}
button.btn-theme-toggle {
    margin: 0 auto 1em;
    display: block;
}
.btn-theme-toggle {
	--theme-toggle-bkg-color: #fff;
	color: var(--primary);
	border: none;
	border-radius:0.3em;
	text-transform: uppercase;
}
.dark-theme .btn-theme-toggle {
	--theme-toggle-bkg-color: #fff;
}

.btn-theme-toggle {
    background-color: var(--theme-toggle-bkg-color);
}
body {
  	--bkg-color: #fff;
	--txt-color: #000;
}
body.dark-theme {
  	--bkg-color: #121212;
	--txt-color: #fff;
}
@media (prefers-color-scheme: dark) {
  /* defaults to dark theme */
  	body {
    	--bkg-color: #121212;
		--txt-color: #fff;
  	}
  	body.light-theme {
    	--bkg-color: #fff;
		--txt-color: #000;
  	}
	
	.switch-to-light {
		display: block!important;
	}
	.switch-to-dark {
		display: none!important;
	}
}
body {
 	background: var(--bkg-color);
	color: var(--txt-color);
}

.dark-theme .switch-to-light {
		display: block!important;
	}
.dark-theme	.switch-to-dark {
		display: none!important;
	}
.light-theme .switch-to-dark {
		display: block!important;
	}
.light-theme .switch-to-light {
		display: none!important;
	}
 .switch-to-light {
    display: none;
}


/* MAGAZINE POPUP */
.magazine-popup {
	color: var(--bg-text);
    width: 64px;
    height: 64px;
    background: var(--primary);
    position: fixed;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 300ms ease-in-out 0s, box-shadow 300ms ease-in-out 0s;
    border: none;
    bottom: 48px;
    left: 48px;
    text-align: center;
	display: table;
	z-index: 99;
}
.magazine-popup a {
    color: inherit;
    text-decoration: none;
    display: table-cell;
    vertical-align: middle;
}
.magazine-popup:hover {
    transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, 0.08) 0px 11px 13px -2px;
}
.magazine-popup .fa-book-open-reader {
    font-size: 30pt;
}
.boxzilla {
    padding: 1em 2em;
    background: var(--secondary)!important;
    text-align: center;
    color: #fff!important;
	border-right: 3px solid var(--primary)!important;
    border-top: 3px solid var(--primary)!important;
}
.mag-arch {
    margin-top: 1rem;
}
.mag-pop-up-img {
    border: 1px solid #fff;
	transition: box-shadow 300ms ease-in-out 0s;
}
.mag-pop-up-img:hover {
    box-shadow: var(--primary) 0px 8px 20px 0px;
	cursor: auto;
}
span.boxzilla-close-icon {
    color: var(--primary)!important;
}
.boxzilla a {
    color: inherit;
    text-decoration: none;
}