body {

    background-color: #1a2e3f;
    color: #b1ff14;
}
.content-container {
    top: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
}
h1 {
    color: #b1ff14;
  
}

h2 {
    color: #b1ff14;
}

p {
    color: #b1ff14;
}
.dropcap {
    color: #b1ff14;
}
.line {
    background-color: #b1ff14;
}
.square-ani {
	width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-top: 4%;
	margin-bottom: 8%;
    position: relative;
	justify-content: center;
    align-items: center;
	overflow: hidden;
}
.square-ani::before {
    content: "";
    display: block;
    padding-top: 100%; /* This maintains the square aspect ratio */
}
#square-ani01 {
	background-image: url(../../img/strip-cached06.png);
	background-size: 100%;
	background-origin: top left;
	top: 0;
	background-color: #b1ff14;
	overflow: hidden;
}
#square-ani02 {
	background-image: url(../../img/strip-cached08.png);
	background-size: 100%;
	background-origin: top left;
	top: 0;
	background-color: #b1ff14;
	overflow: hidden;
}
#square-ani03 {
	background-image: url(../../img/strip-icons05.png);
	background-size: 100%;
	background-origin: top left;
	top: 0;
	background-color: #b1ff14;
	overflow: hidden;
}
#square-ani04 {
	background-image: url(../../img/strip-seq01.jpg);
	background-size: 100%;
	background-origin: top left;
	top: 0;
	background-color: #b1ff14;
	overflow: hidden;
}
#square-ani05 {
	background-image: url(../../img/strip-cached10.png);
	background-size: 100%;
	background-origin: top left;
	top: 0;
	background-color: #b1ff14;
	overflow: hidden;
}
#square-ani06 {
	background-image: url(../../img/strip-cached11.jpg);
	background-size: 100%;
	background-origin: top left;
	top: 0;
	background-color: #b1ff14;
	overflow: hidden;
}




#top-left, #top-right, #bottom-right, #bottom-left,
.top-left-strip, .top-right-strip, .bottom-right-strip, .bottom-left-strip {
    position: absolute;
    width: 50%;
    height: 50%;
    overflow: hidden;
}

#top-left {
    top: 0;
    left: 0;
    background-color: #C50000;
}

#top-right {
    top: 0;
    right: 0;
    background-color: #00E300;
    transform: rotate(90deg);
}

#bottom-right {
    bottom: 0;
    right: 0;
    background-color: #0000ff;
    transform: rotate(180deg);
}

#bottom-left {
    bottom: 0;
    left: 0;
    background-color: #ffff00;
    transform: rotate(270deg);
}

.top-left-strip {
    top: 0;
    left: 0;
    background-image: url(../../img/_slonum02.png);
    width: 100%;
    height: 1600%;
    background-size: contain;
    background-repeat: repeat-y;
}

.top-right-strip {
    top: 0;
    right: 0;
    background-image: url(../../img/_slonum02.png);
    width: 100%;
    height: 1600%;
    background-size: contain;
    background-repeat: repeat-y;
}

.bottom-right-strip {
    top: 0;
    right: 0;
    background-image: url(../../img/_slonum02.png);
    width: 100%;
    height: 1600%;
    background-size: contain;
    background-repeat: repeat-y;
}

.bottom-left-strip {
    top: 0;
    left: 0;
    background-image: url(../../img/_slonum02.png);
    width: 100%;
    height: 1600%;
    background-size: contain;
    background-repeat: repeat-y;
}
.material-symbols-outlined {
    font-size: calc(3vw + 3rem); /* 2x bigger initial size for material symbols */
    font-variation-settings: 
        'FILL' 1, 
        'wght' 400, 
        'GRAD' 20, 
        'opsz' 24;
}

@media (min-width: 769px) and (max-width: 3000px) {
    .material-symbols-outlined {
        font-size: calc(3vw + 3rem); /* 2x bigger initial size for responsive material symbols */
    }
}
#theme-toggle {
  position: fixed;
  top: 2%;
  right: 2%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: transparent;
  z-index: 100;
  border: none;
}
#theme-toggle .material-symbols-outlined {
  font-size: 26px;
  color: #b1ff14;
}
#info-button {
  position: fixed;
  bottom: 60px;
  left: 2%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: transparent;
  z-index: 100;
  border: none;
}
#info-button .material-symbols-outlined {
  font-size: 36px;
  color: #b1ff14;
}
.dark-mode {
  background-color: #b1ff14;
  color: #1a2e3f;
}

