ign:middle}
li{list-style:none}


/* =============================================================================
   My CSS
   ========================================================================== */

/* ---- base ---- */

html,body{
	width:100%;
	height:100%;
  background: radial-gradient(circle, rgba(173,216,230,1) 0%, rgba(32,178,170,1) 100%);

}

html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body{
  font:normal 75% Arial, Helvetica, sans-serif;
}

canvas{
  display:block;
  vertical-align:bottom;
}


/* ---- stats.js ---- */

.count-particles{
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles{
  font-size: 1.1em;
}

#stats,
.count-particles{
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
}

#stats{
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles{
  border-radius: 0 0 3px 3px;
}


/* ---- particles.js container ---- */

#particles-js{
  width: 100%;
  height: 100%;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}


.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 20; /* Ensure content is above particles */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.logo {
    width: 200px;
    margin-bottom: 20px;
}

.other-content {
    max-width: 600px;
    margin: 0 auto;
}
#fps {display: none!important;}


/* Image display  */


.image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.small-button {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    z-index: 2; /* Ensure the small buttons are above other layers */
}

.layer {
    width: 100vw; /* Full width of the viewport */
    height: 100vh; /* Full height of the viewport */
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 1; /* Ensure the layer is below the small buttons but above background */
}

.layer img {
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: absolute;
		border: 2px solid white;
		border-bottom: 9px solid white;
    transition: all 1.5s;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), /* Subtle shadow */
                0 1px 3px rgba(0, 0, 0, 0.08); /* Additional soft shadow */
}
.large-image-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 3; /* Ensure the large image is above everything else */
    background-color: white;
    padding: 15px 15px 40px 15px; /* Add space at the bottom for the text */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), /* Subtle shadow */
                0 1px 3px rgba(0, 0, 0, 0.08); /* Additional soft shadow */
    text-align: center;
}

.large-image-container img {
    max-width: 100%;
    max-height: 80%; /* Leave space for the caption */
    display: block;
    margin: 0 auto;
		filter: sepia(30%) grayscale(20%);
}

.large-image-container .caption {
		margin-top: 24px; /* Space between the image and the text */
    color: #333; /* Text color */
		font-size: 32px; /* Text size */
		font-family: "Reenie Beanie", serif;
 		font-optical-sizing: auto;
		transform: rotate(-3deg);
}

.logo-container {
            /* Add any additional styling for your logo-container here */
            width: 200px;
						height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
						margin: 300px auto;
					}

#button1, #button2, #button3 {
					    width: 30px;
					    height: auto;
					    border-radius: 0;
							padding-top: 0;
							background-color: #A3D9A5;
					    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), /* Subtle shadow */
													0 1px 3px rgba(0, 0, 0, 0.08); /* Additional soft shadow */
							transform: rotate(10deg)!important;
							transition: transform 0.5s ease-in-out;
					}

#button1 {
	width: 50px;
	transform: rotate(-13deg)!important;
}

#button2 {
	transform: rotate(23deg)!important;
}

#button1.pressed, #button2.pressed, #button3.pressed  {
						background-color: #A3C9DF;
						box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), /* Smaller and darker subtle shadow */
							 					0 1px 1px rgba(0, 0, 0, 0.25); /* Additional soft shadow */
						transform: rotate(-15deg)!important;
						transition: transform 0.5s ease-in-out;
					}
#button1.pressed {
	transform: rotate(15deg)!important;
}
	.rotatable-image, .thumb {
											transition: transform 0.5s ease-in-out, opacity 0.2s ease-in-out;
}
.text-layer {
    position: absolute;
		top: 20%;
		left: 20%;
		width: 60vw;
		height: 60vh;
    display: none; /* Hidden initially */
    z-index: 2; /* Ensure the layer is above the small buttons but below the large image container */
		background-color: rgba(260, 260, 260, 0.5); /* Semi-transparent background */
		color: #000;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column; /* Ensures flex items are stacked vertically */
		text-align: left;
}

.typed-text {
    font-size: 1.2em;
    max-width: 800px;
		line-height: 2.5em;
}


@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Style for the close button */
.close-button {
    width: 30px; /* Adjust size as needed */
    height: 30px; /* Adjust size as needed */
    cursor: pointer;
    position: absolute;
    top: 20px; /* Adjust vertical position as needed */
    left: 50%;
    transform: translateX(-50%);
}

#button1 {
top: 50%; left: 50%; transform: translate(-50%, -50%);
}
#button2 {
top: 50%; left: 55%; transform: translate(-75%, -75%);
}
#button3 {
top: 50%; left: 45%; transform: translate(-75%, -75%);
}

/* Mobile First Approach */
@media (max-width: 767px) {
	.typed-text {
			line-height: 1.5em;
	}
	#button1 {
	top: 50%; left: 48%; transform: translate(-50%, -50%);
	}
	#button2 {
	top: 58%; left: 48%; transform: translate(-75%, -75%);
	}
	#button3 {
	top: 45%; left: 48%; transform: translate(-75%, -75%);
	}
}