/* old colours
:root {
	--navbar: ;
	--erin: #76fe96;
	--light-green: #91feabff;
	--other-green: #adfec0;
	--tea-green: #c8ffd5;
	--nyanza: #d6ffe0;
	--honeydew: #e4ffea;
	--antiflash-white: #eeeeeeff;
	--eerie-black: #1d201e;
	--light-eerie-black: #242c27;
	--black: #000000ff;
	--night: #0e0e0eff;
	--rotation-angle: 144deg;
}*/

:root {
	--erin: #34cd76;
	--light-green: #b4b4b4;
	--other-green: #dedede;
	--tea-green: #e4e4e4;
	--nyanza: #f5f5f5;
	--honeydew: #ffffff;
	--antiflash-white: #eeeeeeff;
	--eerie-black: #1d201e;
	--light-eerie-black: #242c27;
	--black: #000000ff;
	--night: #0e0e0eff;
	--rotation-angle: 144deg;
}

* {
	box-sizing: border-box;
}

a {
	color: var(--black);
	text-decoration: underline;
}

.underline {
	text-decoration-color: #76fe96;
}

body {
	font-family: "Noto sans", sans-serif;
	background-color: white;
	color: var(--eerie-black);
	overflow-x: hidden;
}

header {
	background-color: var(--erin);
	height: auto;
	width: 100vw;
	box-sizing: border-box;
	left: 0;
	top: 0;
	position: fixed;
	z-index: 997;
}

html {
	scroll-behavior: smooth;
}

.container {
	margin: 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0 0 3vh;
	box-sizing: border-box;
}

.logo a {
	text-decoration: none;
	vertical-align: middle;
	padding: 1vh 1vh;
}

.logo img {
	height: 3vh;
	vertical-align: middle;
}

.logo h1 {
	font-size: 3vh;
	color: var(--eerie-black);
	margin: 0;
	user-select: none;
	text-decoration: none;
}

nav {
	border: 0px solid transparent;
	z-index: 999;
}

nav ul {
	display: flex;
	margin: 0;
	list-style: none;
	border: 0px solid transparent;
	right: 0;
	top: 0;
	position: relative;
}

nav ul li {
	border: 0px solid transparent;
}

nav > ul > li > a {
	font-size: 3vh;
	color: var(--eerie-black);
	margin: 0;
	user-select: none;
	text-decoration: none;
	padding: 2vh 1vh;
}

.nav-icon {
	height: 3vh;
	width: 3vh;
	transform: translateY(.5vh);
}

nav ul li a:hover {
	text-decoration: underline;
}

.home-background {
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	position: fixed;
	z-index: -1;
}

.login-container {
	width: 30vw;
	height: auto;
	left: 35vw;
	position: fixed;
	background-color: var(--tea-green);
	padding: 20px 20px;
	top: 20vh;
	border-radius: 30px;
	z-index: 3;
	font-weight: bold;
	box-sizing: border-box;
}

.login-container input {
	width: 100%;
	box-sizing: border-box;
	background-color: var(--honeydew);
	font-family: "noto sans", sans-serif;
	padding: 14px 16px;
	border-radius: 10px;
	border: 0px solid transparent;
	color: var(--eerie-black);
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1.5vh;
}

.login-container label {
	font-family: "noto sans", sans-serif;
	border: 0px solid transparent;
	color: var(--eerie-black);
	font-size: 2vh;
	margin-left: 14px;
	text-align: left !important;
	margin-top: -10px;
}

.login-container input[type="submit"] {
	font-size: 2vh;
	font-weight: bold;
	color: var(--black);
}

.home-container-wrapper {
	display: flex;
	justify-content: flex-start;
}

.home-container {
	width: 50vw;
	height: auto;
	background-color: var(--tea-green);
	padding: 20px;
	border-radius: 30px;
	font-weight: bold;
	box-sizing: border-box;
	margin-right: 1vw;
	margin-bottom: 2vh;
}

.home-container span {
	font-weight: normal;
}

.preview {
	width: 50%;
	left: 50%;
	top: 4vh;
	height: 96vh;
	position: fixed;
	border: none;
	box-sizing: border-box;
	background-color: white;
	margin: 0;
	padding: 0;
}

.banned-container {
	top: 20vh;
	left: 30vw;
	width: 40vw;
	box-sizing: border-box;
	height: auto;
	position: fixed;
	text-align: center;
	font-family: "noto sans";
}

.underline:not(.profile-file) {
	border-bottom: 5px solid #76fe96;
}

.create-cont {
	width: 35vw;
	height: auto;
	top: 15vh;
	position: fixed;
	background-color: var(--tea-green);
	padding: 2vh;
	border-radius: 3vh;
	left: 32.5vw;
	font-family: "noto sans";
	text-align: center;
	font-size: 2.5vh;
	box-sizing: border-box;
	color: var(--eerie-black);
}

.create-cont h1 {
	padding: 0;
	margin: 0;
}

.create-option {
	width: 100%;
	border-radius: 0.5vh;
	padding: 1vh;
	background-color: var(--honeydew);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: max-content auto;
	text-align: left;
	grid-column-gap: 1vw;
	margin-top: 0.33vh;
	color: var(--eerie-black);
	cursor: pointer;
}

.create-option-top {
	border-top-right-radius: 2.5vh;
	border-top-left-radius: 2.5vh;
}

.create-option-bottom {
	border-bottom-right-radius: 2.5vh;
	border-bottom-left-radius: 2.5vh;
}

.create-form:first-child {
	margin-top: 0;
	border-top-right-radius: 3vh;
	border-top-left-radius: 3vh;
}

.create-option img {
	width: 4vh;
}

.create-option p {
	padding: 0;
	margin: 0;
	font-size: 2.5vh;
	vertical-align: center;
	font-weight: bold;
	color: var(--eerie-black);
}

.submit-button {
	width: 100%;
	border-radius: 1vh;
	height: auto;
	padding: 1vw;
	background-color: var(--other-green);
	box-sizing: border-box;
	margin-top: 3vh;
	display: grid;
	cursor: pointer;
	border: none;
	color: var(--eerie-black);
	text-align: center;
}

.submit-button p {
	font-size: 3.5vh;
	vertical-align: center;
	font-weight: bold;
	color: var(--eerie-black);
	padding: 0;
	margin: 0;
	text-align: center;
}

.option input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	color: var(--black);
}

.option input:checked ~ .create-option {
	background-color: var(--other-green);
}

