@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
    padding: 0px;
    margin: 0px;
}

html, body {
  font-family: 'Roboto', sans-serif;
  min-height: 300vh;
  background: #000;
  width: 100%;
  height: 100%;
}

header {
    background-color: rgba(0, 0, 0, 0.5); /* Change the color and opacity as needed */
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100; /* This ensures the header is always on top */
}

nav {
    /* Your existing nav styles */
    width: 90%; /* Adjust as needed */
    margin: auto; /* Centers the nav in the header */
}

:root {
    --text-color: #73CFEEff; /* sky-blue */
    --bg-color: #0E0C17ff; /* rich-black */
    --accent-color: #FB54BAff; /* brilliant-rose */
}
body {
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: all 0.5s ease;
}
h1 {
    color: var(--accent-color);
}

/* Styles for navigation menu */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

nav .logo {
    display: flex;
    align-items: center;
}

nav .logo img {
    height: 80px;
    width: auto;
}

nav .logo h1 {
    margin-left: 20px;
    font-size: 2em; /* Adjust this value to your liking */
}

nav .menu {
    display: flex;
    gap: 20px;
    z-index: 3;
}

nav .menu a {
    text-decoration: none;
    color: var(--text-color); /* This will set the text color to the sky-blue color defined in your root */
}

/* New menu icon styles */
.container {
    width: 60px; /* Adjust this value to your liking */
    height: 60px; /* Adjust this value to your liking */
    display: none; /* Hidden by default, shown in media query */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1; /* Add this line to ensure the icon is above the menu items */
}

.stick {
    width: 60px; /* Adjust this value to your liking */
    height: 6px; /* Adjust this value to your liking */
    border-radius: 3px; /* Adjust this value to your liking */
    margin-bottom: 10px; /* Adjust this value to your liking */
    background-color:  #2DFDB9;
    display: inline-block;
}

.stick:last-child {
  margin-bottom: 0px;
}

/* ... stick animations ... */

/* Responsive styles */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        text-align: center;
    }

    nav .logo {
        flex-direction: column;
        align-items: center;
    }

    nav .logo img {
        height: 100px;
    }

    nav .logo h1 {
        margin-left: 0;
        font-size: 1.5em; /* Adjust this value to your liking */
    }

    nav .menu {
        flex-direction: column;
        display: none;
        line-height: 2; /* Adjust this value to your liking */
    }

    nav .menu a {
        font-weight: bold; /* Makes the font bold */
        padding: 0 2px; /* Adjust horizontal padding to each menu item */
    }

    .container {
        display: flex; /* Show the new menu icon on small screens */
    }
}

/* Ensure the menu is displayed inline on larger screens */
@media (min-width: 769px) {
    nav .menu {
        display: flex;
        justify-content: space-between; /* Add this line */
    }

    .container {
        display: none; /* Hide the menu icon on large screens */
    }
}


.wrap-header
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.wrap-footer
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

header, footer {
    width: 100%;
    position: relative;
}

.centered-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.lightings-header
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -60px;
}

