/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=Handjet:wght,ELSH@100..900,2&family=Homemade+Apple&family=Jacquard+12&display=swap');

@-webkit-keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@-webkit-keyframes snowflakes-shake {
		0%,
		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}
		50% {
			-webkit-transform: translateX(80px);
			transform: translateX(80px)
		}
	}
	
	@keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@keyframes snowflakes-shake {
		0%,
		100% {
			transform: translateX(0)
		}
		50% {
			transform: translateX(80px)
		}
	}
	
	.snowflake {
		position: fixed;
		top: -10%;
		z-index: 9999;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-animation-name: snowflakes-fall, snowflakes-shake;
		-webkit-animation-duration: 10s, 3s;
		-webkit-animation-timing-function: linear, ease-in-out;
		-webkit-animation-iteration-count: infinite, infinite;
		-webkit-animation-play-state: running, running;
		animation-name: snowflakes-fall, snowflakes-shake;
		animation-duration: 10s, 3s;
		animation-timing-function: linear, ease-in-out;
		animation-iteration-count: infinite, infinite;
		animation-play-state: running, running
	}
	
	.snowflake:nth-of-type(0) {
		left: 1%;
		-webkit-animation-delay: 0s, 0s;
		animation-delay: 0s, 0s
	}
	
	.snowflake:nth-of-type(1) {
		left: 10%;
		-webkit-animation-delay: 1s, 1s;
		animation-delay: 1s, 1s
	}
	
	.snowflake:nth-of-type(2) {
		left: 20%;
		-webkit-animation-delay: 6s, .5s;
		animation-delay: 6s, .5s
	}
	
	.snowflake:nth-of-type(3) {
		left: 30%;
		-webkit-animation-delay: 4s, 2s;
		animation-delay: 4s, 2s
	}
	
	.snowflake:nth-of-type(4) {
		left: 40%;
		-webkit-animation-delay: 2s, 2s;
		animation-delay: 2s, 2s
	}
	
	.snowflake:nth-of-type(5) {
		left: 50%;
		-webkit-animation-delay: 8s, 3s;
		animation-delay: 8s, 3s
	}
	
	.snowflake:nth-of-type(6) {
		left: 60%;
		-webkit-animation-delay: 6s, 2s;
		animation-delay: 6s, 2s
	}
	
	.snowflake:nth-of-type(7) {
		left: 70%;
		-webkit-animation-delay: 2.5s, 1s;
		animation-delay: 2.5s, 1s
	}
	
	.snowflake:nth-of-type(8) {
		left: 80%;
		-webkit-animation-delay: 1s, 0s;
		animation-delay: 1s, 0s
	}
	
	.snowflake:nth-of-type(9) {
		left: 90%;
		-webkit-animation-delay: 3s, 1.5s;
		animation-delay: 3s, 1.5s
	}
	
	.snowflake:nth-of-type(10) {
		left: 25%;
		-webkit-animation-delay: 2s, 0s;
		animation-delay: 2s, 0s
	}
	
	.snowflake:nth-of-type(11) {
		left: 65%;
		-webkit-animation-delay: 4s, 2.5s;
		animation-delay: 4s, 2.5s
	}


body {
  
    background-color:plum;
    height: 100%;
    display: block;
    padding-left: 5px;
    padding-right: 5px;
    max-width: 800px;
    margin: auto;

  
 
}

.home-page-bkgrnd {
  background-image: url("website background.png");
  padding: 0;
    margin: 0;
    margin-top: 50px;
    max-width: 100%;
 
  }

.floating-container {
    /* Position the container relative to its normal position */
    display: block;
    margin-top:2%;
    margin-left:15%;
    position: absolute;
    /* Set dimensions as needed */
    width: 200px;
    height: 200px;
    z-index: 0;
}

.floating-image {
    /* Ensure the image scales within its container */
    max-width: 100%;
    max-height: 100%;
    /* Apply the floating animation */
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0); /* Start at original position */
    }
    50% {
        transform: translateY(-20px); /* Move up 20px at halfway point */
    }
    100% {
        transform: translateY(0); /* Return to original position */
    }
}

.sidebar {
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  padding: 8px 0;
  top: 300px;
  left: 834px;
  width: 159px;
}

.sidebar-btn button {
  display: block;
  width: 100px;
  background-color: #4B0303;
  border: 1px #63DA40;
  cursor: pointer;

}

.sidebar-btn button:hover {
  background-color: #E7D2F6;

}

.about-me-container {
    position: relative; /* 1. Establishes a positioning context for absolute children */
/* Optional: Shrinks container width to image width */
  
  }

.center-png {
 margin-left: auto;
 margin-right: auto;
 width:100%;
 height: auto;

  }
  
  

    
  .scroll-box {
    display: block;
    margin-top:45%;
    margin-left:5%;
    height: 300px; /* Set a fixed height */
    width:45%;  /* Set a fixed width */
    overflow: auto; /* Adds scroll bars only when content overflows */
    color:pink;
    padding-top:20px;
    padding-right:28px;
    padding-left:28px;
    padding-bottom:5px; /* Optional: add some internal spacing */
    position:absolute; /* Position the text absolutely within the container */
    top: 40%; /* Adjust as needed for vertical positioning */
    left: 45%;
    transform: translate(-50%, -50%); /* Centers the text precisely */
    z-index: 0; /* Sets the text to an even lower layer, behind the image */
  /* Add more styling for readability if the image has transparent areas */

}


