.nav-bar {
	display:flex;
	align-items:center;
	justify-content: center;
	height:40px;
}
.nav, .nav0{
	color:#ffffff;
	text-decoration:none;
	padding:15px;
	transition: all .5s ease;
	position : relative;
}
.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: bottom;
  transform: scaleX(0);
	transition: transform 0.5s ease;
}
.nav:hover::before{
	transform: scaleX(1);
}
.dot{
	display:inline-block;
	width:10px;
	height:10px;
	border-radius:10px;
	background-color:#000;
	transition: all 0.5s;
	animation-name: blinking;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
.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;
}
@keyframes blinking{
	0%{
		height:2px;
		transform: translateY(-100%);
	}
	5%{
		height:10px;
		transform: translateY(0%);
	}
	7%{
		height:2px;
		transform: translateY(-100%);
	}
	10%{
		height:10px;
		transform: translateY(0%);
	}
	68%{
		height:10px;
		transform: translateY(0%);
	}
	70%{
		height:2px;
		transform: translateY(-100%);
	}
	76%{
		height:10px;
		transform: translateY(0%);
	}
	100%{
		height:10px;
		transform: translateY(0%);
	}
}
.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;
}


/* Mobile compatibility */
@media only screen and (max-width: 768px) {
    .nav-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
    }

    .nav, .nav0 {
        padding: 10px;
        font-size: 14px; /* Adjust font size for smaller screens */
    }

    .nav-bar, .main, .container, .paragraph {
        flex-direction: column;
        align-items: center;
    }

    .main {
        font-size: 30px; /* Adjust main section font size */
    }

    .paragraph {
        width: 85%; /* Adjust paragraph width */
    }
}

/* Hamburger menu for smaller screens */
@media only screen and (max-width: 768px) {
    .hamburger-menu {
        display: block;
        cursor: pointer;
    }

    .nav-menu {
        display: none; /* Hide nav menu by default on mobile */
        flex-direction: column;
        align-items: center;
    }

    .hamburger-menu.active + .nav-menu {
        display: flex; /* Show menu when hamburger is active */
    }
}


.logo {
    height: 40px; /* Adjust the height to fit your navbar's size */
    width: auto; /* Keeps the logo's aspect ratio intact */
}

.logo-link {
    display: inline-flex;
    align-items: center;
    position: relative; /* Needed for the positioning of the pseudo-element */
    margin-right: 20px; /* Adjust if you need more space around the divider */
}

.logo-link::after {
    content: "";
    position: absolute;
    right: -10px; /* Adjust this value based on your specific spacing needs */
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: white; /* Set the color of the divider */
}