/* HERE ARE BASIC STYLES */
:root {--body-bg-image: linear-gradient(#33171b, #e0715e, #f0ad70, #f2edf1);--content: #f4c1b9;}
@font-face {font-family: Nunito;src: url('8bitOperatorPlus8-Regular.ttf');}
@font-face {font-family: Nunito;src: url('8bitOperatorPlus8-Bold.ttf');font-weight: bold;}
@font-face {font-family: Nunito;src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');font-style: italic;}
@font-face {font-family: Nunito;src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');font-style: italic;font-weight: bold;}
body {font-family: 'Nunito', sans-serif;background-image: var(--body-bg-image); margin: auto;background-color: #f4c1b9;background-attachment:fixed;}
* { box-sizing: border-box;padding:0;margin:0;}
h1,h3 {color: #f2edf1;}
h2 {color: #c7694a;}
h1 {font-size: 25px;}
h2 {text-align: center;}
strong {color: #ED64F5;}
/*HERE ARE STYLE SETTINGS FOR TOP BANNER*/
#topbox {max-width:900px;margin: 0 auto;border: 1px solid #f48633;}
/* HERE ARE STYLE SETTINGS FOR NAVIGATION BAR*/
#navbar {margin: 0 auto;/*height: 40px;*/background-color: #f2edf1;max-width: 900px;border: 1px solid #f48633;z-index:500;margin-bottom:10px;
/* STICKY SETTINGS*/
position: -webkit-sticky;position: sticky;top: 10px;}
#navbar ul {display: flex;padding: 0;margin: 0;list-style-type: none;justify-content: space-evenly;align-items:flex-end;}
#navbar li {/*padding-top: 10px;*/text-align:center;}
#navbar li a {color: #b84424;font-weight: 800;text-decoration: none;}
#navbar li a:hover {color: #f48633;text-decoration: underline;}
/*HERE IS MAIN SECTION SETUP*/
main img {transition: transform 1.25s;}
main img:hover { transform: scale(1.12); cursor: url('cursors/lio3.png'),zoom-in;}
#nospace {font-size:0;} 
.content1 { display: flex;margin:0 auto;max-width:900px;}
.content2  { display: flex;margin:0 auto;max-width:900px;}
.content3 { display: flex;margin:0 auto;max-width:900px;}
.content1 main img { width: 100%;}
.content1 main img:hover{transform: scale(1.025)}
.content2 main img { width: 50%;}
.content2 main img:hover {transform: scale(1.06)}
.content3 main img { width: 33.333333333333333333333%;}
aside {margin:0 auto;background-color: #f2edf1;width: 200px;margin-right:10px;padding: 20px;font-size: 11px;border: 1px solid #f48633;
color: #c76b4d;text-align:center;order:1;
/*sticky area*/
position: -webkit-sticky;position: sticky;top: 106px;}
main {background-color: linear-gradient(#33171b, #e0715e, #f0ad70, #f2edf1);display:inline-block;padding: 0px;margin:0;
order: 2;line-height: 0px;border: 1px solid #f48633;}
.lightbox {display: none;position: fixed;z-index: 999;top: 0;left: 0;right: 0;bottom: 0;cursor:zoom-out;padding: 5%;background: rgba(0, 0, 0, 0.8);}
/* Unhide the lightbox when it's the target */
.lightbox:target {display: block;}
.lightbox span {display: block;width: 100%;height: 100%;background-position: center;background-repeat: no-repeat;
/*background-size: contain;*/ }
 @media only screen and (max-width: 800px) {
.lightbox span {background-size:contain;}
.content3 {flex-wrap: wrap;/*flex-direction:column-reverse;*/}
.content2 {flex-wrap: wrap;}  
.content1 {flex-wrap: wrap;}
/*.content3 main img { width: 33.3333334%;cursor:zoom-in;}
.content1 main img { width: 100%;cursor:zoom-in;}*/
aside {width: 100%;margin-right:0;margin-bottom:10px;order:2;}
main {order:1;}
 #navbar ul {flex-wrap: wrap;z-index:999;}
}