@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* Global Styles - BootStrap */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color:  rgb(0, 217, 255);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px  rgb(0, 217, 255);;
  outline: 0 none;
}
#banner .image{
    position: relative;
}
#banner .image::before{
	content: "////////";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 38rem;
    font-weight: 400;
    line-height: 20rem;
    color: #00fff2;
    opacity: 0.2;
    z-index: -100;
}
#banner .image img{
    max-width: 600px;
    margin: auto;
}

/* Global Styles */
* {
	padding: 0;
	margin: 0;
	outline: none;
	border: none;
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: #fff;
}
body {
	overflow-x: hidden;
	font-family: "poopins", sans-serif;
	color: #fff;
	background: radial-gradient(
		circle,
		rgba(121, 219, 198, 0.233),
		rgba(0, 0, 0, 1)
	);
	background-color: black;
	background-position: center;
	background-repeat: no-repeat;
	background-size:contain;
}

nav {
	max-width: 1200px;
	padding: 2rem 1rem;
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	align-items: center;
}
#logo-image {
	position: relative;
	width: 100px;
	top: -1rem;
}
.nav-links {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 3rem;
}
.link a {
	position: relative;
	padding-bottom: 0.75rem;
	color: rgb(255, 255, 255);
}
.link a::after {
	content: "";
	position: absolute;
	height: 3px;
	width: 0;
	bottom: 0;
	left: 0;
	background-color: rgb(0, 217, 255);
	transition: all 0.3s ease;
}
.link a:hover::after {
	width: 70%;
}

footer {
	color: #fff;
	text-align: center;
	padding: 1rem 0;
	background-color: #0b3d3a6b;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	border: solid 1px #0b3d3a;
	backdrop-filter: blur(5px);
}