.colored-box {
    background-color: orchid; /* You can use color names, HEX codes, RGB, or HSL values */
    color: black;
    padding: 5px;
    border-radius: 8px; /* Optional: rounded corners */
}

.colored-box-2 {
  background-color:  #E7D2F6; /* You can use color names, HEX codes, RGB, or HSL values */
    color: black;
    padding: 5px;
    border-radius: 8px; /* Optional: rounded corners */
}

.btn-group {
  display: flex; /* Enables flexbox layout */
  justify-content: center; /* Centers the buttons horizontally within the container */
  align-items: stretch; /* Default for flex items, ensures items stretch to fill the height of the container */
  width: 100%; /* Ensures the container takes up the full width of its parent */
  gap: 10px;
  }

.btn-group button {
  flex: 1;
  background-color: #4B0303;
  border: 1px #63DA40;
  cursor: pointer;

}

.btn-group button:hover {
  background-color: #E7D2F6;
}

/***
EZ Gallery by netfriend - https://netfriend.neocities.org/ez-gallery/
Released under the Unlicense - https://unlicense.org/
***/

.ezgallery.montage { 
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.ezgallery.montage img {
  flex: auto;
  margin: 0 5px 5px 0;
  object-fit: contain;
  object-position: bottom;
}


/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
   display: flex;
    justify-content: center; /* Centers horizontally */
    position: fixed; /* Positions it relative to the browser window */
    top: 0; /* Aligns to the top edge */
    width: 100%; /* Ensures the container spans the full width of the viewport */
    /* Add padding if needed to give some space from the very top */
    padding: 10px 0;
margin-bottom:20px;
left:0;
margin-left:20px;
z-index:99;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}
#glenplayer02 a {text-decoration:none;}
 
#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}
 
.music-controls {
user-select:none;
-webkit-user-select:none;
width:13px;
font-size:13px;
cursor:pointer;
}
 
.playy, .pausee {color:#fff;} /* color of play & pause buttons */
 
.pausee {display:none;}
 
.sonata {
margin-left:10px;
color:#000; /* color of music note symbol */
}
 
.labeltext {
margin-left:1px;
font-family:courier new;
font-size:9px;
color:#fff; /* color of song title */
}


h1 {
  font-family: "Homemade Apple", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 52px;
  text-align: center;
  padding: 10px;
  display: block;
  text-shadow: 
  0 0 7px #fff,
    0 0 10px #fff,
    0 0 42px #e60073,
    0 0 82px #e60073,
    0 0 92px #e60073,
    0 0 102px #e60073,
    0 0 151px #e60073;
  animation: flicker-neon 1.5s infinite alternate;
  }
  
  @keyframes flicker-neon {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    opacity: 1;
    text-shadow: 
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 42px #e60073,
      0 0 82px #e60073,
      0 0 92px #e60073,
      0 0 102px #e60073,
      0 0 151px #e60073;
  }
  20%, 24%, 55% {
    opacity: 0.5;
    text-shadow: none; /* Turn off shadow during brief "off" periods */
  }

}
h2 {
  font-family: "Jacquard 12", system-ui;
  font-weight: 400;
  font-style: normal;
  line-height: 2px;
  padding: 10px;
  display: block;
  text-align: center;
}
p {
  font-family: "Handjet", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 15px;
  text-align: center;
  display: block;
}

a:link {
  color: #63DA40;
}

/* visited link */
a:visited {
  color: #A556AE;
}

/* mouse over link */
a:hover {
  color: #E54438;
}

/* selected link */
a:active {
  color: #E54438;
}


/*@media screen and (max-width: 1366px) {
  
  /*body, html {
    /*align-items: center;
    overflow: hidden; /* Hide both horizontal and vertical scrollbars */
    /*height: 100%;
    /width: 50vh;/* Ensure the body takes the full height of the viewport */
    /*margin: 0;  
   /*}
    
    /*.about-me-container {
      /*display: flex;
      /*flex-wrap: nowrap;
      /*flex-direction: column;
      /*}

    .center-png {/* Use flexbox to center its child element */
    /*height: 70vh;           /* Optional: Centers vertically within the full viewport height */
    /*width: auto;
    /* Centers inline elements like text */
    /*}
    
  /*.text-behind {
  position: absolute; /* Position the text absolutely within the container */
  /*top: 21%; /* Adjust as needed for vertical positioning */
  /*left: 50%;
  /*transform: translate(-40%, -50%); /* Centers the text precisely */
  /*z-index: 0; /* Sets the text to an even lower layer, behind the image */
  /* Add more styling for readability if the image has transparent areas */
/*}
  
    .scroll-box {
    height:200px; /* Set a fixed height */
    /*width: 70%;  /* Set a fixed width */
    /*overflow: auto; /* Adds scroll bars only when content overflows */
    /*color: pink;
    /*padding: 5px;
      }
}