/* Basic CSS Styling */
@font-face {
    font-family: 'AdelonBook';
    src: url('../fonts/adelonlregular-webfont.woff2') format('woff2'),
         url('../fonts/adelonlregular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cinzel';
    src: url('../fonts/CinzelDecorative-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #fff;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(0deg,#424242,#c6c6c6);
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(0deg,#424242,#d8d5d5);
  }

body {
    font-family: 'AdelonBook', Times New Roman, Times, serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Add this line to hide the horizontal scrollbar */
    top: 0px !important;
	background-color:#000;
}

.social-media-bar {
    position: fixed;
    top: 51%;
    left: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
	z-index:9999;
}

.social-media-icon {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    background-image: url('../img/icons/social_border.png');
    padding: 13px 13px;
    margin-bottom: 20px;
	transition: background-color 0.3s ease, transform 0.2s ease; /* Added transition for smoother hover */

}

.social-media-icon:hover {
    background-image: url('../img/icons/social_border_hover.png');
	transform: scale(1.05); /* Scale up slightly on hover */
	transition: background-color 0.3s ease, transform 0.2s ease; /* Added transition for smoother hover */
	transition: 0.2s ease;
}

.social-media-icon1 {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    background-image: url('../img/icons/social_border.png');
    padding: 13px 13px;


	transition: background-color 0.3s ease, transform 0.2s ease; /* Added transition for smoother hover */

}

.social-media-icon1:hover {
    background-image: url('../img/icons/social_border_hover1.png');
	transform: scale(1.05); /* Scale up slightly on hover */
	transition: background-color 0.3s ease, transform 0.2s ease; /* Added transition for smoother hover */
	transition: 0.2s ease;
}

.fa-discord {
	color:#b99669;
	font-size:19px;
}

.fa-twitch {
	margin-left:1px;
	margin-top:1px;
	color:#fff;
	font-size:18px;
}

.fa-twitch:hover {
	color: #6441a5;
}

.fa-youtube {
	margin-left:-1px;
	color:#fff;
	font-size:18px;
}

.fa-youtube:hover {
	color: #CD201F;
}

/* Media query for mobile view */
@media (max-width: 767px) {
  .social-media-bar {
    display: none; /* Hide sidebar on smaller screens */
  }
}


.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(256, 256, 256, 0.1); /* Change the background color as desired */
    padding: 10px; /* Adjust padding as needed */
    display: flex;
    align-items: center; /* Align items vertically */
	z-index:9999;
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.5) inset; /* Add glowing effect to bottom border */
    transition: background-color 0.3s ease; /* Add smooth transition */
}

.dark-navbar {
    background-color: rgba(5, 5, 5, 0.7); /* Darkened background color */
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.5) inset; /* Add glowing effect to bottom border */
	border-bottom: 1px solid rgba(256, 256, 256, 0.2);
}

.logo-container {
    margin-right: 0; /* Push the logo to the left */
}

.logo {
    width: 48px; /* Adjust logo size as needed */
    height: 48px; /* Adjust logo size as needed */
}

.nav-items {
    flex: 1; /* Expand to fill remaining space */
    display: flex;
    justify-content: center; /* Align items horizontally in the center */
	vertical-align:middle;
}

.nav-items a:hover {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7); /* Add glow effect on hover */
}

.nav-item {
    margin-left: 60px; /* Adjust spacing between navigation items */
    color: white; /* Text color */
    text-decoration: none; /* Remove default underline */
	transition: transform 0.2s ease;
}

.nav-item:hover {
	 transform: translateY(-3px); /* Move the item up on hover */
	 filter: brightness(160%);
}

.nav-icon {
    width: 39px; /* Adjust icon size as needed */
    height: 37px; /* Adjust icon size as needed */
    margin-right: 0; /* Adjust spacing between icon and text */
	vertical-align:middle;
}

.nav-icon:hover {
    animation: swipeAnimation 0.5s forwards; /* Apply swipe animation on hover */
}

@keyframes swipeAnimation {
    0% {
        transform: rotate(0deg); /* Start at 0 degrees */
    }
    100% {
        transform: rotate(360deg); /* Rotate to 360 degrees */
    }
}