.dark-mode p, 
.dark-mode h1, 
.dark-mode h2, 
.dark-mode .material-symbols-outlined {
  color: #1a2e3f; /* Change text color for paragraphs, h1, h2, and icons in dark mode */
}
.dark-mode .line {
  background-color: #1a2e3f; /* Change line color in dark mode */
}

.dark-mode #theme-toggle .material-symbols-outlined,
.dark-mode #info-button .material-symbols-outlined {
  color: #1a2e3f; /* Change toggle button icon color in dark mode */
}
/* Dark mode gradient overlay */
.dark-mode .gradient-overlay {
  background: linear-gradient(to bottom, rgba(204, 204, 204, 1), rgba(204, 204, 204, 0));
}
.more-link {
  text-align: right;
  width: 100%;
  margin: 0;
  padding: 0;
}

.more-link a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.more-link .more-text {
  margin-right: 3%; /* Space between "More" text and the icon */
	
}
        #reload-icon {
            position: absolute;
            
            left: 0; /* Adjust left positioning */
            cursor: pointer;
            font-size: 3vw; /* Initially three times bigger */
        }

        @media only screen and (max-width: 768px) {
            #reload-icon {
                font-size: 24px; /* Revert to normal size for narrow viewport (phone size) */
            }
        }
.inline-image {
	width: 100%;
	height: auto;
	background-size: cover;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-top: 4%;
	margin-bottom: 8%;
    position: relative;
	justify-content: center;
    align-items: center;
}
.inline-image::before {
    content: "";
    display: block;
    padding-top: 100%; /* This maintains the square aspect ratio */
}
#inline-image01 {
    background-image: url(../../img/god_os.png);
}
.rect-container {
            width: 100%;
            height: 50%;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
	    	margin-bottom: 3%;
        }

        .rectangle {
            flex-grow: 1;
			 background-color: #808080;
            position: relative;
            margin: 1%; /* Adjusting margin for consistent spacing */
        }

        .rectangle::before {
            content: "";
            display: block;
            padding-bottom: 50%; /* 2:1 aspect ratio (2/1 = 0.5) */
        }
        #rect1 { background-color: #AAC83E; }
        #rect2 { background-color: rgba(128, 128, 128, 0.3); }
        #rect3 { background-color: rgba(128, 128, 128, 0.3); }
        #rect4 { background-color: rgba(128, 128, 128, 0.3); }
        #rect5 { background-color: rgba(128, 128, 128, 0.3); }
        #rect6 { background-color: rgba(128, 128, 128, 0.3); }
        #rect7 { background-color: rgba(128, 128, 128, 0.3); }
        #rect8 { background-color: rgba(128, 128, 128, 0.3); }
        #rect9 { background-color: rgba(128, 128, 128, 0.3); }
        #rect10 { background-color: rgba(128, 128, 128, 0.3); }
        #rect11 { background-color: rgba(128, 128, 128, 0.3); }
        #rect12 { background-color: rgba(128, 128, 128, 0.3); }
        #rect13 { background-color: rgba(128, 128, 128, 0.3); }
        #rect14 { background-color: rgba(128, 128, 128, 0.3); }
        #rect15 { background-color: rgba(128, 128, 128, 0.3); }
        #rect16 { background-color: rgba(128, 128, 128, 0.3); }
        #rect17 { background-color: rgba(128, 128, 128, 0.3); }
        #rect18 { background-color: rgba(128, 128, 128, 0.3); }
        #rect19 { background-color: rgba(128, 128, 128, 0.3); }
        #rect20 { background-color: rgba(128, 128, 128, 0.3); }
        #rect21 { background-color: rgba(128, 128, 128, 0.3); }
        #rect22 { background-color: rgba(128, 128, 128, 0.3); }
        #rect23 { background-color: rgba(128, 128, 128, 0.3); }
        #rect24 { background-color: rgba(128, 128, 128, 0.3); }
        #rect25 { background-color: rgba(128, 128, 128, 0.3); }
        #rect26 { background-color: rgba(128, 128, 128, 0.3); }
        #rect27 { background-color: rgba(128, 128, 128, 0.3); }
        #rect28 { background-color: rgba(128, 128, 128, 0.3); }
        #rect29 { background-color: rgba(128, 128, 128, 0.3); }
        #rect30 { background-color: rgba(128, 128, 128, 0.3); }
        #rect31 { background-color: rgba(128, 128, 128, 0.3); }
        #rect32 { background-color: transparent; }

        #rect33 { background-color: #808080; }
        #rect34 { background-color: #808080; }
        #rect35 { background-color: #808080; }
        #rect36 { background-color: transparent;}
        #rect37 { background-color: transparent; }
        #rect38 { background-color: transparent; }
        #rect39 { background-color: transparent; }
        #rect40 { background-color: transparent; }

        #rect41 { background-color: #808080; }
