html{
	scroll-behavior: smooth;
	font-family: consolas, arial, monospace;
}

:root{
	--primary-bg: rgb(153, 217, 234);
	--secondary-bg: rgb(92, 197, 222);
	--body-text: #333;
	--primary-text: #fff;
	--primary-f-bg: #333;
	--primary-f-text: rgb(153, 217, 234);
	--primary-misc-col: #fff;
	--secondary-misc-col: #333;
	--page-glass: rgba(100, 100, 100, 0.1);
	--jump-bg: rgba(95, 115, 150, 0.5);
	--jump-text: #fff;
}

body{
	margin: 0;
	border: 0;
	outline: 0;
	border: 0;
	background-color: var(--primary-bg);
	transition: background-color 2s ease;
}

a{
	text-decoration-line: none;
	color: white;
}

button{
	cursor: pointer;
}

.dark-mode{
	--primary-bg: #333;
	--secondary-bg: #777;
	--body-text: #bbb;
	--primary-text: rgb(153, 217, 234);
	--primary-f-bg: #000;
	--primary-f-text: #aaa;
	--primary-misc-col: #000;
	--secondary-misc-col: rgb(153, 217, 234);
	--page-glass: rgba(0, 0, 0, 0.3);
	--jump-bg: rgba(255, 255, 255, 0.7);
	--jump-text: rgb(0, 0, 0);
}

.headImg{
	background-image: url("../images/kreepy_inc_icon_2025.png"); /*color: rgb(153, 217, 234)*/
	background-size: cover;
	background-position: center;
	height: 500px;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 0;
}

.page{
	background-image: linear-gradient(to bottom, var(--primary-bg), var(--secondary-bg)); /*bacground-ease*/
	position: relative;
	top: 0;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	z-index: 0;
	margin-top: 500px;
	height: 2000px;
	transition: all 10s ease;
}

.heading{
	position: sticky;
	padding: 1rem;
	border:none;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	background-color: rgba(255, 255, 255, 0.1);
	justify-content: center;
	height: 60px;
	top: 0;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	transition: background-color 2s ease;
}

.name{
	font-size: 30px;
	position: relative;
	background-color: none;
	color: var(--primary-text);
	margin: 0;
	font-family: arial;
	font-weight: bolder;
	transition: all linear 60ms;
	cursor: pointer;
}

.name:hover{
	word-spacing: 15px;
}

.slogan{
	color: var(--primary-text);
	transition: color 2s ease;
}

.dropdown-button{
	border: none;
	background-color: rgba(255, 255, 255, 0);
	color: white;
	padding: 1rem;
	width: 60px;
	margin-right: 1%;
	height: 60px;
	font-size: 30px;
	font-weight: bolder;
	position: absolute;
	top: 0;
	right: 10%;
	justify-content: center;
	letter-spacing: 5px;
	transition: all 60ms linear;
	cursor: pointer;
	z-index: 53;
}

.dropdown-button:hover{
	letter-spacing: 10px;
}

.cycle{
	position: absolute;
	right: 0;
	border: none;
	background-color: none;
	width: 45px;
	height: 45px;
	top: 20px;
	transition: all 120ms ease;
	cursor: pointer
}

.cycle:hover{
	transform: scale(0.9);
}

.sun{
	background-color: var(--primary-misc-col);
	border-radius: 50%;
	width: 35px;
	height: 35px;
	transition: background-color 2s ease;
}

.moon{
	background-color: var(--secondary-misc-col);
	position: absolute;
	border-top-left-radius: 100px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 100px;
	border-bottom-right-radius: 0;
	top: 9px;
	left: 7px;
	width: 30%;
	height: 25px;
	transition: background-color 2s ease;
	transform: rotate(-45deg);
}

#dropdown-menu{
	padding: 0;
	background-color: var(--page-glass);
	position: fixed;
	top: 0;
	right: 0;
	width: 0;
	height: 650px;
	transition: width 120ms ease, background-color 2s ease;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 100;
}

#dropdown-content{
	background-color: none;
	position: relative;
	top: 10%;
	display: grid;
	gap: 10px;
	height: auto
}

.x{
	background-color: var(--page-glass);
	color: var(--secondary-misc-col);
	border: none;
	text-align: center;
	padding: 0.4rem;
	width: 20%;
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition: background-color 60ms ease, color 2ms ease;
	z-index: 200;
}

.x:hover{
	background-color: rgba(255, 0, 0, 0.5);
	color: white;
}

.dropdown-content li{
	display: block;
	position: relative;
	right: 30px;
	padding: 1rem;
	background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2), rgba(0, 200, 255, 0.5));
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	width: 100%;
	cursor: pointer;
	border-radius: 10px;
}

.dropdown-content li:hover{
	background-image: linear-gradient(to left, rgba(255, 255, 255, 0.5), rgba(0, 255, 255, 0.7));
}

.text{
	color: var(--body-text);
}

.k{
	color: var(--primary-text);
	transition: color 2s ease;
}

.banner-container{
	background-color: red;
	padding: 1rem;
}

.footer{
	background-color: var(--primary-f-bg);
	color: var(--primary-f-text);
	position: relative;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	height: 500px;
	transition: background-color 2s ease;
	z-index: 0;
}

.insta{
	background-color: white;
	position: relative;
	width: 60px;
	height: 60px;
	border: 5px solid white;
	border-radius: 20px;
}

.insta::after{
	content: "";
	position: absolue;
	padding: 1rem;
	border: 2px solid red;
	border-radius: 50px;
	top: 10px;
	width: 20px;
	height: 50px;
	transform: scale(1);
	opacity: 1;
}

.jumper-line{
	position: fixed;
	bottom: 0;
	background-color: none;
	height: 50px;
	width: 100%;
	align-content: center;
	justify-content: center;
	z-index: 0;
	
}

.jumper{
	background-color: var(--jump-bg);
	position: relative;
	left: 45%;
	bottom: 10px;
	color:  var(--jump-text);
	font-size: xx-large;
	font-weight: bolder;
	text-align: center;
	border-radius: 10px;
	cursor: pointer;
	height: 70px;
	width: 50px;
	transition: all 60ms linear, background-color 2s ease, color 2s ease;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	z-index: 20;
}

.jumper:hover{
	font-size: small;
	bottom: 20px;
}