@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

body {
  font-family: "Mona Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.link-button {
	border-style: solid;
	border-color: black;
	background-color: white;
	border-radius: 12px;
	padding: 15px;
	color: black;
	transition: 0.4s;
	text-decoration: none;
}

.link-button:hover {
	background-color: black;
	color: white;
}

.small-desc {
	font-size: 10px;
}

.projects {
	width: 50%;
	border-style: solid;
	border-color: black;
	background-color: white;
	border-radius: 12px;
	padding: 15px;
	color: black;
	transition: 0.4s;
}

.projects:hover {
	width: 60%;
}

.topnav {
	border-style: solid;
	border-color: black;
	background-color: black;
	color: white;
	border-radius: 12px;
	padding: 15px;
}

.menu-link {
	text-decoration: none;
	font-size: 16px;
	color: white;
	transition: 0.4s;
}

.menu-link:hover {
	font-size: 18px;
}

.signup-link {
	text-decoration: none;
	font-size: 16px;
	color: black;
	transition: 0.4s;
}

.signup-link:hover {
	font-size: 18px;
}

.toolkit-button {
	font-size: 16px;
	color: black;
	transition: 0.4s;
	width: 50%;
}

.toolkit-button:hover {
	font-size: 18px;
}

.toolkit, .project-tools {
	width: 75%;
	border-style: solid;
	border-color: black;
	background-color: white;
	color: black;
	border-radius: 12px;
	padding: 15px;
}

.editor {
	font-family: "Roboto Mono", monospace;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	text-align: left;
	border-style: solid;
	border-color: #3b3b3b;
	background-color: #3b3b3b;
	color: white;
	border-radius: 12px;
	padding: 15px;
}

.display {
	font-family: "Roboto Mono", monospace;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	text-align: left;
	border-style: solid;
	border-color: black;
	background-color: black;
	color: white;
	border-radius: 12px;
	padding: 15px;
}

.img-button {
	width: 50px;
	height: 50px;
	transition: 0.4s;
}

.img-button:hover {
	width: 60px;
	height: 60px;
}

.projecttools-title, .toolkit-title {
	font-family: "Roboto Mono", monospace;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

.code {
	font-size: 16px;
	font-family: "Roboto Mono", monospace;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	background-color: #575757;
	border-style: solid;
	border-color: #575757;
	border-radius: 12px;
	color: white;
	padding: 5px;
	transition: 0.4s;
}

.code:hover {
	font-family: 18px;
	background-color: #6e6e6e;
	border-color: #6e6e6e;
}

.graphics-canvas {
	border-style: solid;
	border-color: black;
	border-radius: 12px;
	background-color: white;
	width: 50%;
	height: 80%;
}

.gallery-image {
	border-style: solid;
	border-color: black;
	border-radius: 12px;
}

.login-panel {
	border-style: solid;
	border-color: black;
	border-radius: 12px;
	background-color: white;
	padding: 10px;
	width: 35%;
}

.login-form {
	font-family: "Roboto Mono", monospace;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

.login-input {
	background-color: white;
	border-style: solid;
	border-color: gray;
	border-radius: 12px;
	padding: 5px;
	transition: 0.4s;
}

.login-input:focus {
	border-color: black;
}

.project-name {
	width: 7%;
	background-color: white;
	border-style: solid;
	border-color: black;
	border-radius: 12px;
	font-size: 32px;
	transition: 0.4s;
}

.project-name:hover {
	font-size: 36px;
	width: 8%;
}