.nav-text {
    vertical-align: middle; /* Align text vertically with the icon */
	font-size:18px;
	font-weight:normal;
}

.donation-button {
    display: inline-flex; /* Use flexbox for alignment */
    align-items: center; /* Align items vertically */
    margin-left: auto; /* Push the button to the right */
    margin-right: 20px; /* Adjust right margin as needed */
    color: white; /* Text color */
    text-decoration: none; /* Remove default underline */
    padding: 8px 20px; /* Add padding */
    background-color: #585858; /* Button background color */
    border-radius: 5px; /* Add border radius */
	text-transform: uppercase;
	font-size:15px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	transition: 0.3s ease;
}

.donation-button:hover {
    background-color: #646460; /* Button background color */
}

.donation-button:active {
    background-color: #50504d; /* Button background color */
}

.donation-icon {
    width: 25px; /* Adjust icon size as needed */
    height: 29px; /* Maintain aspect ratio */
    margin-right: 10px; /* Add spacing between icon and text */
}

@media screen and (max-width: 768px) {
.donation-button {
	 padding: 6px 15px; /* Add padding */
    margin-right: 80px; /* Adjust right margin as needed */
}
}	

input[type="checkbox"] {
    display: none; /* Hide the checkbox */
}

@media screen and (max-width: 768px) {
	
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(256, 256, 256, 0.1); /* Change the background color as desired */
    padding: 10px; /* Adjust padding as needed */
    display: flex;
    align-items: center; /* Align items vertically */
	z-index:9999;
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.5) inset; /* Add glowing effect to bottom border */
    transition: background-color 0.3s ease; /* Add smooth transition */
}

.dark-navbar {
    background-color: rgba(5, 5, 5, 0.7); /* Darkened background color */
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.5) inset; /* Add glowing effect to bottom border */
	border-bottom: 1px solid rgba(256, 256, 256, 0.2);
}

    .nav-items {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        text-align: center;
    }

    .nav-items a {
        display: block;
        padding: 10px 0;
    }

.nav-text {
	display:flex;
}

    .menu-toggle {
        display: block;
        position: absolute;
        top: 33px;
        right: 10px;
		margin-right:20px;
        z-index: 999;
        cursor: pointer;
    }

    .hamburger {
        width: 30px;
        height: 3px;
        background-color: #fff;
        border-radius: 3px;
        transition: background-color 0.3s ease;
    }

    .hamburger:before,
    .hamburger:after {
        content: "";
        position: absolute;
        width: 30px;
        height: 3px;
        background-color: #fff;
        border-radius: 3px;
        transition: transform 0.3s ease;
    }

    .hamburger:before {
        top: -8px;
    }

    .hamburger:after {
        top: 8px;
    }

input[type="checkbox"] {
    display: none; /* Hide the checkbox */
}

    #toggle-menu:checked ~ .nav-items {
        display: flex;
		align-items:center;
		Background-color: rgba(0, 0, 0, 0.8);
		border-bottom:1px solid rgba(255, 255, 255, 0.5);
    }

    #toggle-menu:checked ~ .nav-items a {
       align-items:center;
	   padding: 10px 0;
	   margin-left:0;
	   margin-right:40px;
    }
	
    #toggle-menu:checked ~ .nav-items a:first-child {
	   margin-left:25px;
    }

    #toggle-menu:checked ~ .menu-toggle .hamburger {
        background-color: transparent;
    }

    #toggle-menu:checked ~ .menu-toggle .hamburger:before {
        transform: translateY(8px) rotate(45deg);
    }

    #toggle-menu:checked ~ .menu-toggle .hamburger:after {
        transform: translateY(-8px) rotate(-45deg);
    }
}



.spacing1 {
	margin-top:150px;
}

#home-section {
    background-image: url('../img/bg.jpg');
    background-size: cover;
    background-position: center;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    position: relative;
}
	
#home-section::after {
    content: ""; /* Create the pseudo-element */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(95, 95, 95, 0.39); /* Adjust the overlay color and opacity */
    z-index: 1; /* Ensure the overlay is above the background image */
}

#home-section::before {
    content: "";
    background-image: url('../img/bg.jpg'); /* Background image */
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Ensure the background image is below the overlay */
}

