.nav-bar {
	display:flex;
	align-items:center;
	justify-content: center;
	height:80px;
}
.nav, .nav0 {
	color: #ffffff;
	text-decoration: none;
	padding: 10px 10px; /* Increase horizontal padding */
	transition: all .5s ease;
	position: relative;
	flex: auto;
	flex-wrap: wrap;
}
.nav:hover{
	text-shadow:
    1px 1px 0 #ffffff,
  	transition all .5s;
}
.nav::before{
	content:"";
	width:100%;
	height:1px;
	bottom:0;
	left:0;
	position: absolute;
	background-color:#ffffff;
	transform-origin: center;
  transform: scaleX(0);
	transition: transform 0.5s ease;
}
.nav:hover::before{
	transform: scaleX(1);
}
.nav0:hover{
	text-shadow:1px 1px 0 #000,1px 1px 0 #000,1px 1px 0 #000,1px 1px 0 #000;
}
.nav0:hover .dot{
	box-shadow: 0px 1px #016A70, 1px 1px #016A70;
}
.main {
	color:#000;
	display:flex;
  justify-content: center;
  align-items: center;
	font-size: 50px;
}
.container {
	display: block;
	height: 63%;
	cursor: context-menu;
	margin-top: 200px;
}
.paragraph{
	width:65vw;
	color: #000;
	margin-left: auto;
  margin-right: auto;
	text-align : center;
}
.name{
	transition: all 0.5s ease;
	font-weight: bold;
}
.name:hover {
	text-shadow:
    1px 1px 0 #000,
    1px 1px 0 #000,
    1px 1px 0 #000,
    1px 1px 0 #000;
}
::selection {
  color: #8DDFCB;
  background: #000;
}


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

	.nav, .nav0 {

		padding: 10px 5px; /* Increase horizontal padding */

	}

}

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

	.nav, .nav0 {

		padding: 10px 5px; /* Increase horizontal padding */
		margin: 0px;
	}

}

/* Add to existing CSS */
.hamburger {
    display: none; /* Hide by default */
    cursor: pointer;
    font-size: 30px; /* Adjust based on your design preferences */
    color: #ffffff; /* Change color as needed */
}

/* Mobile-specific styles */

@media only screen and (max-width: 340px) {
    .hamburger {
        display: flex;
		padding-left: 10px;
    }

	.animate{
	transform:skew(180deg);
	transition: transform 0.5s ease;
	
}

.unanimate{
	transform:skew(180deg);
	transition: transform 0.5s ease;
	
}
    
	   .menu {
        flex-direction: row;
        width: 100%;
    }

    .nav {
        display: flex; 
        text-align: left;
		padding: 10px;
		width: fit-content;
    }

    .nav-bar {
        align-items: flex-start;
    }

	.nav::before{
		transform-origin: left;
	}

}