.navigation {
	overflow: hidden;
	background-color: #223;
}

.navigation a {
	float: left;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
	cursor: pointer;
	font-family: 'Rubik';
	transition: background-color 0.15s, color 0.15s;
}


.navigation a:hover {
	background-color: #ddd;
	color: black;
  }
  
.navigation a.active {
	background-color: lightseagreen;
	color: white;
}

body {
	background-color: #1c1c1c;
	margin: 0;
	overflow-x: hidden;
}



html, body {
	min-height: 100%;
	min-width: 100%;
}


.box {
	display: flex;
	flex-wrap: wrap;
	row-gap: 10px;
	column-gap: 10px;
	margin: 50px;
}

#script {
	border: 2px solid #1c1c1c;
	animation-name: grad;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 3s;
	border-radius: 10px;
	width: 300px;
	height: 150px;
	text-align: center;
	margin: 0;
	transition: transform .2s;
}

#scriptdownload {
	text-decoration: none;
	color: white;
	cursor: pointer;
	top: 38px;
	position: relative;
	padding: 10px 12px;
	border-radius: 10px;
	transition: all .3s;
	font-family: 'Comfortaa';
}

#scriptdownload:hover {
	background-color: white;
	color: black;
}

#scriptname {
	margin: 0;
	position: relative;
	top: -15px;
	text-decoration: none;
	color: aqua;
	font-family: 'Rubik';
	cursor: pointer;
}

#scriptname:hover {
	text-decoration: underline;
}

#scriptdescription {
	top: -85px;
	position: relative;
	font-size: 20px;
	color: gray;
	font-family: 'Rubik';
	font-weight: lighter;
}

@keyframes grad {
    0% {
        border: 2px solid #1c1c1c;
    }
    100% {
        border: 2px solid #1fc1d6;
    }
}

#scriptbox {
	margin: 50px;
	width: 95%;
	height: 80vh;
	border: 1px solid gray;
	display: flex;
	align-items: left;
	flex-direction: column;
	border-radius: 20px;
}

#dropdown-button {
	position: relative;
	z-index: 1;
	background-color: transparent;
	border: none;
	outline: none;
	color: #ffffffcc;
	font-size: 30px;
	font-family: 'Rubik';
	cursor: pointer;
	transition: all .3s;
	align-self: start;
}

#dropdown {
	position: absolute;
	opacity: 0;
	transition: opacity 0s;
	width: 80%;
}

#dropdown.opened {
	opacity: 100;
	position: relative;
	transition: opacity .2s;
}

#dropdown-text {
	color:gray;
	font-family: 'Rubik';
	font-weight: lighter;
	position: relative;
	top: 6%;
	left: 2%;
	width: 96%;
	margin: 0;
	text-align: center;
}

#script:hover {
	transform: scale(1.05);
}

.aboutme {
	margin: .9vmin;
	width: 98vw;
	height: 91.5vh;
	border: 1px solid gray;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border-radius: 20px;
}

.aboutme h1, h3, h4 {
	font-family: 'Rubik';
}

.aboutme-name {
	color: aqua;
}

.aboutme-lore {
	color: aquamarine;
	text-align: center;
}

.aboutme-discord {
	width: 7em;
	height: 4em;
	position: absolute;
	top: 90vh;
	z-index: 0;
	transform: rotate(0turn);
	transition: filter .3s, transform .5s;
}

.aboutme-discord-copied {
	position: absolute;
	color:white;
	top: 82.5vh;
	background-color: #59b051;
	padding: 8px 10px;
	border-radius: 5px;
	transition: all .3s;
	opacity: 0;
}

.aboutme-discord-ball {
	width: 4em;
	height: 4em;
	background-color: black;
	border-radius: 50px;
	position: absolute;
	top: 90vh;
	opacity: 0;
	z-index: 1;
}

::-webkit-scrollbar {
	width: 15px;
}

::-webkit-scrollbar-track {
	background: #223; 
}
 
::-webkit-scrollbar-thumb {
	background: #444; 
}
::-webkit-scrollbar-thumb:hover {
	background: #333; 
}

::-webkit-scrollbar-corner {
	background: transparent;
}