#rect42 { background-color: rgba(128, 128, 128, 0.3); }
#rect43 { background-color: rgba(128, 128, 128, 0.3); }
#rect44 { background-color: rgba(128, 128, 128, 0.3); }
#rect45 { background-color: rgba(128, 128, 128, 0.3); }
#rect46 { background-color: rgba(128, 128, 128, 0.3); }
#rect47 { background-color: rgba(128, 128, 128, 0.3); }
#rect48 { background-color: rgba(128, 128, 128, 0.3); }
#rect49 { background-color: rgba(128, 128, 128, 0.3); }
#rect50 { background-color: rgba(128, 128, 128, 0.3); }
#rect51 { background-color: rgba(128, 128, 128, 0.3); }
#rect52 { background-color: rgba(128, 128, 128, 0.3); }
#rect53 { background-color: rgba(128, 128, 128, 0.3); }
#rect54 { background-color: rgba(128, 128, 128, 0.3); }
#rect55 { background-color: rgba(128, 128, 128, 0.3); }
#rect56 { background-color: transparent; }


        /* Adjusting gaps for different viewport sizes */
        @media (max-width: 600px) {
            .rect-container {
                gap: .4%;
            }
        }

        @media (min-width: 601px) and (max-width: 900px) {
            .rect-container {
                gap: .4%;
            }
        }

        @media (min-width: 901px) {
            .rect-container {
                gap: .4%;
            }
        }
#external-container {
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

#kil {
    background-image: url(img/_sloKILgrey.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: auto; /* Allow the width to adjust dynamically */
    height: auto; /* Allow the height to adjust dynamically */
    min-width: 200px; /* Set minimum width */
    min-height: 200px; /* Set minimum height */
    position: relative; /* Position relatively */
}
.paragraph-container {
    width: 100%; /* Set the desired width */
    margin: 0; /* Center the container */
}

.typing-effect {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #1a2e3f;
    animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
    box-sizing: border-box; /* Include padding and border in element's width and height */
    width: calc(100% - 24px); /* Adjust width to account for border width */
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }

}

#random-quote {
    display: inline-block;
    word-wrap: break-word;
    white-space: normal;
	caret-color: transparent;
}

#reload-icon {
    vertical-align: top;
	margin-bottom: 3%;
}
#square-container-kil {
    background-image: url(img/_sloKILgrey.png);
    background-repeat: no-repeat;
    background-size: 35%; /* Scale down the background image to 25% */
    background-position: 0 0; /* Position the background image at the top left corner */
    overflow: hidden;
    position: relative;
}



.red-square {
	width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-top: 4%;
	margin-bottom: 8%;
    position: relative;
	justify-content: center;
    vertical-align: top;
	overflow: hidden;
}
.red-square::before {
    content: "";
    display: block;
    padding-top: 100%; 
}


  .strip {
    width: 100%; /* Fill the width of the parent square */
    height: 1000000%; /* Make the strip very tall */
    background-repeat: repeat-y; /* Repeat vertically */
    background-size: 100%; /* Fill width and maintain aspect ratio */
    position: absolute;
    top: 0;

  }
  #strip1 {
    background-image: url('img/strip_gears05.png');
  }
  #strip2 {
    background-image: url('../../img/strip03.jpg');
  }

  .frame-number {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px;
    border-radius: 5px;
  }
