#square-container01 {

}
#square-container02 {
	background-color: #b1ff14;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: contain;
	background-image: url('img/demos02.png');
}
#square-container03 {

}
#square-container04 {

}
#square-container06 {
	background-image: url('img/strip03.jpg');
	background-size: 100%;
	background-origin: top left;
	top: 0;
}
#circle01 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	height: 50%;
	background-color: white;
	border-radius: 50%;
	z-index: 1;
}
#circle02 {
    position: absolute;
    width: 56%;
    height: 56%;
    background-image: url('img/cached01.png');
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50%;
    z-index: 2;
}




/*
.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 57%;
    height: 57%;
    background-image: url(img/cached01.png);
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50%;
    z-index: 3;
    animation: rotateAnimation 1s ease forwards;
    animation-play-state: paused; 
}
*/

#vas_sloutchevsky {
    background-image: url(img/vas_sloutchevsky.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 */
}

#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: 2600%;
    background-size: contain;
    background-repeat: repeat-y;
}

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

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

.bottom-left-strip {
    top: 0;
    left: 0;
    background-image: url(img/_slonum02.png);
    width: 100%;
    height: 2600%;
    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: #CCCCCC;
}
#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: #CCCCCC;
}
.dark-mode {
  background-color: #CCCCCC;
  color: #191919;
}

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

.dark-mode #theme-toggle .material-symbols-outlined,
.dark-mode #info-button .material-symbols-outlined {
  color: #191919; /* 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-image01 {
    background-image: url(img/god_os.png);
}
#inline-image02 {
    background-image: url(img/film_js_logo.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 black;
    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;
	background-color: red;
}
.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 */
	background-origin: top left;
    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;
  }