@import url('https://fonts.googleapis.com/css2?family=Genos&display=swap');


html {
    zoom: 130%;
}


body {
  margin: 0;
  padding: 0;
  font-family: 'Courier New', monospace; /* or whatever fits your aesthetic */
  display:block;
  width:1130px;
  overflow: auto; 
  overflow-x: hidden;
  justify-content: center;
  align-items: center;
  background-color: #000; 
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.3); /* moody semi-transparent dark veil */
  z-index: 0;
}
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  z-index: -1;
}
.bg-audio {
  display: none;
}

::selection {
    color: #007F30;
    background:transparent;
    text-decoration: dashed underline;
}


#structure {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 674px;
    font-family: ms ui gothic;
    margin-top: 60px;
}

#contain {
    display: flex;
    border: 2px solid black;
    padding: 5px;
    width: 660px;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(#007F30, #91ff91);
    box-shadow: inset 0px 0px 0px 1px white, 0 0 6px #00a300;
}

/* HEADERS SECTION */

.header {
    border: 2px solid #008300;
    height: 180px;
    border-radius: 50px 150px 0 0;
    padding: 3px;
    font-family: 'Genos', sans-serif;
    color: white;
    font-size: 3.2em;
    webkit-background-clip: text;
    text-shadow: 0 0 2px #007F30, 0 0 5px #00a300;
    box-shadow: inset 0px 0px 0px 1px white, 0 0 6px #00a300;
    background: url(https://file.garden/aA-GqMXzgguGJDg8/deleted/bag);
    background-size: cover;
    margin-bottom: 5px;
}

.header h1 {
    transition: all 0.5s;
}

.header h1:hover {
    webkit-filter: blur(0.5px);
filter: blur(2px);
}

.sub-head {
    border: 2px solid #008300;
    height: 50px;
    margin-bottom: 3px;
    padding: 5px;
    text-align: center;
    background: linear-gradient(#00a300, #91ff91);
    box-shadow: inset 0px 0px 0px 1px white, 0 0 6px #91ff91;
}

.sub-head p {
    background: linear-gradient(#f3edf9, #e4d8f0, #e4d8f0);
    color: #007F30;
    height: 42px;
    margin: 0;
    border: double #008300;
    box-shadow: inset 0px 0px 0px 1px #ffffffaa;
}

.sub-head b {
    text-shadow: -1px 0 #007F30, 0 1px #007F30, 1px 0 #007F30, 0 -1px #007F30;
    color: white;
}

/* FLEX BOXES */

.left {
    
}

.right {
    
}

/* SPIRAL PNG */

.spiral {
    filter: drop-shadow(0px 0px 1px #000000) drop-shadow(0px 0px 1px #000000) drop-shadow(0px 0px 1px #000000);
    pointer-events: none;
    image-rendering: pixelated;
    position: absolute;
    transform: translate(189px, 0px);
    z-index: 5;
}

/* BOXES SECTIONS */

.box1 {
    width: 200px;
    border: 2px solid #008300;
    height: 460px;
    padding: 5px;
    border-radius: 0 0 10px 10px;
    background: #fcf9ff;
    overflow:auto;
}

.box2 {
    width: 422px;
    border: 2px solid #008300;
    height: 460px;
    padding: 5px;
    border-radius: 0 0 10px 10px;
    background: #fcf9ff;
    margin-left: 10px;
}


a {
    margin: 0;
    font-family: 'Genos', sans-serif;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0 3px #000;
    color: mediumpurple;
    text-decoration: none; 
}
/* Below image */

.potty {
  position: absolute;
  z-index: 7;
    width:159px;
height:172px;
  transform: translate(370px, 635px);
  pointer-events: none;
  filter: drop-shadow(0px 0px 6px #000000);
}

.potty img {
  width:159px;
height:172px;
  display: block;
}

.hanger {
  position: absolute;
  z-index: 7;
    width:160px;
height:160px;
  transform: translate(810px, 185px);
  pointer-events: none;
  filter: drop-shadow(0px 0px 6px #000000);
}

.hanger img {
    width:160px;
height:160px;
  display: block;
}

.vase {
  position: absolute;
  z-index: 7;
    width:159px;
height:172px;
  transform: translate(810px, 595px);
  pointer-events: none;
  filter: drop-shadow(0px 0px 6px #000000);
}

.vase img {
  width:159px;
height:172px;
  display: block;
}

.floway {
  position: absolute;
  z-index: 7;
    width:412px;
height:408 px;
  transform: translate(450px, -113px);
  pointer-events: none;
  filter: drop-shadow(0px 0px 6px #000000);
}

.floway img {
    width:412px;
height:408 px;
  display: block;
}


.floatie {
  position: absolute;
  z-index: 7;
    width:120px;
height:125px;
  transform: translate(210px, 700px);
  pointer-events: none;
  filter: drop-shadow(0px 0px 6px #000000);
}

.floatie img {
width:120px;
height:125px;
display: block;
transform: scaleX(-1);    
}


.post {
  position: absolute;
  z-index: 7;
    width:400px;
height:559px;
  transform: translate(10px, 230px);
  pointer-events: none;
  filter: drop-shadow(0px 0px 6px #000000);
}

.post img {
width:400px;
height:559px;
display: block;
transform: scaleX(-1);    
}















/* LACED IMAGE */

.lace {
    border-width: 8px;
    border-style: solid;
    border-image: url(https://file.garden/ZAkEYVkUN2HXHCu3/web/graphics/plainlace.png) 8 fill round;
    width: 180px;
    height: 162px;

}

/* INDEX SECTION */

.nav {
    border: double black;
    padding: 5px;
    border-radius: 5px;
    margin-top: 5px;
    background: white;
    height: 260px;
    overflow-y: scroll;
}

.navhead {
    margin: 0;
    text-align: center;
    background: linear-gradient(to top, #e8dcf3, white);
    border: 1px solid #008300;
    border-radius: 5px 5px 0 0;
    font-size: 1.3em;
    text-shadow: -1px 0 #007F30, 0 1px #007F30;
    color: #007F30;
     margin-bottom: 5px;
}

.nav a {
    text-decoration: none;
    font-weight: bold;
    text-shadow: #16ff16 1px 1px;
    color: #007F30;
}

.nav a:hover {
    font-style:italic;
}

blockquote { 
    font-style: italic; 
    color: #008300;
}

/* CATEGORIES SECTION */

.notehead {
    margin: 0;
    text-align: center;
    background: linear-gradient(to top, #e8dcf3, white);
    border: 1px solid #008300;
    border-radius: 5px 5px 0 0;
    font-size: 1.3em;
    text-shadow: -1px 0 #007F30, 0 1px #007F30;
    color: #007F30;
}

.note {
    margin-top: 5px;
    height: auto;
    border-radius: 5px;
    border: double #008300;
    background: #fbf7ff;
    padding: 5px;
    overflow-y: scroll;
}

.note ul {
    list-style-type: none;
    padding:0;
}

.note li {
    margin-bottom:5px;
}

/* PAPER BACKGROUND */

.notepaper {
    width: 420px;
    height: 460px;
    image-rendering: pixelated;
    filter: drop-shadow(0px 0px 2px #000000);
    position:absolute;
    z-index:1;
    opacity: 50%;
}

/* ENTRY SECTION */

.entriesholder {
    overflow-y: scroll;
    height: 450px;
    z-index: 5;
    position: relative;
    padding: 5px;
    padding-left: 60px;
}

.entry {
}

.divide {
    height: 10px;
    background: linear-gradient(to right, #007a00, transparent);
}

.title {
}

.entryhead {
  font-size: 2em;
    margin: 0px;
    padding: 5px;
    text-shadow: -1px 0 #007F30, 0 1px #007F30;
    background: linear-gradient(45deg, #1fff1f, #ffffff00);
    border-radius: 20px 20px 20px 20px;
    color: #007F30;
    border: 1px solid black;
    box-shadow: inset 0px 0px 0px 1px white, 1px 1px 3px 0px #00000096;
    font-family: 'Genos', sans-serif;
}

.date {
    border: 1px solid #008300;
    display: inline-block;
    margin-left: 50px;
    border-top: none;
    padding: 5px;
    border-radius: 0 0 5px 5px;
    text-shadow: 1px 1px #007F30;
    color: #007F30;
    font-weight: bold;
    box-shadow: inset 0px 0px 0px 1px white, 1px 1px 3px 0px #00000033;
    background: linear-gradient(45deg, #ffffff00, #b28fd0);
}

.entry p:hover {
    color: #008300;
    border: 1px solid #007F30;
     background: linear-gradient(to right, #a9ffa9, #9f9);
    padding:2px;
}

.current {
    float: right;
    border: black 1px solid;
    width: 140px;
    height: auto;
    padding: 5px;
    margin: 5px;
    background: white;
    border-radius: 5px;
}


/* SONG MARQUEE */

.nowplaying {
    position: fixed;
    color: white;
    bottom: 4px;
    left: 5px;
    font-size: 16px;
        font-weight: bold;
    font-family: ms gothic;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    z-index:10;
}

.lines {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 300;
opacity: 0.05;
}
 
.lines:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
will-change: background, background-size; animation: scanlines 0.2s linear infinite;
}
 
@keyframes scanlines {
from {
background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, .5) 51%); background-size: 100% 4px; }
to {
background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
background-size: 100% 4px;
}
}
@media only screen and (max-width: 600px);
{
    
#s-m-t-tooltip{
	/* basic */
	max-width: 300px;
	z-index: 10;
	margin: 24px 14px 7px 12px;
	/* style and design */
	padding:8px;
	border-radius:3px;
background: #007F30;
border: 1px solid #00a300;
	color: white;
font-family: ms ui gothic;
font-size:13px;
}