.folder-header {
	background-color: var(--tea-green);
	color: var(--eerie-black);
	cursor: pointer;
	padding: 18px;
	width: 70%;
	left: 15%;
	border: 0px solid transparent;
	text-align: left;
	outline: none;
	font-size: 2.5vh;
	position: relative;
	box-sizing: border-box;
	border-radius: 2.5vh;
	font-weight: bold;
	display: grid;
	column-gap: 1vh;
	grid-template-columns: max-content auto max-content max-content max-content;
	user-select: none;
	margin-top: 1vh;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.folder-header img {
	width: 3.5vh;
	height: 3.5vh;
}

.folder-header p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.folder-header.focused {
	border: 0px solid transparent;
	border-bottom-right-radius: 0.5vh;
	border-bottom-left-radius: 0.5vh;
}

.folder-cont {
	display: none;
	overflow: hidden;
}

.file input {
	display: none;
}

.file label {
	cursor: pointer;
	margin-bottom: -5vh;
}

.file-label i {
	height: 2vh;
	width: 2vh;
	padding: 0;
}

.folder-cont :last-child {
	border-bottom-right-radius: 2.5vh;
	border-bottom-left-radius: 2.5vh;
}

.inner-folder-cont > .folder-header {
	width: 65%;
	left: 20%;
	position: relative;
	border-top-right-radius: 0.5vh;
	border-top-left-radius: 0.5vh;
	margin-top: 0.5vh;
}

.inner-folder-cont > .folder-cont > .file {
	width: 65%;
	left: 20%;
	position: relative;
}

.file {
	padding: 1.5vh 2vh;
	font-size: 2vh;
	background-color: var(--honeydew);
	width: 70%;
	left: 15%;
	position: relative;
	border-radius: 0.5vh;
	box-sizing: border-box;
	margin-top: 0.5vh;
	display: grid;
	grid-template-columns: auto max-content max-content;
	column-gap: 0.5vh;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.folder-cont > .file:last-of-type:not(.inner-folder-cont > .folder-cont > .file) {
	border-bottom-left-radius: 2.5vh;
}

.file p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.file span {
	font-weight: bold;
}

.file img {
	width: 2.5vh;
	border-radius: 0;
	cursor: pointer;
}

.new-file {
	padding: 0.75vh 1.5vh;
	font-size: 1.5vh;
	height: 3.5vh;
	background-color: var(--tea-green);
	border-radius: 2.3vh;
	border: none;
	cursor: pointer;
	font-weight: bold;
	color: var(--eerie-black);
	display: inline;
}

.coming-soon-cont {
	text-align: center;
	width: 100%;
	left: 0;
	top: 38vh;
	position: fixed;
	color: var(--spring-green);
	font-weight: bolder;
	font-size: 15vh;
}

.coming-soon-cont p {
	padding: 0;
	margin: 0;
}

.rotate {
	animation-name: rotate;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	left: 17.5%;
	position: fixed;
	z-index: 0;
	top: -10%;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(180deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.profile-header {
	width: 60%;
	top: 7vh;
	left: 20%;
	position: relative;
	border-radius: 3vh;
	display: grid;
	grid-template-rows: auto auto;
	overflow: hidden;
	row-gap: 0.33vh;
	box-sizing: border-box;
}

.profile-banner {
	width: 100%;
	height: 400px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 2vh;
	border-radius: 3vh;
	border-bottom-left-radius: 0.5vh;
	border-bottom-right-radius: 0.5vh;
	box-sizing: border-box;
}

.profile-banner img {
	height: calc(40px * 4);
	width: calc(40px * 4);
	left: 5%;
	position: relative;
	top: 30%;
	border: 0.5vh solid var(--tea-green);
	border-radius: 100%;
	background-color: var(--honeydew);
	box-sizing: border-box;
}

.profile-info {
	background-color: var(--tea-green);
	padding: 1.5vh;
	border-top-left-radius: 0.5vh;
	border-top-right-radius: 0.5vh;
	display: grid;
	grid-template-columns: calc(50% - 0.75vh) calc(50% - 0.75vh);
	column-gap: 1.5vh;
	box-sizing: border-box;
}

.badges {
	transform: translateY(0.5vh);
}

.profile-info div:first-of-type {
	padding-bottom: 0.9vh;
}

.profile-info > div > div {
	display: grid;
	grid-template-columns: auto max-content;
}

.profile-info p {
	font-size: 2.5vh;
	font-weight: bold;
}

.profile-info p span {
	opacity: 0.7;
}

.bio {
	background-color: var(--honeydew);
	border-radius: 1.5vh;
	padding: 1vh;
	box-sizing: border-box;
}

.project-container {
	width: 60%;
	left: 20%;
	margin-bottom: 3vh;
	position: relative;
	display: grid;
	grid-template-columns: calc(25% - 1.33vh / 3) calc(25% - 1.33vh / 3) calc(25% - 1.33vh / 3) calc(25% - 1.33vh / 3);
	column-gap: 0.33vh;
	row-gap: 0.33vh;
	margin-top: 10vh;
	box-sizing: border-box;
}

.project-container > div {
	background-color: var(--tea-green);
	padding: 1.5vh;
	border-radius: 0.5vh;
	display: grid;
	grid-template-rows: auto max-content;
	row-gap: 1vh;
	box-sizing: border-box;
	position: relative;
}

.project-container a {
	font-weight: bold;
	font-size: 2vh;
	cursor: pointer;
}

.project-container > div > .project-star {
	position: absolute;
	top: 2vh;
	right: 2vh;
	padding: .5vh;
	border-radius: 1vh;
	font-weight: normal;
	font-size: 1.75vh;
}

.project-container > div > .project-star > img {
	background-color: transparent;
	height: 2.5vh;
	width: 2.5vh;
}

.project-container > div > div {
	display: grid;
	grid-template-columns: auto max-content;
}

.project-hidden {
	opacity: .5;
}

.project-container span {
	font-weight: bold;
	font-size: 2vh;
	width: auto;
	text-align: left;
	vertical-align: top;
}

.project-container-eye {
	cursor:default;
	height: 2.5vh;
	width: 2.5vh;
	margin-top: .5vh;
	text-align: left;
	float: left;
}

.project-container div img {
	width: 100%;
	height: auto;
	background-color: var(--honeydew);
	border-radius: 1.5vh;
	user-select: none;
}

.project-container div:nth-child(4) {
	border-top-right-radius: 2vh;
}

.project-container div:first-child {
	border-top-left-radius: 2vh;
}

.project-container div:last-child {
	border-bottom-right-radius: 2vh;
}

.project {
	background-color: var(--tea-green);
	padding: 1vw;
	border-radius: 1vw;
	width: 100%;
	left: 15%;
	margin-top: 1vw;
}

.warning {
	width: 100%;
	box-sizing: border-box;
	background-color: orangered;
	color: var(--black);
	font-size: 2vh;
	padding: 1vw;
	border-radius: 1vw;
	z-index: 999;
	margin-top: 1vh;
	margin-bottom: 2vh;
}

.warning p {
	padding: 0;
	margin: 0;
}

.warning p:first-child {
	font-weight: bold;
}

.warning a {
	right: 0;
	top: 0;
	position: relative;
	float: right;
	border: 0;
	cursor: pointer;
}

.spoiler-text {
	background: var(--eerie-black);
	color: transparent;
	cursor: help;
	user-select: none;
	transition: background 0.3s ease 0.2s, color 0.2s ease 0.25s;
	border-radius: 8px;
}

.spoiler-text:hover,
.spoiler-text:focus {
	background: transparent;
	color: inherit;
}

.container-wrapper {
	display: flex;
	justify-content: flex-start;
}

ul {
	list-style-position: inside;
}

.submit {
	border-radius: 1vh;
	border-top-right-radius: 5vh;
	border-bottom-right-radius: 5vh;
	background-color: var(--honeydew);
	border: none;
	font-family: "Noto Sans", sans-serif;
	font-size: 1.75vh;
	padding: 1vh;
	padding-right: 2vh;
	font-weight: bold;
	cursor: pointer;
	width: 100%;
	color: var(--eerie-black);
	text-overflow: ellipsis;
	white-space: nowrap;	
}

.a-submit {
	border-radius: 1vh;
	border-top-right-radius: 5vh;
	border-bottom-right-radius: 5vh;
	background-color: var(--honeydew);
	border: none;
	font-family: "Noto Sans", sans-serif;
	font-size: 1.75vh;
	padding: 1vh;
	padding-right: 2vh;
	font-weight: bold;
	width: 100%;
	color: var(--eerie-black);
	text-overflow: ellipsis;
	white-space: nowrap;	
	text-decoration: none
}

.seperated-submit {
    width: auto;
	border-radius: 5vh;
	background-color: var(--honeydew);
	padding: 1vh 2vh;
	border: none;
	box-sizing: border-box;
	outline: none;
	font-family: "Noto Sans", sans-serif;
	font-size: 1.75vh;
	color: var(--black);
    margin-top: 1.5vh;
    cursor: pointer;
    font-weight: bold;
}

.file-select-form {
	border-radius: 1vh;
	border-top-left-radius: 5vh;
	border-bottom-left-radius: 5vh;
	background-color: var(--honeydew);
	border: none;
	font-family: "Noto Sans", sans-serif;
	font-size: 1.75vh;
	padding: 1vh;
	padding-left: 2vh;
	padding-right: 0vh;
	width: 100%;
	cursor: pointer;
	box-sizing: border-box;
	color: var(--eerie-black);
	margin-right: 1vw;
	user-select: none;
}

.submit:hover {
	background-color: var(--nyanza);
}

.settings-container label,
.project-settings label,
.file-directory-creation label,
.password-reset label {
	text-align: left;
	left: 2vh;
	position: relative;
	font-size: 2vh;
}

.file-directory-creation label {
	font-weight: bold;
	font-size: 2vh;
	left: 2vh;
	position: relative;
	margin: 0;
	padding: 0;
}

.password-reset {
	height: auto;
	width: 40%;
	background-color: var(--tea-green);
	border-radius: 4vh;
	font-weight: bold;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 3vh;
	text-decoration: none;
	text-align: left;
}

.settings-container {
	height: auto;
	width: 50vw;
	background-color: var(--tea-green);
	border-radius: 4vh;
	font-weight: bold;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 3vh;
	text-decoration: none;
	text-align: left;
}

.settings-container input[type="text"],
.project-settings input[type="text"],
.create-snapshot input[type="text"],
input[type="password"],
input[type="email"], input[type="text"]:not(.tag-input):not(.step-obj *),
.text-input {
	width: 100%;
	border-radius: 1vh;
	background-color: var(--honeydew);
	padding: 1vh;
	border: none;
	box-sizing: border-box;
	outline: none;
	font-family: "Noto Sans", sans-serif;
	font-size: 1.75vh;
	border-top-left-radius: 5vh;
	border-bottom-left-radius: 5vh;
	padding-left: 2vh;
	color: var(--black);
}
.settings-container > form > div,
.file-directory-creation form > div,
.password-reset div {
	display: grid;
	column-gap: 0.25vh;
	grid-template-columns: auto min-content max-content;
	margin-top: 0.5vh;
}

.profile-settings-container {
	display: grid;
	column-gap: 0.25vh;
	grid-template-columns: auto 50px max-content;
	margin-top: 0.5vh;
	width: max-content;
	left: -2vh;
	position: relative;
}

.settings-container > * {
	margin-bottom: 10px;
}

.settings-banner {
	width: 100%;
	height: 380px;
	border-radius: 4vh;
	background-repeat: no-repeat;
	background-size: cover;
	border: none;
	outline: none;
}

.settings-pfp {
	width: 150px;
	height: 150px;
	border-radius: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
	top: calc(-115px - 150px);
	position: relative;
	left: 100px;
	border: 5px solid var(--honeydew);
}

.admin-panel {
	width: 66%;
	left: 17vw;
	top: 7vh;
	position: absolute;
	padding: 2vh;
	height: auto;
	border-radius: 4.5vh;
	display: grid;
	grid-template-rows: auto auto;
	box-sizing: border-box;
	background-color: var(--other-green);
}

.admin-panel h1,
h2,
h3,
h4,
h5,
h6,
p {
	padding: 0;
	margin: 0;
}

.admin-panel > div,
.admin-panel > * > div {
	background-color: var(--tea-green);
	border-radius: 5vw;
	width: 100%;
	box-sizing: border-box;
	padding: 0.5vw;
	padding-right: 1vw;
}

.admin-panel :not(.spoiler-text) :not(.spoiler-text):is(span) {
	font-size: 3vh;
	font-weight: bold;
}

.admin-panel input[type="text"]:focus {
	background-color: var(--honeydew);
	color: var(--black);
}

.small-pfp {
	height: 4vh;
	border-radius: 3vw;
}

.badge {
	float: right;
	font-size: 3vh;
	color: var(--light-eerie-black);
}

.accordion {
	background-color: var(--honeydew);
	color: var(--eerie-black);
	cursor: pointer;
	padding: 1vh 2vh;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 2vh;
	box-sizing: border-box;
	border-radius: 3vh;
	font-weight: bold;
	margin-top: 1vh;
}

.active,
.accordion:hover {
	background-color: var(--tea-green);
}

.active {
	border-radius: 0;
	border-top-left-radius: 2.25vh;
	border-top-right-radius: 2.25vh;
}

.panel {
	padding: 1vh;
	display: none;
	background-color: white;
	overflow: hidden;
	border-bottom-left-radius: 2.25vh;
	border-bottom-right-radius: 2.25vh;
	box-sizing: border-box;
}

.admin-btn {
	width: 100%;
	padding: 0%;
	background-color: var(--honeydew);
	color: var(--eerie-black);
	border: none;
	padding: 1vh;
	border-radius: 0.5vh;
	font-size: 2vh;
	cursor: pointer;
	box-sizing: border-box;
	margin: 0;
}

#admin-fieldset form:first-of-type > input {
	border-top-left-radius: 1vh;
	border-bottom-left-radius: 1vh;
}

#admin-fieldset form:last-of-type > input {
	border-top-right-radius: 1vh;
	border-bottom-right-radius: 1vh;
}

fieldset {
	border-radius: 2vh;
	border: 0.5vh solid var(--honeydew);
	padding: 1vh;
	margin: 0;
	box-sizing: border-box;
	margin-top: 1vw;
}

legend {
	font-size: 2vh;
	font-weight: bold;
	padding: 0 0.5vh 0 0.5vh;
}

.container-wrapper {
	width: 100%;
	left: 0;
	top: 5vh;
	position: absolute;
	display: grid;
	grid-template-columns: calc(80% - 0.5vw) calc(20% - 0.5vw);
	grid-column-gap: 1vw;
	box-sizing: border-box;
	padding-right: 1vw;
	overflow: hidden;
}

.iframe-container {
	height: calc(100vh - 5vh);
	top: 5vh;
}

.project-info {
	display: grid;
	box-sizing: border-box;
	grid-template-columns: 100%;
	grid-template-rows: max-content max-content auto;
}

.project-info > div {
	background-color: var(--erin);
	width: 100%;
	padding: 0.5vw;
	border-radius: 2vh;
	box-sizing: border-box;
	height: min-content;
	display: grid;
	grid-template-columns: min-content auto;
	column-gap: 1vh;
}

.project-info :first-child > img {
	height: 10vh;
	width: auto;
	border-radius: 100%;
	user-select: none;
}

.project-info a {
	font-size: 2.5vh;
	color: var(--eerie-black);
	font-weight: bold;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.project-info :first-child > div > div {
	overflow-x: hidden;
	max-width: 100%;
}

.project-settings {
	width: 100%;
	position: relative;
	background-color: var(--tea-green);
	border-radius: 3vh;
	border-top-right-radius: 0.5vh;
	border-bottom-right-radius: 0.5vh;
	border-bottom-left-radius: 0.5vh;
	padding: 1vw;
	box-sizing: border-box;
	height: 100%;
	max-width: 25vw;
	text-align: left;
}

.project-settings img {
	width: 100%;
	top: 0vw;
	position: relative;
	border-radius: 1vw;
}

.icon-input-btn {
	border-radius: 0.5vh;
	background-color: var(--honeydew);
	border: none;
	font-family: "Noto Sans", sans-serif;
	font-size: 1.75vh;
	padding: 1vh 1vh;
	margin-top: 1vh;
	font-weight: bold;
	cursor: pointer;
	color: var(--eerie-black);
	width: auto;
}

.project-settings-grid {
	width: 50%;
	left: 25%;
	position: absolute;
	display: grid;
	grid-template-columns: 50% 50%;
	column-gap: 0.33vh;
	row-gap: 0.33vh;
}

.project-tags {
	width: 100% !important;
	background-color: var(--tea-green);
	border-radius: 3vh;
	border-top-left-radius: 0.5vh;
	border-bottom-left-radius: 0.5vh;
	border-bottom-right-radius: 0.5vh;
	padding: 1vw;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto;
	height: 100%;
	font-size: 2.5vh;
	font-weight: bold;
	text-align: center;
}

.tag-input {
	width: 100%;
	border-radius: 2.125vh;
	background-color: var(--honeydew);
	padding: 1vh;
	border: none;
	box-sizing: border-box;
	outline: none;
	font-family: "Noto Sans", sans-serif;
	font-size: 1.75vh;
	padding-left: 2vh;
	color: var(--black);
}

.focus {
	border-bottom-left-radius: 0.5vh;
	border-bottom-right-radius: 0.5vh;
}

.tag-list {
	background-color: var(--honeydew);
	padding: 1vh;
	border-radius: 2vh;
	border-top-right-radius: 0.5vh;
	border-top-left-radius: 0.5vh;
	margin-top: 0.25vh;
	display: none;
	column-gap: 0.5vh;
	row-gap: 0.5vh;
	flex-wrap: wrap;
	font-size: 2vh;
	font-weight: normal;
}

.tag-list li {
	background-color: var(--nyanza);
	padding: 0.5vh 1vh;
	font-size: 1.5vh;
	border-radius: 1vh;
	list-style-type: none;
	font-weight: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	user-select: none;
}

.tag-submit {
	border-radius: 5vh;
	background-color: var(--honeydew);
	border: none;
	font-family: "Noto Sans", sans-serif;
	font-size: 1.75vh;
	padding: 1vh 2vh;
	margin-top: 1vh;
	font-weight: bold;
	cursor: pointer;
	color: var(--eerie-black);
	width: auto;
	text-align: left;
	left: 0;
	position: relative;
}

.snapshots {
	position: relative;
	background-color: var(--tea-green);
	border-radius: 3vh;
	border-top-left-radius: 0.5vh;
	border-top-right-radius: 0.5vh;
	padding: 1vw;
	box-sizing: border-box;
	grid-column-start: 1;
	grid-column-end: 3;
	height: 100%;
	font-size: 2.5vh;
	font-weight: bold;
	text-align: center;
}

.snapshot {
	width: 100%;
	max-width: 48vw;
	height: 5vh;
	border-radius: 0.5vh;
	padding: 1vh 0.75vh 1vh 2vh;
	background-color: var(--honeydew);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto max-content max-content max-content max-content max-content max-content max-content max-content;
	font-size: 2vh;
	font-weight: normal;
	text-align: left;
	column-gap: 1vh;
	margin-top: 0.33vh;
}

.snapshots :nth-child(2) {
	border-top-left-radius: 2vh;
	border-top-right-radius: 2vh;
}

.snapshots > :nth-last-child(2) {
	border-bottom-left-radius: 2vh;
	border-bottom-right-radius: 2vh;
}

.snapshot p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

.snapshot a {
	background-color: var(--tea-green);
	border-radius: 1vh;
	font-size: 2vh;
	cursor: pointer;
	height: 100%;
	padding: 0.25vh 0.5vh;
	transform: translateY(-0.33vh);
}

.snapshot a > img {
	transform: translateY(0.5vh);
	width: 2.125vh;
	height: 2.125vh;
}

.create-snapshot {
	position: relative;
	background-color: var(--tea-green);
	border-radius: 3vh;
	border-top-left-radius: 0.5vh;
	border-top-right-radius: 0.5vh;
	padding: 1vw;
	box-sizing: border-box;
	grid-column-start: 1;
	grid-column-end: 3;
	height: 100%;
	font-size: 2.5vh;
	font-weight: bold;
	text-align: center;
	display: none;
}

.snapshot-cancel {
	font-size: 2vh;
	position: absolute;
	top: 1vh;
	right: 2vh;
	text-decoration: none;
	background-color: var(--honeydew);
	padding: 0.5vh 1vh;
	padding-bottom: 0;
	border-radius: 7vh;
	cursor: pointer;
}

.basic-grid {
	margin-top: 1vh;
	align-items: center;
	display: grid;
	grid-template-columns: auto max-content;
	column-gap: 0.25vh;
	width: 100%;
	align-items: top;
	box-sizing: border-box;
}

.basic-grid > * {
	width: 100%;
}

.left {
	border-top-left-radius: 5vh;
	border-bottom-left-radius: 5vh;
	border-top-right-radius: 1vh;
	border-bottom-right-radius: 1vh;
	padding-left: 2vh;
	padding-right: 3vh;
	width: auto;
}

.right {
	border-top-right-radius: 5vh;
	border-bottom-right-radius: 5vh;
	padding-left: 2vh;
	padding-right: 3vh;
	width: auto;
}

.stats {
	width: 75%;
	height: auto;
	border-radius: 3vh;
	background-color: var(--other-green);
	left: 12.5%;
	position: relative;
	grid-template-columns: 33.3% 33.3% 33.3%;
	column-gap: 1vh;
	display: grid;
	box-sizing: border-box;
}

.stats > .stat-box {
	color: var(--eerie-black);
	font-size: 2vh;
	width: auto;
	padding: 1.5vh;
	box-sizing: border-box;
}

.stat-box > p {
	font-weight: bold;
	font-size: 2.75vh;
}

.user-card {
	background-color: var(--honeydew);
	border-radius: 5vh;
	font-size: 2.25vh;
	font-weight: bold;
	display: grid;
	grid-template-columns: max-content max-content;
	padding: 0.5vh;
	padding-top: 0.75vh;
	padding-left: 1.125vh;
	column-gap: 1vh;
	padding-right: 1.5vh;
	margin-top: 1.5vh;
	text-overflow: ellipsis;
	overflow: hidden;
	box-sizing: border-box;
}

.user-card > img {
	width: 2.75vh;
	user-select: none;
	border-radius: 3vh;
}

.user-card > a {
	border: none;
	cursor: pointer;
	user-select: none;
	text-overflow: ellipsis;
	width: 100%;
	overflow: hidden;
	padding-right: 1vh;
	box-sizing: border-box;
	color: var(--black);
}

.user-card > a > span {
	font-weight: normal;
}

.user-card > a:hover {
	border: none;
	text-decoration: underline;
}

.lucide-relative {
	width: 1em;
	height: 1em;
}

.file-directory-creation {
	width: 50%;
	height: max-content;
	top: 13vh;
	position: absolute;
	background-color: var(--tea-green);
	border-radius: 3vh;
	left: 25%;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto auto;
}

.file-directory-creation div {
	padding: 1.5vh;
}

.file-directory-creation p {
	font-size: 2.5vh;
	font-weight: bold;
	text-align: center;
	padding: 0;
	margin: 0;
}

.alt-home {
	display: grid;
	grid-template-columns: auto 33%;
	column-gap: 1.5vh;
	width: 75%;
	margin-left: 12.25%;
	top: 10vh;
	position: absolute;
	padding: 1vh;
	box-sizing: border-box;
}

.alt-news {
	width: 100%;
	background-color: var(--tea-green);
	padding: 2vh 2vh;
	padding-bottom: 2vh;
	border-radius: 3vh;
	box-sizing: border-box;
	height: max-content;
	padding-bottom: 2.5vh;
	padding-top: 1vh;
}

.alt-news span,
.recent-projects span {
	font-size: 3vh;
	font-weight: bold;
	width: 100%;
}

.alt-news p {
	padding: 0;
	margin: 0;
	margin-bottom: 1vh;
}

.alt-news-warning {
	background-color: rgba(255, 68, 0, 0.685);
	color: var(--eerie-black);
	padding: 2vh 2vh;
	padding-bottom: 2vh;
	border-radius: 3vh;
	box-sizing: border-box;
	height: max-content;
	padding-bottom: 2.5vh;
	padding-top: 1vh;
	width: fit-content;
	user-select: none;
}

.alt-news span,
.recent-projects span,
.alt-news-warning span {
	font-size: 3vh;
	font-weight: bold;
	width: 100%;
}

.alt-news p,
.alt-news-warning p {
	padding: 0;
	margin: 0;
	margin-bottom: 1vh;
}

.news-btn {
	width: 100%;
	padding: 0.5vh 1.5vh;
	border-radius: 5vh;
	background-color: var(--other-green);
	border: none !important;
	cursor: pointer;
	margin-top: 2vh;
	transition: 0.3s;
	margin-bottom: 2vh;
}

.news-btn:hover {
	border: none !important;
	background-color: var(--honeydew);
	color: var(--eerie-black);
}

.suggested-users {
	background-color: var(--tea-green);
	padding: 2vh;
	border-radius: 4vh;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto;
	column-gap: 2vh;
	row-gap: 0.33vh;
	margin-top: 2vh;
}

.user-chip {
	background-color: var(--other-green);
	padding: 1vh;
	border-radius: 0.5vh;
	height: 12vh;
	display: grid;
	column-gap: 1vh;
	box-sizing: border-box;
	grid-template-columns: 10vh auto max-content;
}

.suggested-users div:first-of-type {
	border-top-right-radius: 2vh;
	border-top-left-radius: 2vh;
}

.suggested-users div:last-of-type {
	border-bottom-right-radius: 2vh;
	border-bottom-left-radius: 2vh;
}

.user-chip p > a {
	font-weight: bold;
	font-size: 2.5vh;
	cursor: pointer;
}

.user-chip p {
	vertical-align: center;
	text-wrap: break-word;
	text-overflow: ellipsis;
	overflow: hidden;
	max-lines: 3;
}

.user-chip img {
	padding: 0;
	margin: 0;
	border-radius: 100vh;
	height: 10vh;
}

.follow {
	border: none !important;
	cursor: pointer;
	margin-top: 2.5vh;
}

.follow img {
	height: 5vh;
	width: 5vh;
}

.recent-projects {
	width: 100%;
	text-align: left;
	padding: 2vh;
	border-radius: 5vh;
	background-color: var(--tea-green);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto auto auto max-content;
	justify-content: start;
	column-gap: 0.33vh;
}

.recent-projects > div > div {
	padding: 0;
}

.recent-projects > div > div > star-cont {
	position: absolute;
	top: 0;
	right: 0;
}

.star-cont {
	width: max-content;
	border-radius: 1vh;
	font-size: 1em;
	cursor: pointer;
	background-color: var(--honeydew);
	display: grid;
	padding: .25em .5em;
	user-select: none;
	height: 1.75em;
	grid-template-columns: max-content max-content;
}

.star-icon {
	height: 1.125em;
	margin-right: .25em;
}

.star-cont p {
	font-size: .9em;
	padding: 0;
	margin: 0;
}

.project-link,
.suggested-projects * > a:not(.explore-star) {
	width: 100%;
	border: none;
	cursor: pointer;
	background-color: var(--other-green);
	padding: 1vh;
	color: var(--eerie-black);
	border-radius: 1vh;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.project-link:hover,
.suggested-projects a:hover {
	text-decoration: underline;
	cursor: pointer;
}

.project-link {
	background-color: var(--tea-green);
}

.recent-projects .loading-img {
	background-color: transparent;
}

.suggested-projects > div,
.recent-projects div {
	padding: 2vh;
	border-radius: 1vh;
	background-color: var(--tea-green);
	display: grid;
	grid-template-columns: auto;
	row-gap: 1vh;
	max-width: 100%;
}

.project-create {
	cursor: pointer;
	color: #76fe96;
	font-size: 5vh;
	top: calc(50% - 4vh);
	position: relative;
}

.recent-projects div {
	background-color: var(--other-green);
	border-radius: 1vh;
	box-sizing: border-box;
	max-width: calc(43.5vw / 3);
}

.recent-projects div:first-of-type,
.suggested-projects > div:first-of-type {
	border-top-left-radius: 3vh;
	border-bottom-left-radius: 3vh;
	grid-column-start: 1;
}

.recent-projects div:last-of-type,
.suggested-projects > div:last-of-type {
	border-top-right-radius: 3vh;
	border-bottom-right-radius: 3vh;
}

.suggested-projects div > img,
.recent-projects div > img {
	width: 100%;
	border-radius: 1vh;
	max-width: 100%;
	background-color: var(--honeydew);
}

.suggested-projects {
	display: grid;
	grid-template-columns: calc(33% - .33vh) calc(33% - .33vh) calc(33% - .33vh);
	column-gap: 0.5vh;
	row-gap: 2vh;
}

.suggested-projects > a,
.recent-projects p,
.guides p:first-child {
	font-size: 3vh;
	font-weight: bold;
	grid-column-start: 1;
	grid-column-end: 5;
	left: 2vh;
	position: relative;
}

.guides {
	width: 100%;
	box-sizing: border-box;
	font-weight: normal;
}

.guides-cont {
	display: flex;
	flex-wrap: nowrap;
	margin-top: 2vh;
	width: 100%;
	overflow-x: scroll;
	border-radius: 0.75vh;
	margin-bottom: 10vh !important;
}

.guides-cont div {
	background-color: var(--tea-green);
	padding: 2vh;
	display: flex;
	align-items: center;
	border-radius: 0.75vh;
	flex: 1 0 auto;
	column-gap: 2vh;
	margin-right: 0.5vh;
}

.guides-cont > :first-child {
	border-top-left-radius: 2vh;
	border-bottom-left-radius: 2vh;
}

.guides-cont :last-child {
	border-top-right-radius: 2vh;
	border-bottom-right-radius: 2vh;
}

/* width */
::-webkit-scrollbar {
	width: 0.5vh;
	height: 0.75vh;
}

/* Track */
::-webkit-scrollbar-track {
	border-radius: 1vh;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #76fe96c2;
	border-radius: 1vh;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #76fe96;
}

.guides-cont > div > a {
	font-weight: normal;
	text-align: left;
	cursor: pointer;
	font-size: 2.5vh;
}

.guides-cont > div > img {
	height: 3.5vh;
	width: 3.5vh;
}

.stop-scrolling {
	height: 100%;
	overflow: hidden;
}

.stats-page {
	width: 75%;
	left: 12.5%;
	top: 10vh;
	position: absolute;
	box-sizing: border-box;
	color: var(--eerie-black);
	font-size: 4vh;
	font-weight: bold;
	text-align: center;
}

.stats-flexbox {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: start;
	align-items: auto;
	align-content: start;
}

.stats-flexbox > div {
	flex: 1 0 auto;
	background-color: var(--tea-green);
	padding: 2vh;
	margin: 1vh;
	display: grid;
	grid-template-columns: max-content max-content;
	height: 30vh;
	box-sizing: border-box;
	border-radius: 3vh;
	font-size: 3vh;
	text-align: left;
	width: fit-content;
	column-gap: 2vh;
}

.stats-flexbox div > img {
	height: 26vh;
	width: auto;

	box-sizing: border-box;
}

.stats-flexbox > div > div {
	box-sizing: border-box;
}

.stats-flexbox li {
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-size: 2.5vh;
	color: var(--light-eerie-black);
}

.upload-cont {
	top: 7vh;
	width: 50%;
	height: auto;
	box-sizing: border-box;
	left: 25%;
	position: absolute;
	padding: 1.5vh;
	background-color: var(--tea-green);
	border-radius: 4vh;
}
.upload-cont p {
	font-size: 3vh;
	font-weight: bold;
	text-align: center;
	margin-bottom: 2vh;
}
.attachment-cont {
	width: 100%;
	border-radius: 2.5vh;
	box-sizing: border-box;
	background-color: var(--honeydew);
	padding: 1vh;
	display: grid;
	grid-template-columns: auto;
}
.upload-btn-cont {
	width: 100%;
	display: grid;
	grid-template-columns: max-content max-content auto;
	column-gap: 0.33vh;
	background-color: transparent;
	box-sizing: border-box;
}

.upload-btn-cont input {
	display: none;
	color: var(--black);
}

.uploadbtn {
	padding: 1vh 1.5vh;
	border-radius: 1.5vh;
	border-top-left-radius: .5vh;
	border-bottom-left-radius: .5vh;
	font-size: 2vh;
	cursor: pointer;
	border: none;
	font-weight: bold;
	background: var(--tea-green);
	user-select: none;
}
.uploadbtn:first-of-type {
	border-radius: 2vh;
	border-top-right-radius: .5vh;
	border-bottom-right-radius: .5vh;
}
.attachment {
	display: grid;
	grid-template-columns: max-content auto max-content;
	background: var(--tea-green);
	padding: 1vh;
	box-sizing: border-box;
	width: auto;
	border-radius: .5vh;
	font-size: 2vh;
	column-gap: 1vh;
	margin-bottom: .33vh;
	height: auto;
}

.attachment:first-of-type {
	border-top-left-radius: 1.5vh;
	border-top-right-radius: 1.5vh;
}

.attachment:last-of-type {
	border-bottom-left-radius: 1.5vh;
	border-bottom-right-radius: 1.5vh;
	margin-bottom: 1vh;
}
.attachment p {
	font-size: 2vh;
	font-weight: normal;
	text-align: left;
	padding-left: 1vh;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.attachment-img {
	height: 5vh;
	width: 5vh;
	border-radius: 2vh;
}
.attachment-a {
	height: 5vh;
	width: 5vh;
	font-size: 3vh;
	border-radius: 2vh;
	padding: auto;
	border: none;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
	background-color: var(--tea-green);
	color: var(--light-eerie-black);
}

.attachment-a :hover {
	background-color: var(--other-green);
	border: 1px solid transparent;
}

.red {
	color: red;
	box-sizing: border-box;
}

.inner-attachment-cont {
	display: grid;
	grid-template-columns: auto;
	font-size: 2.5vh;
	font-weight: normal;
}

.inner-attachment-cont p {
	font-size: 2.5vh;
	font-weight: normal;
}

.theme-picker {
	display: grid;
	grid-template-columns: max-content auto;
	box-sizing: border-box;
}
.theme-picker input[type="radio"] {
	display: none;
}

.theme-picker label {
	cursor: pointer;
}

.theme-picker label img {
	border: 1vh solid transparent;
	width: 20vh;
	box-sizing: border-box;
}

.theme-picker input[type="radio"]:checked + .theme-picker label img {
	border: 1vh solid var(--honeydew);
}

.switch {
	width: calc(6vh + 1.33vh);
	height: calc(3vh + 1.33vh);
	border-top-right-radius: 1vh;
	margin: 0;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--other-green);
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 3vh;
	width: 3vh;
	left: 0.66vh;
	bottom: 0.66vh;
	background-color: var(--honeydew);
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

input:checked + .slider {
	background-color: var(--other-green);
}

input:checked + .slider:before {
	-webkit-transform: translateX(3vh);
	-ms-transform: translateX(3vh);
	transform: translateX(3vh);
}

/* Rounded sliders */
.slider.round {
	border-radius: 3vh;
	border-top-right-radius: 0.5vh;
	border-bottom-right-radius: 0.5vh;
}

.slider.round:before {
	border-radius: 3vh;
}

.libraries-cont {
	width: 40%;
	height: auto;
	padding: 2vh;
	background-color: var(--tea-green);
	left: 30%;
	position: absolute;
	top: 7vh;
	border-radius: 4vh;
	box-sizing: border-box;
}

.library {
	width: 100%;
	padding: 1vh;
	border-radius: 0.5vh;
	background-color: var(--other-green);
	box-sizing: border-box;
	cursor: pointer;
	user-select: none;
	margin-bottom: 0.25vh;
}

.libraries-cont :nth-child(2):not(.library-checkmark):not(input):not(.basic-grid *) {
	border-top-left-radius: 2vh;
	border-top-right-radius: 2vh;
}

.library > p {
	display: inline;
	font-size: 2.5vh;
	font-weight: bold;
}

.library > span {
	display: inline;
	font-size: 2.5vh;
	font-weight: bold;
	float: right;
	margin-right: 0.5vh;
}

.library-label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 3.5vh;
	margin-bottom: 2.4vh;
	margin-left: 0.33vh;
}

input[type="checkbox"] {
	display: none;
}

.library-checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 3vh;
	width: 3vh;
	background-color: var(--tea-green);
	border-radius: 1vh;
}

.library-checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

input[type="checkbox"]:checked + .library-checkmark {
	background-color: var(--tea-green);
}

input[type="checkbox"]:checked + .library-checkmark:after {
	display: block;
	left: 1vh;
	top: 0.6vh;
	width: 0.6vh;
	height: 1.2vh;
	border: solid #76fe96;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.library-info {
	width: 100%;
	padding: 1vh;
	border-radius: 2vh;
	background-color: var(--honeydew);
	box-sizing: border-box;
	display: none;
	border-radius: 0.5vh;
	margin-bottom: 0.33vh;
}

.libraries-cont :nth-last-child(2):not(.library-checkmark):not(input):not(.basic-grid *) {
	border-bottom-left-radius: 2vh;
	border-bottom-right-radius: 2vh;
	margin-bottom: 0;
}

.library-bottom {
	border-bottom-left-radius: 2vh;
	border-bottom-right-radius: 2vh;
}

.library-middle {
	border-top-left-radius: 0.5vh;
	border-top-right-radius: 0.5vh;
	border-bottom-left-radius: 0.5vh;
	border-bottom-right-radius: 0.5vh;
}

.library-submit {
	border: none;
	background-color: var(--honeydew);
	padding: 0.5vh 1vh;
	cursor: pointer;
	border-radius: 2vh;
	font-size: 2vh;
	color: var(--black);
	font-weight: bold;
	margin-top: 1vh;
}

.storage-bar {
	width: 100%;
	background-color: var(--honeydew);
	padding: 1vh;
	padding-bottom: 0.5vh;
	border-radius: 5vh;
	height: auto;
	box-sizing: border-box;
	user-select: none;
}

.storage-bar div {
	background-color: var(--tea-green);
	padding: auto;
	height: 2.5vh;
	border-radius: 0vh;
	display: inline-block;
	margin: 0;
	margin-left: 0;
}

.storage-bar div:first-of-type {
	border-top-left-radius: 5vh;
	border-bottom-left-radius: 5vh;
}

.storage-bar div:last-of-type {
	border-top-right-radius: 5vh;
	border-bottom-right-radius: 5vh;
	margin-right: 0;
}

.storage-list {
	position: relative;
	left: -4vh;
}

.storage-list li {
	list-style-type: none;
	margin-bottom: 0.33vh;
	width: fit-content;
	padding: 0.5vh 1.5vh 0.5vh 1vh;
	border-radius: 3vh;
	transition: 0.2s;
}

.storage-list li span {
	height: 2vh;
	width: 2vh;
	display: inline-block;
	border-radius: 1vh;
	transform: translateY(0.25vh);
	margin-right: 0.66vh;
}

.storage-list li p {
	display: inline-block;
	font-size: 2vh;
}

.landing-cont {
	background-color: var(--honeydew);
	height: 111vh;
	width: 100%;
	box-sizing: border-box;
	padding: 1vh;
	left: 0;
	top: 0;
	position: absolute;
	overflow-x: hidden;
	animation-name: fade-in;
	animation-duration: 3s;
	animation-iteration-count: 1;
	display: flex;
	justify-content: center;
}

.landing-background p {
	font-size: 7vw;
	color: var(--erin);
	display: inline;
	margin-right: 5vh;
	position: absolute;
	top: inherit;
	animation-name: scroll;
	animation-duration: 120s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	left: -100vw;
	user-select: none;
	animation-direction: inherit;
	text-align: inherit;
	float: right;
	width: 33vw;
	text-align: center;
}

.landing-body {
	width: auto;
	margin: auto;
	max-width: 50%;
	top: 30%;
	position: absolute;
	padding: 2vh;
	text-align: center;
	box-sizing: border-box;
	user-select: none;
	background-color: #ffffff62;
	box-shadow: 0 0 5vh 4vh #ffffff62;
	border-radius: 5vh;
	animation-name: slide-in, fade-in;
	animation-duration: 3s;
	animation-iteration-count: 1;
}

.landing-body h1 {
	font-size: 6vh;
	padding: 0;
	margin: 0;
	color: var(--eerie-black);
}

.landing-body p {
	font-size: 2vh;
	color: var(--light-eerie-black);
}

.get-started-btn {
	background-color: var(--light-green);
	cursor: pointer;
	text-decoration: none;
	padding: 0.5vh 2vh;
	border-radius: 4vh;
	border-top-right-radius: 0.5vh;
	border-bottom-right-radius: 0.5vh;
	font-size: 2.5vh;
	font-weight: bold;
	margin-top: 2vh;
	box-shadow: 0 0 0vh 0vh var(--tea-green);
	scale: 1;
	padding-right: 1.5vh;
	z-index: 989;
}

.get-started-btn:last-of-type {
	border-radius: 4vh;
	border-top-left-radius: 0.5vh;
	border-bottom-left-radius: 0.5vh;
	padding-right: 2.25vh;
	margin-left: -0.25vh;
	padding-left: 1.5vh;
}

.get-started-btn:hover {
	box-shadow: 0 0 3vh 1vh var(--tea-green);
	scale: 2;
	z-index: 1;
}

.side-by-side-btn {
	background-color: var(--light-green);
	cursor: pointer;
	text-decoration: none;
	padding: 0.5vh 2vh;
	border-radius: 2vh;
	border-bottom-right-radius: 0.5vh;
	border-bottom-left-radius: 0.5vh;
	font-size: 2.5vh;
	font-weight: bold;
	scale: 1;
	display: block;
	text-align: center;
}

.side-by-side-btn:last-of-type {
	border-radius: 2vh;
	border-top-left-radius: 0.5vh;
	border-top-right-radius: 0.5vh;
	margin-top: .33vh;
}

.landing-info {
	top: 111vh;
	position: absolute;
	height: 105vh;
	width: 100%;
	left: 0;
	display: grid;
	grid-template-columns: 50% 50%;
	background-color: var(--other-green);
}

.landing-info img {
	width: 80%;
	left: 20%;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	user-select: none;
}

.landing-signup {
	background-color: var(--tea-green);
	width: 50%;
	height: fit-content;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	left: 25%;
	padding: 2vh;
	border-radius: 3.75vh;
	overflow: hidden;
	transition: 0.35s;
}

.signup-login {
	text-decoration: none;
	font-size: 2.5vh;
	text-align: center;
	display: flex;
	justify-content: center;
	margin-top: 1vh;
	font-weight: bold;
}

.login-signup-form {
	display: grid;
	grid-template-columns: 50% 50%;
	width: calc(200%);
	column-gap: 4vh;
	left: 0;
	position: relative;
	transition: 0.35s;
}

.signup-login * {
	display: inline-block;
	user-select: none;
	padding: 1vh;
}

.signup-login a {
	background-color: transparent;
	border-radius: 2vh;
	padding: 1vh 1.5vh;
	text-decoration: none;
	cursor: pointer;
	transition: 0.35s;
}

.login-signup-form form {
	width: 100%;
}

.signup-login a.selected {
	background-color: var(--other-green);
}

.login-signup-form {
	margin-top: 1vh;
}

.login-signup-form input[type="text"],
.login-signup-form input[type="password"],
.login-signup-form input[type="email"] {
	width: 100%;
	background-color: var(--honeydew);
	padding: 1vh 2vh;
	border-radius: 5vh;
	font-size: 2vh;
	border: none;
	outline: none;
	margin-bottom: 1vh;
}

.login-signup-form input[type="submit"] {
	width: 100%;
	padding: 1vh 2vh;
	font-size: 2vh;
	background-color: var(--honeydew);
	border: none;
	outline: none;
	border-radius: 5vh;
	cursor: pointer;
	transform: translateY(0.5px);
	font-weight: bold;
}

.login-signup-form label {
	left: 2vh;
	position: relative;
	font-size: 2vh;
	font-weight: bold;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes slide-in {
	0% {
		transform: translateY(5vh);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes scroll {
	0% {
		left: -33vw;
		opacity: 0.15;
	}
	30% {
		opacity: 1;
	}
	70% {
		opacity: 1;
	}
	100% {
		left: 100vw;
		opacity: 0.15;
	}
}

.landing-rounding {
	background-color: var(--other-green);
	height: 5vh;
	top: 108.5vh;
	width: 100%;
	position: absolute;
	left: 0;
	z-index: 100;
}

.landing-rounding div {
	border-bottom-left-radius: 5vh;
	border-bottom-right-radius: 5vh;
	height: 5vh;
	top: 0;
	position: relative;
	left: 0;
	background-color: white;
}

.gradient-background {
	background: #101010;
	background: linear-gradient(var(--rotation-angle), var(--honeydew) 0%, var(--erin) 33%, var(--honeydew) 66%, var(--honeydew) 100%);
	background: -webkit-linear-gradient(var(--rotation-angle), var(--honeydew) 0%, var(--erin) 33%, var(--honeydew) 66%, var(--honeydew) 100%);
	background: -moz-linear-gradient(var(--rotation-angle), var(--honeydew) 0%, var(--erin) 33%, var(--honeydew) 66%, var(--honeydew) 100%);
	animation-duration: 5s;
	animation-name: background-animation;
	animation-iteration-count: infinite;
	background-size: 200% 100%;
	background-position: center;
	animation-direction: alternate-reverse;
	animation-timing-function: ease-in-out;
	transition: 0.5s;
}

@keyframes background-animation {
	0% {
		background-position: 0;
	}
	100% {
		background-position: 70%;
	}
}

#menu-btn {
	visibility: hidden;
}

.menu {
	width: 100%;
	height: 100%;
	background-color: var(--erin);
	left: 100%;
	top: 5vh;
	position: fixed;
	transition: 0.3s;
	z-index: 998;
}

.menu ul {
	position: absolute;
}

.menu li {
	list-style-type: none;
	text-decoration: none;
}

.menu a {
	text-decoration: none;
	font-size: 2.5vh;
}

.menu p {
	transform: translateY(-0.3vh);
	display: inline-block;
}

.menu i {
	transform: translateY(50vh);
	font-size: 2.5vh;
}

.menu-icon {
	display: inline-block;
	cursor: pointer;
	height: 2.5vh;
	width: 2.5vh;
	top: -1vh;
	position: relative;
}

.bar1,
.bar2,
.bar3 {
	width: 25px;
	height: 3px;
	background-color: var(--eerie-black);
	margin: 5px 0;
	transition: 0.4s;
}

.change .bar1 {
	transform: translate(0, 8px) rotate(-45deg);
}

.change .bar2 {
	opacity: 0;
}

.change .bar3 {
	transform: translate(0, -8px) rotate(45deg);
}

.domain-container {
	background-color: var(--tea-green);
	width: 50%;
	left: 25%;
	position: relative;
	padding: 2vh;
	border-radius: 4vh;
	margin-top: 7vh;
}

.domain-container > p {
	font-size: 3vh;
	text-align: center;
	font-weight: bold;
}

.domain-list {
	width: 100%;
	margin-top: -1vh;
}

.domain-list div {
	background-color: var(--honeydew);
	width: 100%;
	border-radius: 0.5vh;
	padding: 1vh 1vh 1vh 2vh;
	font-size: 2.85vh;
	display: grid;
	margin-top: 0.33vh;
	font-weight: bold;
	grid-template-columns: auto max-content max-content;
}

.domain-list div:first-of-type {
	border-top-left-radius: 2vh;
	border-top-right-radius: 2vh;
}

.domain-list div:last-of-type {
	border-bottom-left-radius: 2vh;
	border-bottom-right-radius: 2vh;
}

.domain-list div a {
	background-color: var(--tea-green);
	width: auto;
	padding: 0.5vh 1vh;
	height: 4vh;
	border-radius: 1vh;
	font-size: 2vh;
	text-decoration: none;
	user-select: none;
	cursor: pointer;
}

.domain-list div p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.domain-active {
	color: green;
	font-size: 3vh;
	margin-top: -.25vh;
	height: 3vh;
	width: 3vh;
}

.domain-inactive {
	color: red;
	font-size: 3vh;
	margin-top: -.25vh;
	height: 3vh;
	width: 3vh;
}

.tooltip {
	font-size: 3vh;
	position: relative;
	padding: 0;
	margin: 0;
	height: 3vh;
	transform: translateY(-0.575vh);
	z-index: 100;
	cursor: help;
}

.tooltip .tooltiptext {
	visibility: hidden;
	opacity: 0;
	width: 200px;
	background-color: var(--other-green);
	color: var(--black);
	text-align: center;
	border-radius: 1vh;
	padding: 0.5vh 1.5vh;
	position: absolute;
	font-size: 1.5vh;
	z-index: 1;
	transition: 0.1s;
	user-select: none;
	left: -180px;
	top: -0.5vh;
	opacity: 0;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 0.9;
	top: -0.5vh;
	z-index: 999;
	left: -190px;
}

.spin-animation {
	animation-name: spin;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.admin-container {
	width: 75%;
	margin-top: 7vh;
	padding: 2vh;
	border-radius: 3vh;
	display: grid;
	grid-template-columns: calc(33.33% - 0.33vh / 2) calc(33.33% - 0.33vh / 2) calc(33.33% - 0.33vh / 2);
	column-gap: 0.33vh;
}

.admin-container h1 {
	font-size: 2.75vh;
	text-align: center;
	padding: 0;
	margin: 0;
	margin-bottom: 1vh;
}

.new-user {
	background-color: var(--honeydew);
	width: 100%;
	padding: auto;
	border-radius: 0.5vh;
	padding: 1vh;
	padding-left: 0.9vh;
	display: inline;
	font-size: 2.5vh;
	height: 5.66vh;
	display: grid;
	grid-template-columns: max-content auto max-content;
	column-gap: 1vh;
}

.admin-manage {
	background-color: var(--tea-green);
	font-size: 2vh;
	padding: 0.5vh 1vh;
	border-radius: 2vh;
	text-align: right;
	text-decoration: none;
	user-select: none;
}
.new-user a {
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.new-user * {
	display: inline-block;
}

.new-user:first-of-type {
	border-top-left-radius: 2.66vh;
	border-top-right-radius: 2.66vh;
	padding-bottom: 0.66vh;
}

.new-user:last-of-type {
	border-bottom-left-radius: 2.66vh;
	border-bottom-right-radius: 2.66vh;
	padding-top: 0.66vh;
}

.new-user img {
	height: 4vh;
	border-radius: 2vh;
	padding: 0;
	margin: 0;
	user-select: none;
	margin-bottom: -0.6vh;
}

.new-user p {
	font-weight: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.new-user p span {
	font-weight: bold;
}

.admin-container > div {
	background-color: var(--tea-green);
	padding: 2vh;
	border-radius: 0.5vh;
}

.admin-container > div:first-of-type {
	border-top-left-radius: 5vh;
	border-bottom-left-radius: 5vh;
}

.admin-container > div:last-of-type {
	border-top-right-radius: 5vh;
	border-bottom-right-radius: 5vh;
}

.admin-project-container img {
	border-radius: 0;
}

.button-grid {
	display: grid;
	grid-template-columns: calc(25% - 1vh / 4) calc(25% - 1vh / 4) calc(25% - 1vh / 4) calc(25% - 1vh / 4);
	column-gap: 0.33vh;
}

.button-grid input {
	width: 100%;
	background-color: var(--honeydew);
	padding: 1.5vh;
	border-radius: 0.5vh;
	color: var(--eerie-black);
	outline: none;
	border: none;
	font-size: 2vh;
	font-weight: bold;
	cursor: pointer;
	
}

.button-grid :first-child input {
	border-top-left-radius: 2vh;
	border-bottom-left-radius: 2vh;
}

.button-grid :last-child input {
	border-top-right-radius: 2vh;
	border-bottom-right-radius: 2vh;
}

.button-flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 0.5vh;
	row-gap: 1vh;
}

.button-grid-mod {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.33vh;
	width: 100%;
	overflow: scroll;
	flex-direction: row;
	flex-basis: auto;
}

.button-grid-mod input {
	background-color: var(--honeydew);
	padding: 1.5vh;
	border-radius: 1vh;
	color: var(--eerie-black);
	outline: none;
	border: none;
	font-size: 2vh;
	font-weight: bold;
	cursor: pointer;
	flex-grow: 2;
	width: 100%;
	flex-basis: auto;
}


.button-grid-mod > * {
	flex-grow: 1;
}

.button-flex input {
	width: 100%;
	background-color: var(--honeydew);
	color: var(--eerie-black);
	padding: 1vh;
	border-radius: 1vh;
	font-size: 1.75vh;
	border: none;
	cursor: pointer;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	font-weight: bold;
}

.button-flex form {
	flex-grow: 2;
}

.project-description {
	background-color: var(--honeydew);
	color: var(--eerie-black);
	outline: none;
	border: none;
	resize: none;
	font-family: "Noto Sans", sans-serif;
	border-radius: 2vh;
	padding: 1vh 2vh;
	width: 100%;
	padding-bottom: 5vh;
}

.description-container {
	background-color: var(--honeydew);
	border-radius: 2vh;
	width: 100%;
	font-size: 2vh;
	color: var(--eerie-black);
	margin-top: 1vh;
	position: relative;
}

.description-container input[type="submit"] {
	position: absolute;
	right: 1vh;
	bottom: 1vh;
	background-color: var(--tea-green);
	padding: 1vh 1.5vh;
	border-radius: 3vh;
	border: none;
	color: var(--eerie-black);
	font-weight: bold;
	cursor: pointer;
	width: fit-content;
	display: flex;
	align-items: center;
	float: right;
	font-size: 1.5vh;
}

.description-label {
	width: 4vh;
}

*:disabled, .disabled-label {
	opacity: .5;
	cursor: default;
}

.pagination-cont {
	width: 50%;
	left: 25%;
	position: relative;
	margin-top: 7vh;
}

.pagination-btn-cont {
	display: grid;
	grid-template-columns: max-content max-content max-content;
	column-gap: 3px;
	float: right;
}

.pagination-btn-cont a {
	background-color: var(--other-green);
	font-size: 2vh;
	border-radius: .5vh;
	padding: .25vh .5vh;
	cursor: pointer;
}

.pagination-btn-cont a:first-of-type {
	border-top-left-radius: 3vh;
	border-bottom-left-radius: 3vh;
	padding-right: .25vh;
}

.pagination-btn-cont a:last-of-type {
	border-top-right-radius: 3vh;
	border-bottom-right-radius: 3vh;
	padding-left: .25vh;
}

.pagination-btn-icon {
	width: 3vh;
	height: 3vh;
	transform: translateY(.25vh);
}

.pagination-btn-cont a:hover {
	background-color: var(--tea-green);
}

.pagination-btn-cont input {
	width: 5vh;
	font-size: 2vh;
	background-color: var(--tea-green);
	font-family: 'Noto Sans', sans-serif;
	border: none;
	outline: none;
	border-radius: .5vh;
	padding: .5vh .75vh;
	color: var(--eerie-black);
}

.pagination-btn-cont input:focus {
	background-color: var(--honeydew);
}

.pagination-item-cont {
	margin-top: 1vh;
}

.pagination-item-cont div {
	width: 100%;
	background-color: var(--tea-green);
	border-radius: .5vh;
	padding: 1vh 1vh 1vh;
	display: grid;
	grid-template-columns: max-content auto max-content;
	column-gap: 1vh;
	margin-bottom: .33vh;
}

.pagination-item-cont div:first-of-type {
	border-top-left-radius: 3vh;
	border-top-right-radius: 3vh;
}

.pagination-item-cont div:last-of-type {
	border-bottom-left-radius: 3vh;
	border-bottom-right-radius: 3vh;
}

.pagination-item-btn {
	width: auto;
	font-size: 2.5vh;
	background-color: var(--other-green);
	padding: .5vh 1.5vh;
	border-radius: 3vh;
	text-decoration: none;
	font-weight: bold;
	height: max-content;
	line-height: 4vh;
	font-size: 2.5vh;
	height: 5vh;
	cursor: pointer;
	user-select: none;
}

.pagination-item-cont div img {
	height: 5vh;
	margin-bottom: -.75vh;
	user-select: none;
	border-radius: .5vh;
}

.pagination-item-cont .user-pfp {
	border-radius: 5vh;
}

.pagination-item-cont div a:not(.pagination-item-btn) {
	font-size: 2.5vh;
	height: 5vh;
	line-height: 4.5vh;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

#shareText {
	text-align: center; 
	margin-top: -.5vh; 
	width: 75%;
}

.project-mod-cont {
	width: 50%;
	padding: 2vh;
	border-radius: 4vh;
	background-color: var(--tea-green);
}

.project-mod-header {
	background-color: var(--honeydew);
	font-size: 2.5vh;
	width: 100%;
	padding: 1vh 2vh;
	border-radius: 3vh;
	user-select: none;
	
}

.project-mod-header p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.project-mod-header a {
	cursor: pointer;
}

.project-mod-body {
	width: 100%;
	display: grid;
	grid-template-columns: auto 33%;
	column-gap: 1vh;
	padding: 1vh;
	margin-bottom: 0;
}

.project-mod-body div p {
	font-weight: bold;
	display: inline;
	line-height: 200%;
	user-select: none;
}

.project-mod-body div > p > p {
	font-weight: normal;
	user-select: none;
}

.project-mod-body p span{
	background-color: var(--honeydew);
	padding: 0.5vh 1vh;
	font-size: 1.5vh;
	border-radius: 1vh;
	list-style-type: none;
	font-weight: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	user-select: none;
	
}

.project-mod-body p a:not(.share-link){
	background-color: var(--honeydew);
	padding: 0.5vh 1vh;
	font-size: 1.5vh;
	border-radius: 1vh;
	list-style-type: none;
	font-weight: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	user-select: none;
	cursor: pointer;
	text-decoration: none;
}

.share-link {
	font-weight: normal;
	cursor: pointer;
}

.project-mod-body iframe {
	border: none;
	outline: none;
	background-color: var(--honeydew);
	border-radius: 1vh;
	margin-top: .5vh;
	width: 100%;
}

.waitlist-input {
	width: max-content;
	background-color: #e4ffeaa4;
	border: .33vh solid var(--erin);
	outline: none;
	font-size: 1.75vh;
	padding: 1vh 2vh;
	border-radius:3vh .5vh .5vh 3vh;
	font-family: 'Noto Sans', sans-serif;
}

.waitlist-submit {
	background-color: var(--erin);
	font-size: 1.75vh;
	border-radius: .25vh 3vh 3vh .5vh;
	border: .33vh solid var(--erin);
	padding: 1vh 2vh;
	cursor: pointer;
	font-weight: bold;
}

.waitlist-submit:disabled {
	opacity: 1;
	color: black;
	cursor: default
}


.pagination-search {
	background-color: var(--tea-green);
	font-size: 2vh;
	color: white;
	padding: .7vh 2vh;
	border: none;
	outline: none;
	border-radius: 3vh;
	font-family: 'Noto Sans', sans-serif;
}

.terms-container {
	width: 75%;
	font-size: 2vh;
	margin-top: 3vh;
}

.explore-search {
	width: 100%;
	background-color: var(--tea-green);
	outline: none;
	border: none;
	font-family: 'Noto Sans', sans-serif;
	font-size: 2.5vh;
	color: var(--black);
	padding: 1vh 2.5vh;
	border-radius: 3vh .5vh .5vh 3vh;
}

.explore-submit {
	padding: 1.2vh;
	padding-right: 2vh;
	border-radius: .5vh 3vh 3vh .5vh;
	background-color: var(--tea-green);
	cursor: pointer;
	display: flex; flex-direction: column; align-items: center;
}

.explore-search-btn {
	display: none;
}

.explore-form{
	width:45%;
	display: grid;
	grid-template-columns: auto max-content;
	column-gap: .33vh;
	position: sticky;
}
.explore-project-img > img {
	background-color: var(--honeydew);
	border-radius: 1vh;
	width: 100%;
}


.explore-grid {
	 margin-top: 1vh;
	 width: 45%;
}

.explore-project {
	width: 100%;
	padding: 2vh;
	background-color: var(--tea-green);
	display: grid;
	grid-template-columns: 40% calc(60% - 2vh);
	border-radius: .5vh;
	column-gap: 2vh;
	margin-bottom: .33vh;
	position: relative;
}

.explore-project:first-of-type {
	border-top-left-radius: 2.5vh;
	border-top-right-radius: 2.5vh;
}

.explore-project:last-of-type {
	border-bottom-left-radius: 2.5vh;
	border-bottom-right-radius: 2.5vh;
	margin-bottom: 5vh
}

.explore-project > div > div > img {
	width: 100%;
	border-radius: 1vh;
}

.explore-project-img {
	position: relative;
}

.explore-star {
	position: absolute;
	top: .5vh;
	right: .5vh;
	display: grid;
	grid-template-columns: max-content max-content;
	background-color: var(--other-green);
	padding: .5vh;
	border-radius: .5vh;
	text-decoration: none;
	cursor: pointer;
	column-gap: .25vh;
	user-select: none;
}

.project-info * .explore-star {
	display: grid;
	grid-template-columns: max-content max-content;
	background-color: var(--other-green);
	padding: .5vh;
	border-radius: .5vh;
	text-decoration: none;
	cursor: pointer;
	column-gap: .25vh;
	user-select: none;
	position: relative;
	width: max-content;
}

.explore-star:hover {
	text-decoration: none !important;
}

.explore-star img {
	width: 2.25vh;
	height: 2.25vh;
}

.explore-star p {
	font-size: 1.66vh;
}

.explore-project > div > p {
	font-size: 2.5vh;
	font-weight: bold;
}

.explore-description-iframe {
	width: 100%;
	height: auto;
	border-radius: 1.5vh;
	border: none;
	outline: none;
	background-color: var(--tea-green);
	font-family: 'Noto Sans', sans-serif;
	margin-top: .5vh;
}

.loading-img {
	background: var(--honeydew);
	/*background-size: 200% 100%;
	background: linear-gradient(90deg, rgba(71,71,71,1) 0%, rgb(112, 112, 112) 50%, rgba(71,71,71,1) 100%);
	animation-duration: 1s;
	animation-name: background-animation;
	animation-iteration-count: infinite;
	background-size: 200% 100%;
	background-position: center;
	animation-direction: alternate-reverse;
	animation-timing-function: ease-in-out;
	transition: 0.5s;*/
	border-radius: 1vh;
}

@keyframes loading {
	from { background-position: -100% 0%; }
  	to { background-position: 100% 0%; }
}

.explore-project-title {
	display: grid;
	width: 100%;
	grid-template-columns: max-content max-content auto;
	column-gap: .5vh;
	font-size: 2.5vh;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.explore-project-title p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.explore-project-title a {
	cursor: pointer;

}

.explore-project-title p {
	user-select: none;
}

.explore-tags {
	display: inline;
	margin-top: 1vh
}

.explore-tags p {
	line-height: 200%;
}

.explore-tags a {
	background-color: var(--honeydew);
	padding: 0.5vh 1vh;
	font-size: 1.5vh;
	border-radius: 1vh;
	list-style-type: none;
	font-weight: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	user-select: none;
	cursor: pointer;
	text-decoration: none;
}

.project-report {
	background-color: var(--tea-green);
	padding: 1vh 2vh;
	border-radius: 3vh;
	font-size: 2.5vh;
	margin: 1vh 0;
	cursor: pointer;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	user-select: none;
}

.project-report-icon {
	height: 2.25vh;
	width: 2.25vh;
	transform: translateY(1.5px);
	
}

.admin-report-container {
	width: 33%;
}

.admin-actions {
	width: 33%;
	margin-bottom: 3vh;
}

.admin-report {
	background-color: var(--tea-green);
	padding: 1vh;
	display: grid;
	grid-template-columns: max-content auto max-content;
	border-radius: .5vh;
	column-gap: 1vh;
	margin-bottom: .33vh;
}

.admin-report img {
	width: 100%;
	max-height: 5vh;
	user-select: none;
}

.admin-report div {
	font-size: 2vh;
	line-height: 2.5vh;
}

.admin-report div a {
	cursor: pointer;
	font-weight: bold;
}

.admin-report div p {
	font-size: 1.75vh;
}

.admin-report:first-of-type {
	border-top-left-radius: 2vh;
	border-top-right-radius: 2vh;
}

.admin-report:last-of-type {
	border-bottom-left-radius: 2vh;
	border-bottom-right-radius: 2vh;
}

.admin-report-btn {
	display: flex; flex-direction: column; align-items: center;
	height: 100%;
}

.admin-report-btn > a {
	background-color: var(--honeydew);
	padding: 1vh 2vh;
	font-size: 1.75vh;
	height: fit-content;
	border-radius: 3vh;
	cursor: pointer;
	font-weight: bold;
	text-decoration: none;
	user-select: none;
}

.steps-cont {
	width: 100%;
	font-size: 2vh;
	font-weight: bold;
	margin-top: 1vh;
}

.steps {
	display: grid;
	grid-template-columns: auto;
	margin-top: 1vh;
	padding-bottom: 1vh;
}

.step-obj {
	display: grid;
	grid-template-columns: max-content auto max-content;
	padding: .75vh 0;
	border-bottom: 1px solid #666666;
	column-gap: .5vh;
	overflow: hidden;
	border-radius: 0 !important;
}

.step-obj a {
	height: 2.75vh;
	width: 2.75vh;
	border-radius: 100%;
	text-align: center;
	cursor: pointer;
	transform: translateY(-.125vh);
}

.step-obj-x {
	height: 3vh;
}

.step-obj:first-of-type {
	padding-top: 0;
}

.step-obj:last-of-type {
	border: none;
}

.step-obj input {
	color: var(--black);
	background-color: transparent;
	border: none;
	outline: none;
	font-size: 2vh
}

.step-obj p {
	color: #b6b6b6;
	font-size: 2vh;
	user-select: none;
}

.step-add-btn {
	background-color: var(--honeydew);
	color: var(--black);
	width: max-content;
	font-size: 1.75vh;
	text-decoration: none;
	cursor: pointer;
	padding: .5vh 1.5vh;
	border-radius: 3vh !important;
	display: inline;
	position: relative;
	margin-top: 1vh;
	user-select: none;

}

.project-pg-cont {
	width: 100%;
	display: grid;
	grid-template-columns: auto 20%;
	column-gap: .5vh;
	position: absolute;
	left: 0;
	top: 5vh;
	height: 95vh;
}

.project-pg-cont iframe {
	width: 100%;
	border: none;
	height: 100%;
	border-top-right-radius: .5vh;
}

.project-pg-cont > div {
	width: 100%;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: max-content max-content auto;
	row-gap: .33vh;
	padding-right: .5vh;
}

.project-pg-userinfo {
	display: grid;
	grid-template-columns: max-content auto;
	background-color: var(--tea-green);
	height: max-content;
	border-radius: .5vh 1.5vh .5vh .5vh;
	padding: .5vh;
	column-gap: 1vh;
	width: 100%;
	overflow-y: hidden;
}

.project-pg-userinfo img {
	height: 6vh;
	border-radius: 5vh;
	user-select: none;
}

.project-pg-userinfo div {
	font-size: 2vh;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.project-pg-userinfo div * {
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.project-pg-btns {
	display: grid;
	grid-template-columns: max-content auto;
	column-gap: .33vh;
}

.project-report-btn {
	background-color: var(--tea-green);
	font-size: 2vh;
	padding: 1vh;
	text-decoration: none;
	border-radius: .5vh;
	user-select: none;
	cursor: pointer;
}

.project-report-btn-icon {
	height: 2vh;
	width: 2vh;
	transform: translateY(.25vh);
}

.project-pg-cont > div > iframe {
	border-radius: .5vh .5vh 1.5vh .5vh;
}

.project-star {
	display: grid;
	grid-template-columns: max-content max-content;
	font-size: 2vh;
	background-color: var(--tea-green);
	padding: 1vh;
	border-radius: .5vh;
	text-decoration: none;
	cursor: pointer;
}

.project-star p {
	user-select: none;
	text-decoration: none;
}

.project-star img {
	height: 2.5vh;
	width: 2.5vh;
}

@media screen and (max-width: 1500px) {
	.file-directory-creation {
		width: 50%;
	}

	.admin-report-container {
		width: 50%;
	}

	.admin-actions {
		width: 50%;
	}
	
	.explore-grid {
		width: 60%;
	}

	.explore-form {
		width: 60%;
	}

	.admin-container {
		width: 90%;
		left: 5%;
	}
}

@media screen and (max-width: 1200px) {
	.file-directory-creation {
		width: 75%;
		left: 12.5%;
	}

	.admin-report-container {
		width: 90%;
	}

	.admin-actions {
		width: 90%;
	}

	.alt-home {
		width: 90%;
		margin-left: 5%;
	}

	.explore-grid {
		width: 75%;
	}

	.explore-form {
		width: 75%;
	}

	.admin-container {
		width: 97.5%;
		left: 1.25%;
	}
	.project-mod-cont {
		width: 90%;
	}

	.project-mod-body {
		grid-template-columns: auto;
		row-gap: 1vh;
	}
}

/* keep this below everything else or else mobile friendliness won't work */

@media screen and (max-width: 700px) {
	.project-pg-cont {
		grid-template-columns: auto;
		row-gap: .5vh;
		grid-template-rows: max-content auto;
		height: auto;
		top: 6vh;
	}

	.project-pg-cont > iframe {
		grid-row-start: 2;
		height: 95vh;
		border-radius: 0;
		margin: 0 .5vh;
		width: calc(100% - 1vh);
		border-radius: .5vh .5vh 0 0;
	}

	.project-pg-cont > div {
		grid-row-start: 1;
		padding-left: .5vh;
	}

	.project-pg-userinfo {
		border-radius: 1.5vh 1.5vh .5vh .5vh;
	}

	.project-pg-cont > div > iframe {
		border-radius: .5vh;
	}

	.file-directory-creation {
		width: 90%;
		left: 5%;
		grid-template-columns: auto;
	}

	#first-file-creation {
		border-right: 0px solid transparent !important;
		border-bottom: 1px solid var(--honeydew);
	}
	
	.admin-report {
		grid-template-columns: auto max-content;
	}

	.admin-report img {
		display: none;
	}

	.logo {
		transform: translateY(.33vh);
	}

	.libraries-cont {
		width: 90%;
		left: 5%;
	}

	.explore-project-title {
		margin-top: .5vh;
		margin-bottom: .25vh;
	}
	.explore-project {
		grid-template-columns: 100%;
	}

	.explore-grid {
		width: 90%;
	}

	.explore-form {
		width: 90%;
	}

	.terms-container {
		width: 95%;
		font-size: 1.5vh;
	}

	.project-mod-cont {
		width: 90%;
	}

	.project-mod-body {
		grid-template-columns: auto;
		row-gap: 1vh;
	}
	#shareText {
		width: 100%;
	}

	.pagination-cont {
		width: 90%;
		left: 5%;
	}

	.project-settings-grid {
		grid-template-columns: 100%;
		width: 90%;
		left: 5%;
	}

	.project-tags {
		grid-row-start: 2;
		grid-row-end: 3;
	}

	.project-settings {
		width: 100% !important;
	}

	.admin-container {
		width: 95%;
		left: 2.5%;
		grid-template-columns: auto;
		row-gap: 0.33vh;
	}

	.admin-container > div {
		border-radius: 0.5vh !important;
	}

	.admin-container > div:first-of-type {
		border-top-left-radius: 5vh !important;
		border-top-right-radius: 5vh !important;
	}

	.admin-container > div:last-of-type {
		border-bottom-left-radius: 5vh !important;
		border-bottom-right-radius: 5vh !important;
	}
	.file-select-form {
		padding-right: 1vh;
	}

	.create-cont {
		width: 95%;
		left: 2.5%;
	}

	.settings-container {
		width: 95%;
		left: 2.5%;
	}

	.password-reset {
		width: 95%;
		left: 2.5%;
	}
	nav li:not(#menu-btn) {
		display: none;
	}

	#menu-btn {
		visibility: visible;
		right: 2vh;
		position: relative;
	}

	.project-container,
	.domain-container {
		grid-template-columns: auto;
		width: 90%;
		left: 5%;
	}

	.tooltip .tooltiptext {
		max-width: 200px;
		margin-left: 0;
		left: -180px;
	}

	.tooltip:hover .tooltiptext {
		left: -190px;
	}

	.project-container div,
	.project-container div:nth-child(4) {
		border-radius: 0.5vh;
	}

	.project-container div:first-child {
		border-top-left-radius: 3vh;
		border-top-right-radius: 3vh;
	}

	.project-container div:last-child {
		border-bottom-left-radius: 3vh;
		border-bottom-right-radius: 3vh;
	}

	.profile-info {
		grid-template-columns: auto;
		row-gap: 1.5vh;
	}

	.profile-banner img {
		left: calc(50% - (40px * 2));
	}

	.profile-header {
		width: 90%;
		left: 5%;
	}

	.landing-rounding {
		display: none;
	}

	.landing-cont {
		background: var(--honeydew);
		background: linear-gradient(var(--rotation-angle), var(--honeydew) 0%, var(--erin) 33%, var(--honeydew) 66%, var(--honeydew) 100%);
		background: -webkit-linear-gradient(var(--rotation-angle), var(--honeydew) 0%, var(--erin) 33%, var(--honeydew) 66%, var(--honeydew) 100%);
		background: -moz-linear-gradient(var(--rotation-angle), var(--honeydew) 0%, var(--erin) 33%, var(--honeydew) 66%, var(--honeydew) 100%);
		animation-name: background-animation;
		animation-duration: 5s;
		animation-iteration-count: infinite;
		background-size: 300% 100%;
		animation-direction: alternate-reverse;
		animation-timing-function: ease-in-out;
		transition: 0.5s;
		padding: 0;
		display: flex; justify-content: center; align-items: center;
		height: auto;
		min-height: 100vh;
	}



	@keyframes background-animation {
		0% {
			background-position: 0;
		}
		100% {
			background-position: 100%;
		}
	}

	.landing-info {
		grid-template-columns: auto;
		top: 100vh;
	}

	.landing-info img {
		display: none;
	}

	.landing-signup {
		width: 90%;
		left: 5%;
	}

	.landing-body {
		width: 90% !important;
		padding: 0;
		margin: 0;
		top: 10%;
		position: relative;
		max-width: none;
	}

	.landing-body h1 {
		font-size: 5vh;
	}

	.waitlist-input {
		border-radius: 3vh 3vh .5vh .5vh;
		width: 90%;
		margin-bottom: .33vh;
	}

	.waitlist-submit {
		border-radius: .5vh .5vh 3vh 3vh;
		width: 90%;
	}

	.landing-background div > p {
		display: none;
	}

	.landing-background p {
		animation-duration: 5s;
		animation: none;
		text-align: center;
	}

	.landing-background div {
		display: inherit;
	}

	.join-box {
		width: 90vw;
		left: 5vw;
	}

	.home-background {
		width: auto;
	}

	header {
		min-height: 5vh;
	}

	.logo {
		font-size: 2.5vh;
	}

	.login-container {
		width: 90vw;
		left: 5vw;
	}

	.landing-container {
		display: grid;
		grid-template-columns: 50% 50%;
		width: 100%;
		z-index: 100;
		top: 15vh;
		position: fixed;
	}

	.landing-header {
		width: auto;
	}

	.landing-header span {
		font-size: 2em;
	}

	.different-landing-body {
		width: 100%;
	}

	.about-container {
		display: block;
		visibility: hidden;
	}

	.admin-panel {
		width: calc(100% - 2vw);
		left: 1vw;
	}

	.alt-home {
		grid-template-columns: auto;
		padding: 0 5%;
		width: 100%;
		left: 0;
		position: absolute;
		margin: 0;
		overflow-x: hidden;
	}

	.alt-home * {
		max-width: 90vw;
	}

	.suggested-feed {
		grid-row-start: 2;
		margin-top: 2vh;
	}

	.recent-projects,
	.suggested-projects {
		grid-template-columns: auto;
		row-gap: 0.5vh;
	}

	.recent-projects div {
		max-width: none;
	}

	.recent-projects p,
	.suggested-projects p {
		grid-column-start: 0;
		grid-column-end: 1;
	}

	.alt-home a {
		font-size: 2.5vh;
	}

	.recent-projects div:first-of-type,
	.suggested-projects > div:first-of-type {
		border-radius: 1vh;
		border-top-left-radius: 3vh;
		border-top-right-radius: 3vh;
	}

	.suggested-projects {
		display: block;
		grid-template-columns: auto;
	}

	
	.suggested-projects > * {
		margin-bottom: .33vh;
	}

	.suggested-projects > a {
		padding-bottom: 50vh !important;
	}


	#createProject {
		display: none;
	}

	.create-project-btn {
		display: none;
	}

	.explore-star {
		display:  grid !important;
		grid-template-columns: max-content max-content !important;
		column-gap: .25vh;
	}

	.recent-projects > div:last-of-type,
	.suggested-projects > div:last-of-type {
		border-radius: 1vh;
		border-bottom-left-radius: 3vh;
		border-bottom-right-radius: 3vh;
	}

	.alt-news,
	.alt-news-warning p {
		font-size: 2.25vh;
	}

	.user-chip p {
		font-size: 2.5vh;
	}
}

p {
	border-radius: none;
}