#home-section a {
	margin-bottom: 20px;
}

#download-section {
    background-image: url('../img/bg1.jpg');
    background-size: cover;
    background-position: center;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    position: relative;
}

#download-section::after {
    content: ""; /* Create the pseudo-element */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(95, 95, 95, 0.39); /* Adjust the overlay color and opacity */
    z-index: 1; /* Ensure the overlay is above the background image */
}

#download-section::before {
    content: "";
    background-image: url('../img/bg1.jpg'); /* Background image */
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Ensure the background image is below the overlay */
}

#download-section a {
	margin-bottom: 20px;
}

#download-section h1 {
	font-size:20px;
	font-weight:normal;
	margin-bottom:0;
		margin-top:0;
	z-index:2;
}

#download-section h2 {
	font-size:30px;
	font-weight:bold;
	margin-bottom:0;
	text-shadow: 2px 2px 4px rgba(95, 95, 95, 0.39); /* Adjust shadow values as needed */
	z-index:2;
}

#features-section {
    background-image: url('../img/bg2.jpg');
    background-size: cover;
    background-position: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    position: relative;
}

#features-section::after {
    content: ""; /* Create the pseudo-element */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(95, 95, 95, 0.39); /* Adjust the overlay color and opacity */
    z-index: 1; /* Ensure the overlay is above the background image */
}

#features-section::before {
    content: "";
    background-image: url('../img/bg2.jpg'); /* Background image */
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Ensure the background image is below the overlay */
}

#features-section a {
	margin-bottom: 20px;
}

#features-section h1 {
	font-size:20px;
	font-weight:normal;
	margin-bottom:0;
		margin-top:0;
	z-index:2;
}

#features-section h2 {
	font-size:30px;
	font-weight:bold;
	margin-bottom:0;
	z-index:2;
}
.down-cont {
	margin-top:20px;
	display:flex;
	justify-content: space-between;
	margin-bottom:90px;
}

	
.download-container {
	width:350px;
	height:500px;
	margin-top: 50px;
	margin-bottom:60px;
	border-width: 1px;
	border-style: solid;
    border-image-source: url('../img/border.png');
    border-image-slice: 1;
	margin-right:50px;
    background-size: cover;
    background-position: center;
	background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
    transition: box-shadow 0.3s ease;
	z-index: 2;
}

.download-container:hover {
	box-shadow: 0 2px 8px rgba(255, 255, 255, 0.5);
}

.download-container:last-child {
	margin-right:0;
}

.download-container-updater {
	width:350px;
	height:500px;
	margin-top: 50px;
	margin-bottom:60px;
	border-width: 1px;
	border-style: solid;
    border-image-source: url('../img/border.png');
    border-image-slice: 1;
	margin-right:50px;
    background-size: cover;
    background-position: center;
	background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
    transition: box-shadow 0.3s ease;
	z-index: 2;
}

.download-container-updater:hover {
	box-shadow: 0 2px 8px rgba(255, 255, 255, 0.5);
}

.launcher-button {
    display: inline-flex; /* Use flexbox for alignment */
    align-items: center; /* Align items vertically */
    margin: 0 auto; /* Push the button to the right */
    color: white; /* Text color */
    text-decoration: none; /* Remove default underline */
    padding: 8px 20px; /* Add padding */
    background-color: #b59250; /* Button background color */
    border-radius: 5px; /* Add border radius */
	text-transform: uppercase;
	font-size:15px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	transition: 0.3s ease;
}

.launcher-button:hover {
    background-color: #d8af62; /* Button background color */
}

.launcher-button:active {
    background-color: #937742; /* Button background color */
}

.down-cont h1 {
	margin-top:4px !important;
	font-size:15px !important;
	font-weight:normal !important;
	color:#fff !important;
}

.down-cont h2 { 
	font-family: 'Cinzel';
	font-size:21px !important;
	font-weight:normal !important;
	margin-bottom:0 !important;
	color:#d1b383 !important;
	z-index:2 !important;
}

.download-container-updater h2 {
	font-size:21px !important;
	font-weight:normal !important;
	margin-bottom:0 !important;
	color:#deb66a !important;
	z-index:2 !important;
}

