@media screen and (min-width: 769px) {

@font-face {
	font-family: "Arson Pro Bold";
	font-style: normal;
	font-weight: 400;
	src: url('Arson Pro Bold.otf') format("opentype");
}

* {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	box-sizing: border-box;
}

html, body {
	height: 100%;
	width: 100%;
}
#header-index, #header-app {
	position: fixed;
	width: 100%;
	height: 50px;
	z-index: 1;
} 
#header-settings {
	height: 50px;
}
#search-box-index {
	outline: none;
	position: relative;
	padding: 5px 8px;
	left: 30px;
	border: 0;
	border-radius: 20px;
}
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}
#search-box-favorites {
	outline: none;
	position: relative;
	padding: 5px 8px;
	left: 30px;
	border: 0;
	border-radius: 20px;
}
#btn-account-menu-index {
	cursor: pointer;
	position: absolute;
	right: 13px;
	top: 8px;
}
#btn-account-menu-input-index {
	cursor: pointer;
	position: absolute;
	right: 10px;
	top: 8px;
	height: 35px;
	width: 35px;
	opacity: 0;
	z-index: 2;
}
#btn-account-menu-index-input-icon {
	font-size: 35px;
	z-index: 2;
}
#btn-account-menu-index-input-img {
	display: none;
	width: 35px;
	height: 35px;
	border-radius: 50%;
}
#btn-account-menu-index-img {
	display: none;
	width: 35px;
	height: 35px;
	border-radius: 50%;
}

#account-menu-index-container {
	display: none;
	position: absolute;
	top: 0;
	height: 100vh;
	width: 100vw;
	z-index: 1;
}
#account-menu-index {
	position: absolute;
	top: 46px;
	right: 5px;
	display: flex;
	flex-direction: column;
	z-index: 2;
}
.account-menu-arrow-back {
	display: none;
}
#account-menu-header-index {
	display: flex;
	padding: 8px 10px;
	gap: 8px;
}
#account-menu-header-index p {
	position: relative;
	top: 10.5px;
	font-weight: 600;
}
#account-menu-header-index .material-icons {
	font-size: 35px;
}
#account-menu-main-index {
	display: flex;
	flex-direction: column;
}
#account-menu-main-index .material-icons {
	position: relative;
	top: 0px;
	left: -5px;
}
#account-menu-main-index div {
	padding: 8px 50px 8px 18px;
	cursor: pointer;
	display: flex;
	gap: 5px;
}
#account-menu-main-index p {
	display: inline-block;
	position: relative;
	top: 5px;
}

#site-logo-index, #site-logo-settings, #site-logo-favorites, .site-logo-app {
	display: inline-block;
	font-family: "Arson Pro Bold";
	position: relative;
	font-size: 20px;
	top: 2px;
	font-weight: 800;
	line-height: 50px;
	left: 13px;
}
#site-logo-settings {
	left: 26px;
}

#main-index {
	display: flex;
	flex-direction: column;
	position: relative;
	top: 50px;
}
#list-tools {
	display: flex;
	flex-direction: column;
	padding: 20px;
	gap: 15px;
}
#list-tools .list-tools-app,  #list-tools .list-tools-appFocus {
	cursor: pointer;
	display: flex;
	gap: 15px;
	padding: 8px 10px;
	border-radius: 5px;
	transition: .3s;
}
#list-tools .list-tools-app img, #list-tools .list-tools-appFocus img {
	width: 100px;
	height: 100px;
	border-radius: 20%;
}
#list-tools .list-tools-app .list-tools-app-about-container, #list-tools .list-tools-appFocus .list-tools-app-about-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 5px 0 0 0;
	width: 100%;
}
#list-tools .list-tools-app .list-tools-app-about-header, #list-tools .list-tools-appFocus .list-tools-app-about-header {
	display: flex;
	position: relative;
}
.btn-favorite-add {
	cursor: pointer;
	position: absolute;
	border-radius: 50%;
	padding: 3px;
	right: 0;
	bottom: -7px;
}
#list-tools .list-tools-app .list-tools-app-about-header .btn-favorites, #list-tools .list-tools-appFocus .list-tools-app-about-header .btn-favorites {
	cursor: pointer;
	position: absolute;
	border-radius: 50%;
	padding: 3px;
	right: 0;
	bottom: -7px;
}
#list-tools .list-tools-app .list-tools-app-about-container .list-tools-app-name, #list-tools .list-tools-appFocus .list-tools-app-about-container .list-tools-app-name {
	font-family: "Arson Pro Bold";
}

