*,
*:before,
*:after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: #000000;
	font-family: "raleway", sans-serif;

}

#bg-hex {
	position: absolute;
	height: 100vh;
	width: 100vw;
	top: 0;
	z-index:9;
	left: 0;
	overflow: hidden;
}

@keyframes animate {
	0% {
		filter: hue-rotate(0deg);
	}
	100% {
		filter: hue-rotate(360deg);
	}
}

.light {
	--size: 100px;
	display: none;
	position: absolute;
	top: 50vh;
	left: 50vw;
	transform: translate(-75%, -50%);
	width: var(--size);
	height: var(--size);
	border-radius: 100%;
	box-shadow: 0 0 10px 10px #000000;
	filter: blur(20px);
}

.hexagon {
	position: relative;
	width: 100px;
	height: 110px;
	background: #000000;
	margin: 2px;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hexagon::before {
	content: " ";
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	pointer-events: none;
	background: rgba(255, 255, 255, 0.02);
}

.row {
	display: inline-flex;
	margin-top: -30px;
	margin-left: -50px;
}

.row:nth-child(even) {
	margin-left: 1px;
}


* {
	margin: 0;
	padding: 0;
	block-size: border-box;
	font-family: 'open Sans', sans-serif;
}



/* for the logo soumyadeep name */



@import url(https://fonts.googleapis.com/css?family=Raleway:400,,800,900);
 

 .container {
	 position: static;
	 display: flex;
	 justify-content: center;
	 align-items: flex-start;
	
}
 .title {
	 font-weight: 700;
	 color: transparent;
	 font-size: 40px;
	 background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;
	 background-position: 83% 40%;
	 -webkit-background-clip: text;
	 position:absolute;
	 top: 0px;
	 letter-spacing: 0px;
	 z-index: 9;
}



 .subtitle {
	color: aliceblue;
	 display: block;
	 position: fixed;
	 text-align: center;
	 text-transform: uppercase;
	 top: 43px;
	 z-index: 9;

}

/* for wizard logo */


.logo{
	z-index: 11;
	position: fixed;
	right: 0;
	margin: 10px;
	top: 0px;
}


/* for the navbar section */


.navbar{
	width: 100%;
	height: 80px;
	min-width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 9;
}


.navbar .toggle_btn{
	color: white;
	cursor: pointer;
	position: absolute;
	left: 65px;
	font-size: 1.5rem;
	z-index: 9;
}

@media (min-width:650px) and (max-width: 2000px) {
	.toggle_btn{
		display: none;
	}
  }

.dropdown-menu{
	position: absolute;
	right: 2rem;
	top: 100px;
	width: 300px;
	height: 400px;
	background: rgba( 255, 255, 255, 0.25 );
	box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
	backdrop-filter: blur( 8.5px );
	-webkit-backdrop-filter: blur( 8.5px );
	border-radius: 10px;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	z-index: 9;
	display: none;
}





button {
	position: relative;
	background: none;
	border: 4px solid;
	font: inherit;
	line-height: 0.3;
	margin: 0.5em;
	padding: 1em 2em;
	cursor: pointer;
	color: var(--color);
	transition: 0.5s;
	display: flex;
	top: 100px;
	z-index: 9;
	
}


button:hover, button:focus {
	border-color: var(--hover);
	color: #fff;
}

#home {
	--color: #b64d4d;
	--hover: #ffffff;
	position: relative;
}

#home:hover, #home:focus {
	box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
	transform: translateY(-0.25em);
}
#home:active {
	transform: scale(0.95);
}


.about {
		--color: #59a159;
		--hover: #ffffff;
		position: relative;
		
}
.about:hover, .about:focus {
	box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
	transform: translateY(-0.25em);
}


.skills {
		--color: #6d5aa3;
		--hover: #ffffff;
		position: relative;
		
}
.skills:hover, .skills:focus {
	box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
	transform: translateY(-0.25em);
}

.projects {
		--color: #57a4a5;
		--hover: #ffffff;
		position: relative;
		
}
.projects:hover, .projects:focus {
	box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
	transform: translateY(-0.25em);
}


.resume {
	--color: #ad4141;
	--hover: #ffffff;
	position: relative;
}

.resume:hover, .resume:focus{
	box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
	transform: translateY(-0.25em);
}


@media screen and (max-width: 710px) {
    button {
        padding: 0.9em 1.4em;
    }
	.title{
		font-size: 39px;
	}
}

@media screen and (max-width: 650px) {
	button {
		display: none;
	}
	.logo{
		display: none;
	}
	.title {
		font-size: 30px;
	}
	.subtitle {
		top: 35px;
	}
}

@media  screen and (max-width: 350px) {
	.title {
		font-size: 25px;
	}
	.subtitle {
		top: 30px;
	}
}

@media  screen and (max-width: 400px) {
	.title {
		font-size: 25px;
	}
	.subtitle {
		top: 30px;
		font-size: 15px;
	}
}





/* box blurr and content */

.box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 30px;
	border-radius: 20px;
	width: min(900px, 90%);
	z-index: 17;
  }

.box p {
	color: aliceblue;
}

.main_box{
	width: 100vw;
	position: absolute;
	top: 90;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.glass_morf{
	background: rgba( 255, 255, 255, 0.25 );
	box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
	backdrop-filter: blur( 3px );
	-webkit-backdrop-filter: blur( 3px );
	border-radius: 10px;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
}



@media  screen and (max-width: 1240px) {
	.box{
		width: min(850px, 90%);
	}
}

@media  screen and (max-width: 1180px) {
	.box{
		width: min(800px, 90%);
	}
}

@media  screen and (max-width: 1120px) {
	.box{
		width: min(750px, 90%);
	}
}

@media  screen and (max-width: 1130px) {
	.box{
		width: min(700px, 90%);
	}
}

@media  screen and (max-width: 1030px) {
	.box{
		width: min(650px, 90%);
	}
}

@media  screen and (max-width: 980px) {
	.box{
		width: min(600px, 90%);
	}
}

@media  screen and (max-width: 930px) {
	.box{
		width: min(550px, 90%);
	}
}

@media  screen and (max-width: 880px) {
	.box{
		width: min(500px, 90%);
	}
}

@media  screen and (max-width: 830px) {
	.box{
		width: min(450px, 90%);
	}
}

@media  screen and (max-width: 780px) {
	.box{
		width: min(400px, 90%);
	}
}

@media  screen and (max-width: 730px) {
	.box{
		width: min(375px, 90%);
	}
}

@media  screen and (max-width: 670px) {
	.box{
	width: min(350px, 90%);
	}
}

@media  screen and (max-width: 650px) {
	.box{
	width: min(600px, 90%);
	}
}