.skil {
    width: 60%;
    height: 60%;
    position: absolute;
    left: 0;
	top: 0;
    background-image: url(img/_sloKIL.png);
    background-repeat: no-repeat;
    background-size: contain;
	z-index: 3;
	}
 	.skil_num_mask {
	width: 22%;
	height: 17%;
	left: 41%;
	top: 38%;
	position: absolute;
	overflow: hidden;
	}
	.skil_num {
	width: 100%;
	height: 15800%;
	left: 0;
	top: 0; 
	position: absolute;
	background-image: url(img/_slonum02.png);
	background-repeat: repeat-y;
	background-size: contain;		
	}
#_04 {
	width: 100%;	
	height: 100%;
	left: 0;
	bottom: -15%;
	position: absolute;
	overflow: hidden;
	transform: rotate(-90deg);
	transform-origin: center center;
}
.d01 {
	width: 25%;
	height: 20000px;
	top: -60%;
	left: 0px;
	position: absolute;
	background-image: url(imsval03/layer01.png);
	background-size: contain;
	background-repeat: repeat-y;
/*	box-shadow: 300px 0px rgba(0, 0, 0, 0.05) inset;*/
	z-index: 15;
	
}
.d02 {
	width: 25%;
	height: 20000px;
	top: -40%;
	left: 5%;
	position: absolute;
	background-image: url(imsval03/layer02.png);
	background-size: contain;
	background-repeat: repeat-y;
/*	box-shadow: 300px 0px rgba(0, 0, 0, 0.1) inset;*/
	z-index: 14;
}
.d03 {
	width: 25%;
	height: 20000px;
	top: -40%;
	left: 15%;
	position: absolute;
	background-image: url(imsval03/layer03.png);
	background-size: contain;
	background-repeat: repeat-y;
/*	box-shadow: 300px 0px rgba(0, 0, 0, 0.15) inset;*/
	z-index: 13;
}
.d04 {
	width: 25%;
	height: 20000px;
	top: -40%;
	left: 30%;
	position: absolute;
	background-image: url(imsval03/layer04.png);
	background-size: contain;
	background-repeat: repeat-y;
/*	box-shadow: 300px 0px rgba(0, 0, 0, 0.5) inset;*/
	z-index: 12;
}
.d05 {
	width: 25%;
	height: 20000px;
	top: -40%;
	left: 40%;
	position: absolute;
	background-image: url(imsval03/layer05.png);
	background-size: contain;
	background-repeat: repeat-y;
/*	box-shadow: 300px 0px rgba(0, 0, 0, 0.2) inset;*/
	z-index: 11;
}

#square-container-kil {
    background-image: url(../../img/_sloKILgrey.png);
    background-repeat: no-repeat;
    background-size: 35%; /* Scale down the background image to 25% */
    background-position: 0 0; /* Position the background image at the top left corner */
    overflow: hidden;
    position: relative;
}
#_02 {
	width: 100%;	
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	overflow: hidden;
}
#_05 {
	width: 100%;	
	height: 200%;
	left: 0;
	top: 0;
	position: absolute;
	overflow: hidden;
	/*width: 50%;
	height: 2000px;
	left: 20px;
	top: 7500px;
	position: absolute;
	overflow: hidden;
	z-index: 3;
	clip-path: inset(0px 550px 0px 0px);	 	transform:rotate(-90deg) translateY(-300px);
  	transform-origin: right top;*/
}
#_06 {
	width: 100%;	
	height: 200%;
	left: 0;
	top: 0;
	position: absolute;
	overflow: hidden;