.features-container {
	width:80%;
	height:100%;
	margin-top: 50px;
	margin-bottom:60px;
	border-width: 1px;
	border-style: solid;
    border-image-source: url('../img/border.png');
    border-image-slice: 1;
	
    background-size: cover;
    background-position: center;
	background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
    transition: box-shadow 0.3s ease;
	z-index: 2;
}

/* Media query for screens smaller than 768px (typical mobile devices) */
@media screen and (max-width: 768px) {
.down-cont {
	flex-direction:column;
}

.download-container {
	align-items:center;
	width:80%;
	margin:0 auto;
}

.download-container-updater {
	align-items:center;
	width:80%;
	margin:0 auto;
	margin-top:60px;
	margin-bottom:60px;
}

.download-container:last-child {
	align-items:center;
	width:80%;
	margin:0 auto;
}
}

table {
    margin: 15px 0;
    width: 90%;
    border-collapse: collapse;
    color: #fff;
    opacity: 0; /* Initially hide the table */
    animation: fadeInTable 0.5s ease forwards; /* Apply fadeInTable animation */
}

/* Define keyframes for fadeInTable animation */
@keyframes fadeInTable {
    from {
        opacity: 0;
        transform: translateY(-20px); /* Start slightly above and move down */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Move to original position */
    }
}

table img {
	margin-top:5px;
}

th, td {
	font-weight: normal;
    padding: 7px;
    text-align: left;
	border-top: 1px solid #9d9d9d;
    border-bottom: 1px solid #9d9d9d;
	background: rgba(0, 0, 0, 0.3);
}

