.navbar {
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background-color: #22222200;
	padding: 5px;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	z-index: 200000000;
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
	transition: background-color 0.5s ease-in-out;
}
  
.navbar:hover {
	opacity: 1;
	background-color: #222222b3;
	transition: background-color 0.5s ease-in-out;
}

.navbar:hover .nav-btn{
	color: white;
	transition: color 0.5s ease-in-out;
}

.navbar .nav-btn:hover{
	color:aquamarine;
}

.logo img {
	border-radius: 25px;
	opacity: 1;
}

.logo.normal img {
	animation: fade-in-navbar 1s ease-in;
}

@keyframes fade-in-navbar{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 100%;
	}
} 
  
.nav-buttons {
	display: flex;
	align-items: flex-start;
	margin-left: 3%;
}

.nav-buttons.normal{
	animation: fade-in-navbar 1.5s ease-in-out;
}

.nav-btn {
	border: none;
	background: none;
	display: inline-block;
	margin-left: 20px;
	font-weight: bold;
	color: #ffffff1c;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	z-index: 2;
	transition: color 0.5s ease-in-out;
}

@media only screen and (max-height: 2160px) {
	.nav-btn{
		font-size: 36px;
	}
}

@media only screen and (max-height: 1080px) {    
	.nav-btn{
		font-size: 26px;
	}
}

@media only screen and (max-height: 720px) {    
	.nav-btn{
		font-size: 16px;
	}
}

@media only screen and (max-width: 1170px) and (max-height: 2532px){
	.nav-btn{
		font-size: 36px;
	}
}

.nav-btn:hover{
	color: grey;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
	color: white;
    display: none;
    position: absolute;
	border-radius: 2%;
    z-index: 1;
	background: rgba(0, 0, 0, 0.384);
}

@media only screen and (max-height: 4160px) {
.dropdown-content{
	min-width: 250px;
}

	.logo img {
		margin-left: 100%;
		height: 100px; /* Change this to the height of your logo */
	}	

	.dropdown-content video{
		width: 300px;
	}

}

@media only screen and (max-height: 1080px) {    
	.dropdown-content{
		min-width: 200px;
		box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.555);	
	}
	.logo img {
		margin-left: 100%;
		height: 40px; /* Change this to the height of your logo */
	}	
}

@media only screen and (max-height: 720px) {    
	.dropdown-content{
		min-width: 140px;
		box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.555);	
	}
	.logo img {
		margin-left: 100%;
		height: 40px; /* Change this to the height of your logo */
	}	
}

@media only screen and (max-width: 1170px) and (max-height: 2532px){
	.dropdown-content{
		min-width: 70px;
	}

	.logo img {
		margin-left: 50%;
		height: 40px; /* Change this to the height of your logo */	
		height: 80px;
	}
}

.dropdown-content .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.dropdown-content .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

.dropdown-content .project-btn {
    border: none;
    background: red;
    padding: 0;
    margin: 0;
}

.dropdown-content .project-btn img {
    width: 100%;
    height: auto;
}

.dropdown-content .centered {
    text-align: center;
    margin-top: 5px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropbtn:hover {
    font-weight: bolder;
}

.dropdown-content video:hover {
	border-color: red;
    background-color: rgb(255, 0, 0);
    cursor: pointer;
}

.dropdown-content button:hover{
    background-color: rgb(255, 0, 0);
    cursor: pointer;
}

pre code {
	pointer-events: none;
	user-select: none;
  }