@import url("./colors.css");

/* Common Css for HTML files in hosted */

body {
	font-family: 'Montserrat', sans-serif;
	background: var(--bg-color);
	color: #222;
	line-height: 1.6;
}

.textentry {
	font-family: arial, sans-serif;
}

h1,
h2 {
	font-family: 'Abel', sans-serif;
	text-align: center;
	font-weight: 400;
	margin: 0 !important;
}

#framing {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#framing-code {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 25px;
}

#content {
	background-color: var(--base-color);
	color: var(--white-color);
	border-radius: 10px;
	padding: 20px;
}

.width-400p {
	width: 400px;
}

.width-440p {
	width: 450px;
}

.width-550p {
	width: 550px;
}

.centered {
	text-align: center;
}

.incorrect-register-hidden,
.incorrect-signin-hidden {
	display: none;
}

.incorrect-register-shown,
.incorrect-signin-shown {
	border-radius: 2px;
	padding: 2px;
	color: var(--white-color);
	background-color: #E21;
	text-align: center;
}

input {
	color: var(--black-color);
}

.lang-dropdown {
	position: fixed;
	top: 60px;
	right: 30px;
	border-radius: 5px;
	cursor: pointer;
	width: 125px;
	height: 26px;
}

.reset {
	color: #fffc;
	text-decoration: none;
}

.reset:hover {
	color: #fff;
}

.menu-item {
	border-radius: 8px;
	color: var(--white-color);
	transition: background-color 100ms, border-color 100ms ease;
}

#logo {
	text-align: center;
}

#codeField {
	padding: .5em .6em;
	display: inline-block;
	border: 1px solid #ccc;
	-webkit-box-shadow: inset 0 1px 3px #ddd;
	box-shadow: inset 0 1px 3px #ddd;
	border-radius: 4px;
	vertical-align: middle;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 10pt;
}

.incorrect-code-hidden {
	display: none;
}

.incorrect-code-shown {
	margin-top: 10pt;
	border-radius: 2px;
	padding: 2px;
	color: #fff;
	background-color: #E21;
	text-align: center;
}

.char-field {
	width: 45pt;
	height: 45pt;
	font-size: 24pt;
	padding: 0;
	text-align: center;
	border: 1px solid black;
	background: white;
	margin: 4pt;
}

.button-shape {
	background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
	-webkit-text-fill-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
	color: -internal-light-dark(black, white);
}

.button-image-shape {
	width: 43pt;
	height: 43pt;
	background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
	-webkit-text-fill-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
}

.selected-shape {
	width: 43pt;
	height: 43pt;
}

#shapes {
	margin-top: 4pt;
	margin-bottom: 4pt;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 600px;
}

.option-label {
	display: inline-block;
	margin-left: 4pt;
	margin-right: 20pt;
}

.hidden-element {
	display: none;
}

.spaced {
	margin: 4pt;
}

.code-shape-container {
	margin-bottom: 24pt;
}

/* Header */
.top-bar {
	width: 100%;
	height: 85px;
	color: #e8e8e8 !important;
	background-color: var(--white-color) !important;
}

.top-bar .site-img {
	position: absolute;
	top: 10px;
	left: 30px;
	cursor: pointer;
	user-select: none;
}

.topmenu {
	display: flex;
	justify-content: flex-end;
	margin-right: 20px;
	align-items: center;
	height: 100%;
}

.topmenu div {
	padding: 20px;
	cursor: pointer;
	user-select: none;
	color: var(--base-color);
	transition: color 0.5s;
}

.topmenu div:hover {
	color: var(--secondary-color);
}

.topmenu-login {
	display: flex;
	justify-content: flex-end;
	margin-right: 20px;
	align-items: center;
	height: 100%;
	margin-top: -25px;
}

.anchor-tags {
	padding: 20px;
	cursor: pointer;
	user-select: none;
	text-decoration: none;
	color: var(--base-color);
	transition: color 0.5s;
}

.anchor-tags:hover {
	color: var(--secondary-color);
}

.selected {
	color: var(--secondary-color) !important;
}

.bold {
	font-weight: bold !important;
	font-family: 'Montserrat', sans-serif;
}

.switch-msg {
	text-align: center;
	text-decoration: underline;
	font-size: 14px;
	font-style: italic;
	color: var(--link-blue);
	margin-top: 20px;
}

.login-options {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: calc(100vh - 150px);
}

.login-heading {
	font-size: 20px;
	margin-bottom: 10px;
	color: var(--base-color);
}

.login-tiles-row {
	display: flex;
}

.login-tile {
	width: 300px;
	height: 250px;
	border-radius: 5px;
	box-shadow: 4px 4px 10px 1px var(--grey-color);
	background-color: var(--tile-color);
	color: var(--white-color);
	font-weight: bold;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	text-align: center;
	margin: 20px;
	text-decoration: none;
}

.login-tile img {
	width: 130px;
	height: 130px;
	margin-bottom: 20px;
}

.tile1 {
	background-color: var(--base-color);
}

.tile2 {
	background-color: var(--green-color);
}

.code-button-container {
	display: flex;
	justify-content: space-evenly;
	margin-top: 20px;
}

.code-button {
	width: 20%;
	padding: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.code-button.next-button img {
	margin-left: 8px;
}

.code-button.back-button img {
	margin-right: 8px;
}

.class-code-heading {
    font-family: 'Montserrat', sans-serif;
}