th {
    text-align: center;
	width:90%;
	text-shadow: 1px 1px 2px black;
	    background: linear-gradient(120deg, #f0d18f00, #888888, #f0d18f00); /* Orange to dark orange gradient */
}

tr {
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

/* Define the hover effect */
tr:hover {
    background: linear-gradient(135deg, #f0d18f00, #888888, #f0d18f00); /* Orange to dark orange gradient */
}


td:first-child {
    width: 60px; /* Adjust the width for the icon column */
    padding-right: 0; /* Remove padding on the right for the icon column */
}

td:nth-child(2) {
    width: auto; /* Allow the second column to expand */
		text-align:left;
		padding-left:0;
}

/* Hide mobile image by default */
.mobile-image {
    display: none;
}

/* Media query for screens smaller than 768px (typical mobile devices) */
@media screen and (max-width: 768px) {
    /* Hide desktop image on mobile */
    .desktop-image {
        display: none;
    }

    /* Show mobile image on mobile */
    .mobile-image {
        display: block;
    }
	
	th {
	width:95%;
}
}

.down-button {
    display: inline-flex; /* Use flexbox for alignment */
    align-items: center; /* Align items vertically */
    margin: 0 auto; /* Push the button to the right */
    color: white; /* Text color */
    text-decoration: none; /* Remove default underline */
    padding: 8px 20px; /* Add padding */
    background-color: #585858; /* Button background color */
    border-radius: 5px; /* Add border radius */
	text-transform: uppercase;
	font-size:15px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	transition: 0.3s ease;
}

.down-button:hover {
    background-color: #646460; /* Button background color */
}

.down-button:active {
    background-color: #50504d; /* Button background color */
}

.down-icon {
    width: 25px; /* Adjust icon size as needed */
    height: 19px; /* Maintain aspect ratio */
	margin-right:10px;
}

.brimgspace {
	margin-top:12px;
	margin-bottom:-5px;
}

.brimgspace1 {
	margin-top:-8px;
}

.brspace {
	margin-bottom:8px;
}

.flare {
    position: absolute;
    left: 0;
    right: 0;
    height: 100vh;
    width: 100%;
    background-image: url(../img/smoke.png);
	background-size: cover;
    background-position: center;
    -webkit-animation: smoke 5s linear infinite;
    animation: smoke 30s ease-in-out infinite;
    -webkit-animation-fill-mode: upwards;
    animation-fill-mode: upwards;
	opacity:0.3;
    z-index: 1;
}

@keyframes thunderstorm {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5%);
    }
    100% {
        transform: translateX(-5%);
    }
}

.sparkles {
    position: absolute;
    left: 0;
    right: 0;
    height: 100vh; /* Adjust height as needed */
    width: 100%;
    background-image: url(../img/sparkles.png);
    background-position: center top;
    animation: thunderstorm 25s linear infinite;
    opacity: 0.2;
    z-index: 1;
}

.big-logo {
    position: absolute;
    top: 16%; /* Start from the vertical center */
    left: 50%; /* Start from the horizontal center */
    transform: translate(-50%, -50%) scale(0); /* Start with 0 scale */
    z-index: 2;
    animation: logoPopIn 2s ease forwards; /* Apply animation */
}

@keyframes logoPopIn {
    0% {
        transform: translate(-50%, -50%) scale(0.1); /* Start with smaller scale */
        opacity: 0; /* Hidden */
    }
    100% {
        transform: translate(-50%, -50%) scale(1); /* Final size */
        opacity: 1; /* Fully visible */
    }
}

@media screen and (max-width: 768px) {
.big-logo {
    top: 8%; /* Start from the vertical center */
	width:95%;
	margin-top:20px;
}
}

.clock-container {
	width:600px;
	margin-top: 100px;
	margin-bottom:40px;
	border-width: 1px;
	border-style: solid;
    border-image-source: url('../img/border.png');
    border-image-slice: 1;
	background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
    transition: box-shadow 0.3s ease;
	z-index: 2;
}

.clock-container h1 {
	margin-top:4px;
	font-size:15px;
	font-weight:normal;
	color:#fff;
}

.clock-container h2 {
	font-size:22px;
	font-weight:bold;
	margin-bottom:0;
	color:#d1b383;
	z-index:2;
}

.rate-container {
	margin-top:10px;
    position: relative; /* Make the container a positioning context */
}

.rate-border {
    position: absolute; /* Position the background image */

    object-fit: cover; /* Ensure the image covers the container */
	animation: spin 5s linear infinite; /* Apply spin animation */
    transform-origin: center center; /* Set the rotation origin to the center of the image */
    z-index: -1; /* Move the background image behind other content */
}

.status-container {
    margin-bottom: 5px; /* Add some spacing between each status */
}

.status-container img {
	margin-bottom: 2px; /* Add some spacing between each status */
    vertical-align: middle; /* Align the image vertically */
}

@keyframes spin {
    from {
        transform: rotate(0deg); /* Start from 0 degrees */
    }
    to {
        transform: rotate(360deg); /* End at 360 degrees */
    }
}

#countdown-clock {
  font-family: 'AdelonBook', Times New Roman, Times, serif;
  font-size: 32px;
  text-align: center;
  font-weight:normal;
  color:#d1b383;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adjust shadow values as needed */
  margin-top: 5px;
  padding: 5px;
  z-index: 2;
}

#countdown-clock span {
  font-weight: bold;
  color: #ff6347;
  margin: 0 5px;
  z-index: 2;
}

#countdown-clock .label {
  font-size: 16px;
  color: #666;
  z-index: 2;
}

.spacing {
	margin-top:280px;
}

.spacing-right {
	margin-right:50px;
}

/* Define a keyframe animation for rotation */
@keyframes rotateImages {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@media screen and (max-width: 768px) {
.clock-container {
	width:80%;
	margin-top: 100px;
	margin-bottom:60px;
	border-width: 1px;
	border-style: solid;
    border-image-source: url('../img/border.png');
    border-image-slice: 1;
	background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
    transition: box-shadow 0.3s ease;
	z-index: 2;
}
}
	
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px; /* Adjust the gap between images */
    position: relative; /* Establishes the positioning context */
	margin-bottom:50px;
    z-index: 9998; /* Set a high z-index value */
}

.image-wrapper {
    text-align: center;

}

.image-wrapper img {
    max-width: 100%;
    height: auto;
	animation: rotateImages 5s linear infinite; /* Apply the rotation animation */
}

.image-wrapper:hover img {
    filter: brightness(120%); /* Adjust the brightness level as needed */
	margin-top:-5px;
	 transition: transform 0.8s ease; /* Add a transition property */
}

.image-caption {
	font-size:17px;
    margin-top: 10px; /* Adjust the spacing between image and text */

}