.lightings-footer {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

section
{
	/*border-radius*/
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	height: 20px;
	width: 100%;
	position: relative;
	margin: auto;

}

.one
{
	-webkit-animation: one 5s ease-in-out infinite alternate;
	-moz-animation: one 5s ease-in-out infinite alternate;
	-ms-animation: one 5s ease-in-out infinite alternate;
	-o-animation: one 5s ease-in-out infinite alternate;
	animation: one 5s ease-in-out infinite alternate;
}

@-webkit-keyframes one { 
  from { -webkit-box-shadow: 0 0 250px 20px #6B1642; }
  to { -webkit-box-shadow: 0 0 100px 15px #FB54BA; }
}
@-moz-keyframes one { 
  from { -moz-box-shadow: 0 0 250px 20px #6B1642; }
  to { -moz-box-shadow: 0 0 100px 15px #FB54BA; }
}
@-o-keyframes one { 
  from { -o-box-shadow: 0 0 250px 20px #6B1642; }
  to { -o-box-shadow: 0 0 100px 15px #FB54BA; }
}
@keyframes one { 
  from { box-shadow: 0 0 250px 20px #6B1642; }
  to { box-shadow: 0 0 100px 15px #FB54BA; }
}

.two
{
	width: 90%;
	-webkit-animation: two 4s ease-in-out infinite alternate;
	-moz-animation: two 4s ease-in-out infinite alternate;
	-ms-animation: two 4s ease-in-out infinite alternate;
	-o-animation: two 4s ease-in-out infinite alternate;
	animation: two 4s ease-in-out infinite alternate;
}

@-webkit-keyframes two { 
  from { -webkit-box-shadow: 0 0 250px 20px #73CFEE; }
  to { -webkit-box-shadow: 0 0 100px 15px #E67EC5; }
}
@-moz-keyframes two { 
  from { -moz-box-shadow: 0 0 250px 20px #73CFEE; }
  to { -moz-box-shadow: 0 0 100px 15px #E67EC5; }
}
@-o-keyframes two { 
  from { -o-box-shadow: 0 0 250px 20px #73CFEE; }
  to { -o-box-shadow: 0 0 100px 15px #E67EC5; }
}
@keyframes two { 
  from { box-shadow: 0 0 250px 20px #73CFEE; }
  to { box-shadow: 0 0 100px 15px #E67EC5; }
}

.three
{
	width: 80%;
	-webkit-animation: three 3s ease-in-out infinite alternate;
	-moz-animation: three 3s ease-in-out infinite alternate;
	-ms-animation: three 3s ease-in-out infinite alternate;
	-o-animation: three 3s ease-in-out infinite alternate;
	animation: three 3s ease-in-out infinite alternate;
}

@-webkit-keyframes three { 
  from { -webkit-box-shadow: 0 0 250px 20px #0E0C17; }
  to { -webkit-box-shadow: 0 0 100px 15px #73CFEE; }
}
@-moz-keyframes three { 
  from { -moz-box-shadow: 0 0 250px 20px #0E0C17; }
  to { -moz-box-shadow: 0 0 100px 15px #73CFEE; }
}
@-o-keyframes three { 
  from { -o-box-shadow: 0 0 250px 20px #0E0C17; }
  to { -o-box-shadow: 0 0 100px 15px #73CFEE; }
}
@keyframes three { 
  from { box-shadow: 0 0 250px 20px #0E0C17; }
  to { box-shadow: 0 0 100px 15px #73CFEE; }
}

.four
{
	width: 70%;
	-webkit-animation: four 2s ease-in-out infinite alternate;
	-moz-animation: four 2s ease-in-out infinite alternate;
	-ms-animation: four 2s ease-in-out infinite alternate;
	-o-animation: four 2s ease-in-out infinite alternate;
	animation: four 2s ease-in-out infinite alternate;
}

@-webkit-keyframes four { 
  from { -webkit-box-shadow: 0 0 250px 20px #6B1642; }
  to { -webkit-box-shadow: 0 0 100px 15px #FB54BA; }
}
@-moz-keyframes four { 
  from { -moz-box-shadow: 0 0 250px 20px #6B1642; }
  to { -moz-box-shadow: 0 0 100px 15px #FB54BA; }
}
@-o-keyframes four { 
  from { -o-box-shadow: 0 0 250px 20px #6B1642; }
  to { -o-box-shadow: 0 0 100px 15px #FB54BA; }
}
@keyframes four { 
  from { box-shadow: 0 0 250px 20px #6B1642; }
  to { box-shadow: 0 0 100px 15px #FB54BA; }
}

.five
{
	width: 60%;
	-webkit-animation: five 1s ease-in-out infinite alternate;
	-moz-animation: five 1s ease-in-out infinite alternate;
	-ms-animation: five 1s ease-in-out infinite alternate;
	-o-animation: five 1s ease-in-out infinite alternate;
	animation: five 1s ease-in-out infinite alternate;
}

@-webkit-keyframes five { 
  from { -webkit-box-shadow: 0 0 250px 20px #73CFEE; }
  to { -webkit-box-shadow: 0 0 100px 15px #E67EC5; }
}
@-moz-keyframes five { 
  from { -moz-box-shadow: 0 0 250px 20px #73CFEE; }
  to { -moz-box-shadow: 0 0 100px 15px #E67EC5; }
}
@-o-keyframes five { 
  from { -o-box-shadow: 0 0 250px 20px #73CFEE; }
  to { -o-box-shadow: 0 0 100px 15px #E67EC5; }
}
@keyframes five { 
  from { box-shadow: 0 0 250px 20px #73CFEE; }
  to { box-shadow: 0 0 100px 15px #E67EC5; }
}


/* Dark mode specific styles */
.dark .jumbo {
    background-image: var(--stripesDark), var(--rainbow);
    filter: blur(10px) opacity(50%) saturate(200%);
}

.dark .jumbo::after {
    background-image: var(--stripesDark), var(--rainbow);
}