@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
html{
	font-size:12px;
}
* {
	box-sizing: border-box;
	margin: 0px;
	padding: 0px
}

body {
	background: linear-gradient(-45deg, #077eeedc, #1260c5e5, #23a5d5e8, #23d5abc7);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}
h1{
	font-size: 2rem;
}

.container {
	background-color: aliceblue;
	--bs-gutter-x: 0px
}

img {
	width: 100%;
}
header {
	margin-block-end: .5rem;
	width: 100%;
}
hgroup {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: .5rem;

}
main .col {
	width: 99%;
	margin: .6rem auto;


}

main {
	  font-size: 2.5rem;
            font-family: 'Open Sans', sans-serif;
			font-weight: 500;
            color: #1d2a3b;}
		
		main ul{
	padding: 2px 5px;
	margin-inline-start: 25px;
}

/* main .col:hover {
	
	box-shadow: 2px 15px 30px rgb(139, 131, 131);
} */

main .container {
	display: grid;
	justify-content: center;
}
#w_icon {
	position: fixed;
	right: 350rem;
	bottom: 5rem;
	z-index: 3;
	width: 8rem;
	height: 4rem;

}

/* #w_icon img {
	width: 8rem;
} */
footer{
	margin-block-start: 2px;
}
footer .credits {
	font-size: 13px;
	display: flex;
	justify-content: center;

}
.modal-footer img {
	width: 100%;
}

/*mobile*/


@media (max-width: 1980px) {
	#w_icon{
	  right:300px !important; 
	}
	main{
		font-size:2.4rem;
	}
  }
  @media (max-width: 1800px) {
	#w_icon{
	  right:200px !important; 
	}
	main{
		font-size:2.2rem;
	}
  }
  @media (max-width: 1600px) {
	#w_icon{
	  right:150px !important; 
	}
  }


@media(max-width:1500px) {
	main{
		font-size:2rem;
	}
	#w_icon{
		right:110px !important; 
	  }
}
@media(max-width:1200px) {
	main{
		font-size:1.8rem;
	}
	#w_icon {right: 1.4rem!important;	}
	
}
@media(max-width:979px) {
	
	h1{
		font-size: 1.6rem;
	}
	#w_icon {
		right: 1.1rem!important;		
	}
	main{
		font-size: 1.6rem;
	}
}

@media(max-width:768px) {
	#resim1 {
		width: 100%;
	}
	h1{
		font-size: 1.3rem!important;
	}
	#w_icon {
		width: 5rem!important;
		right: 1.2rem!important;		
	}
	main{
		font-size: 1.4rem;
	}
}
@media(max-width:576px) {
	

	#w_icon {
		width: 3.7rem!important;
		right: .2rem!important;
		bottom: .5rem!important;
	}
	h1{
		font-size: 1.1rem;
	}
	main{
		font-size: 1.1rem;
	}
}