/* Settings */
#main-settings {
	display: flex;
	max-width: 100vw;
	height: calc(100vh - 50px);
}
#settings-menu {
	width: 29vw;
	display: flex;
	flex-direction: column;
}
#settings-menu div {
	display: flex;
	gap: 15px;
	cursor: pointer;
	padding: 20px 25px;
}
#settings-menu div .material-icons {
	font-size: 26px;
}
#settings-menu div p {
	position: relative;
	top: 6px;
}

#settings-menu-content {
	width: 71vw;
}
.settings-subtitle {
	font-size: 26px;
	font-weight: 600;
	padding: 0 0 12px 0;
}
#settings-my-account, #settings-backup, #settings-appearance, #settings-language, #settings-about-cet {
	padding: 15px 20px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}
#settings-username-input {
	display: flex;
	gap: 8px;
}
#settings-username-input input {
	position: relative;
	bottom: 5px;
	outline: none;
	padding: 5px;
	border-radius: 5px;
}
.settings-straight {
	height: 1px;
}
#settings-profile-color-palette {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#settings-profile-color {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
}
#settings-profile-color .material-icons {
	font-size: 54px;
	cursor: pointer;
}
#settings-profile-img-selection {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#settings-profile-img {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
}
#settings-profile-img span {
	cursor: pointer;
	border-radius: 50%;
	padding: 20px;
}
#settings-profile-img img {
	cursor: pointer;
	height: 60px;
	width: 60px;
	border-radius: 50%;
}
#theme-container {
	display: flex;
	gap: 10px;
}
#theme-container input {
	opacity: 0;
}
#theme-container label:not(.active-theme-label) {
	position: relative;
	bottom: 6px;
	cursor: pointer;
	border-radius: 10px;
	padding: 8px 15px;
}
#theme-container label:hover, .active-theme-label {
	position: relative;
	bottom: 6px;
	cursor: pointer;
	border-radius: 10px;
	padding: 8px 15px;
}

#language-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
#language-list div {
	display: flex;
	cursor: pointer;
	gap: 8px;
	padding: 10px 20px;
}
#language-list div span {
	position: relative;
	bottom: 1px;
}
#about-cet-container {
	display: flex;
	gap: 15px;
}
#about-cet-container img {
	width: 200px;
	height: 200px;
	border-radius: 20px;
}
#about-cet-paragraph {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#about-cet-paragraph p:first-child {
	font-family: "Arson Pro Bold";
	font-size: 30px;
	font-weight: 600;
}
#contact-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#contact-options p:first-child {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
}
#contact-options a {
	position: relative;
	display: flex;
	padding: 10px 15px;
	gap: 5px;
	border-radius: 6px;
}
#contact-options a p {
	position: relative;
	top: 4.5px;
}
.cef-copyright {
	position: absolute;
	bottom: 30px;
	width: auto;
	height: auto;
}
.cef-copyright p {
	position: absolute;
	left: 0;
	font-size: 14px;
	white-space: nowrap;
}

/* RPS */
#main-rps {
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	gap: 30px;
	justify-content: center;
	align-items: center;
}
#container-cast-lots-result {
	height: 150px;
	width: 150px;
	margin-top: -60px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#cast-lots-result {
	margin-top: -10px;
	font-size: 100px;
	font-weight: 400;
}
#btn-cast-lots {
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	cursor: pointer;
	border: 0;
	border-radius: 3px;
	width: 150px;
	height: 35px;
	font-size: 14px;
	font-weight: 600;
}

}