.streams {
	display:flex;
	justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	flex-direction:row;
	margin-bottom:100px;
}	
	
	
.twitch-container {
    width: 720px;
    margin: 0 auto; /* Align center */
    border-width: 1px;
    border-style: solid;
    border-image-source: url('../img/border.png');
    border-image-slice: 1;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
    transition: box-shadow 0.3s ease;
	z-index:2;
}

.twitch-container img{
	margin:0 auto;
	margin-bottom:-10px;
}

.twitch-container h2{
	font-size:18px;
	font-weight:normal;
	text-align:center;
	margin-bottom:5px;
}


.twitch-container iframe {
	margin-top:12px;
	margin-bottom:8px;
}


.youtube-container {
    width: 720px;
    margin: 0 auto; /* Align center */
    border-width: 1px;
    border-style: solid;
    border-image-source: url('../img/borderyt.png');
    border-image-slice: 1;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
    transition: box-shadow 0.3s ease;
	z-index:2;
}

.youtube-container img{
	margin:0 auto;
	margin-bottom:-10px;
}

.youtube-container h2{
	font-size:18px;
	font-weight:normal;
	text-align:center;
	margin-bottom:5px;
}

.youtube-container iframe {
	margin-top:12px;
	margin-bottom:8px;
}

/* Keyframes */
@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

.glowing-img {
    animation: wiggle 4s infinite alternate; /* Apply glow animation */
}


@media screen and (max-width: 768px) {

.streams {
	display:flex;
	justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	flex-direction:column;
	margin-bottom:100px;
}	

.twitch-container {
	flex-direction:column;
    width: 80%;
	margin-bottom:40px;
}

.twitch-container iframe {
	width:80%;
}

.youtube-container {
	margin-top:30px;
	flex-direction:column;
    width: 80%;
}

.youtube-container iframe {
	width:80%;
}

.glowing-img {
	flex-direction:column;
}

}

#backToTopWrapper {
    display: none; /* Hide the wrapper by default */
    position: fixed; /* Fixed position */
    bottom: 20px; /* Position from the bottom */
    right: 20px; /* Position from the right */
    z-index: 9999; /* Ensure it's above other elements */
}

#backToTopBtn {
	font-family: 'AdelonBook', Times New Roman, Times, serif;
    width: 50px; /* Set button width */
    height: 40px; /* Set button height */
    padding: 0; /* Remove padding */
    background-color: #555; /* Button background color */
    color: white; /* Button text color */
    border: none; /* Remove border */
    cursor: pointer; /* Add cursor pointer */
    border-radius: 10%; /* Make button round */
    font-size: 16px; /* Font size */
	text-transform:uppercase;
}

#backToTopBtn:hover {
    background-color: #333; /* Change background color on hover */
}

#backToTopBtn:active {
    background-color: #777; /* Change background color on hover */
}


.footer {
	font-family: 'AdelonBook', Times New Roman, Times, serif;
    background-color: #2b1f0563; /* Set background color */
	border-top:1px solid rgba(255, 255, 255, 0.5);
    color: #fff; /* Set text color */
    padding: 10px 0; /* Add padding */
    text-align: center; /* Align text center */
 bottom: 0; /* Stick it to the bottom */
}

.footer-content {
    max-width: 1200px; /* Set max width */
    margin: 0 auto; /* Center content horizontally */
}

.footer-content a {
	color:rgba(256, 256, 256, 0.8);
	text-decoration:none;
}

.footer-content a:hover {
	color:#fff;
}

.footer-content a:active {
	color:#fff;
}

.footer p {
    margin-bottom:0; /* Remove default margin */
	font-size:15px;
	color: rgba(256, 256, 256, 0.8);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Add text shadow */
}

.footer-links {
    list-style-type: none; /* Remove list bullet points */
    padding: 0; /* Remove default padding */
}

.footer-links li {
    display: inline-block; /* Display links inline */
    margin: 0 10px; /* Add space between links */
}

.footer-links li a {
    color: #fff; /* Set link color */
    text-decoration: none; /* Remove underline */
}

.footer-links li a:hover {
    text-decoration: underline; /* Add underline on hover */
}

.footer-links img {
    margin-bottom: -15px; /* Remove default margin */
	margin-top: -5px;
}