/*
	width: 1100px;
	height: 2000px;
	left: 20px;
	top: 7500px;
	position: absolute;
	overflow: hidden;
	z-index: 3;
*/
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
/* 	transform:rotate(-90deg) translateY(-300px);
  	transform-origin: right top;*/
}
._d01 {
	width: 8%;
	height: 15000px;
	top: -40%;
	left: 0px;
	position: absolute;
	background-image: url(ims01/c01.png);
	background-size: contain;
	background-repeat: repeat-y;
	box-shadow: 300px 0px rgba(0, 0, 0, 0.05) inset;
	
}
._d02 {
	width: 6.9%;
	height: 15000px;
	top: -40%;
	left: 8%;
	position: absolute;
	background-image: url(ims01/c02.png);
	background-size: contain;
	background-repeat: repeat-y;
	box-shadow: 300px 0px rgba(0, 0, 0, 0.1) inset;
}
._d03 {
	width: 6%;
	height: 15000px;
	top: -40%;
	left: 14.9%;
	position: absolute;
	background-image: url(ims01/c03.png);
	background-size: contain;
	background-repeat: repeat-y;
	box-shadow: 300px 0px rgba(0, 0, 0, 0.15) inset;
}
._d04 {
	width: 5.1%;
	height: 15000px;
	top: -40%;
	left: 20.9%;
	position: absolute;
	background-image: url(ims01/c04.png);
	background-size: contain;
	background-repeat: repeat-y;
	box-shadow: 300px 0px rgba(0, 0, 0, 0.2) inset;
}
._d05 {
	width: 4.4%;
	height: 15000px;
	top: -40%;
	left: 26%;
	position: absolute;
	background-image: url(ims01/c05.png);
	background-size: contain;
	background-repeat: repeat-y;
	box-shadow: 300px 0px rgba(0, 0, 0, 0.2) inset;
}
._d06 {
	width: 3.8%;
	height: 15000px;
	top: -40%;
	left: 30.4%;
	position: absolute;
	background-image: url(ims01/c06.png);
	background-size: contain;
	background-repeat: repeat-y;
	box-shadow: 300px 0px rgba(0, 0, 0, 0.25) inset;
}
._d07 {
	width: 3.3%;
	height: 15000px;
	top: -40%;
	left: 34.2%;
	position: absolute;
	background-image: url(ims01/c07.png);
	background-size: contain;
	background-repeat: repeat-y;
	box-shadow: 300px 0px rgba(0, 0, 0, 0.3) inset;
}
._d08 {
	width: 2.8%;
	height: 15000px;
	top: -40%;
	left: 37.5%;
	position: absolute;
	background-image: url(ims01/c08.png);
	background-size: contain;
	background-repeat: repeat-y;
	box-shadow: 300px 0px rgba(0, 0, 0, 0.35) inset;
}
._d09 {
	width: 2.5%;
	height: 15000px;
	top: -40%;
	left: 40.3%;
	position: absolute;
	background-image: url(ims01/c09.png);
	background-size: contain;
	background-repeat: repeat-y;
	box-shadow: 300px 0px rgba(0, 0, 0, 0.4) inset;
}
._d10 {
	width: 2.1%;
	height: 15000px;
	top: -40%;
	left: 42.8%;
	position: absolute;
	background-image: url(ims01/c10.png);
	background-size: contain;
	background-repeat: repeat-y;
	box-shadow: 300px 0px rgba(0, 0, 0, 0.45) inset;
}
._d11 {
	width: 1.8%;
	height: 15000px;
	top: -40%;
	left: 44.9%;
	position: absolute;
	background-image: url(ims01/c11.png);
	background-size: contain;
	background-repeat: repeat-y;
	box-shadow: 300px 0px rgba(0, 0, 0, 0.5) inset;
}
._d12 {
	width: 1.6%;
	height: 15000px;
	top: -40%;
	left: 46.7%;
	position: absolute;
	background-image: url(ims01/c12.png);
	background-size: contain;
	background-repeat: repeat-y;
	box-shadow: 300px 0px rgba(0, 0, 0, 0.55) inset;
}
._d13 {
	width: 1.4%;
	height: 15000px;
	top: -100%;
	left: 48.3%;
	position: absolute;
	background-image: url(ims01/c13.png);
	background-size: contain;
	background-repeat: repeat-y;
	box-shadow: 300px 0px rgba(0, 0, 0, 0.6) inset;
}
._02b {
	width: 100%;
	height: 1000%;
	left: 0px;
	position: absolute;
	top: 60%;
	background-image: url(ims_f/fp00b.png);
	background-size: contain;
	background-repeat: repeat-y;
	z-index: 5;
}
._02a {
	width: 100%;
	height: 100%;
	left: 0px;
	position: absolute;
	top: 0;
	background-image: url(ims_f/fp00a.png);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 4;
}
#grid{
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
background-image: url(../../img/grid07.png);
background-repeat: no-repeat;
background-size: contain;
image-rendering: pixelated;
z-index: 2;
overflow: hidden;
}