@media only screen and (max-width: 768px) {

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

* {
	-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%;
	overflow: auto;
}
#header-index, #header-settings, #header-favorites, #header-app {
	display: flex;
	position: fixed;
	z-index: 1;
	width: 100%;
	top: 0;
	gap: 20px;
	height: 50px;
}

#search-box-index {
	outline: none;
	position: relative;
	padding: 5px 8px;
	top: 11px;
	border: 0;
	border-radius: 20px;
	height: 30px;
}
[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;
	top: 0px;
	border: 0;
	border-radius: 20px;
	height: 30px;
}
#btn-account-menu-index {
	position: absolute;
	right: 13px;
	top: 8px;
}
#btn-account-menu-input-index {
	position: absolute;
	right: 10px;
	top: 8px;
	height: 35px;
	width: 35px;
	opacity: 0;
	z-index: 1;
}
#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-icon {
	font-size: 50px;
}
#btn-account-menu-index-img {
	display: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

#account-menu-index-container {
	display: none;
	position: absolute;
	top: 0;
	height: 100vh;
	width: 100vw;
	z-index: 1;
}
#account-menu-index {
	position: relative;
	height: 100%;
	width: 100vw;
	display: flex;
	flex-direction: column;
	z-index: 2;
}
.account-menu-arrow-back {
	display: flex;
	position: fixed;
	width: 100%;
	height: 55px;
	justify-content: center;
	align-items: center;
	bottom: 0;
}
#btn-account-menu-index-arrow-back {
	position: relative;
	font-size: 36px;
}
#account-menu-header-index {
	display: flex;
	padding: 12px 16px;
	gap: 10px;
}
#account-menu-header-index p {
	position: relative;
	top: 15px;
	font-size: 22px;
	font-weight: 600;
}
#account-menu-main-index {
	display: flex;
	flex-direction: column;
}
#account-menu-main-index .material-icons {
	position: relative;
	font-size: 30px;
	top: 0px;
	left: -5px;
}
#account-menu-main-index div {
	padding: 12px 26px;
	display: flex;
	gap: 8px;
}
#account-menu-main-index p {
	display: inline-block;
	position: relative;
	font-size: 20px;
	top: 6px;
}
/* */

#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;
}

#main-index, #main-favorites {
	display: flex;
	flex-direction: column;
	position: relative;
	top: 45px;
}
#list-tools {
	display: flex;
	flex-direction: column;
	padding: 20px;
	gap: 15px;
}
#list-tools .list-tools-app,  #list-tools .list-tools-appFocus {
	display: flex;
	flex-direction: column;
	border-radius: 5px;
	transition: .3s;
}
#list-tools .list-tools-app .list-tools-app-inner,  #list-tools .list-tools-appFocus .list-tools-app-inner {
	display: flex;
	padding: 8px 10px;
	gap: 15px;
}
#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;
}
#list-tools .list-tools-app .list-tools-app-about-header, #list-tools .list-tools-appFocus .list-tools-app-about-header {
	display: flex;
	position: relative;
}
#list-tools .list-tools-app .list-tools-app-about, #list-tools .list-tools-appFocus .list-tools-app-about {
	height: 50px;
	overflow: auto;
}
.btn-favorite-add {
	position: absolute;
	border-radius: 50%;
	padding: 3px;
	right: 5px;
	bottom: 4px;
}
#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";
}
#list-tools .list-tools-app .list-tools-app-footer, #list-tools .list-tools-appFocus .list-tools-app-footer {
	display: flex;
	position: relative;
	height: 40px;
}
#list-tools .list-tools-app .list-tools-app-footer .btn-favorites, #list-tools .list-tools-appFocus .list-tools-app-footer .btn-favorites {
	position: absolute;
	border-radius: 50%;
	padding: 3px;
	right: 5px;
	bottom: 4px;
}

/* Settings */
#header-settings {
	position: fixed;
	width: 100vw;
	z-index: 1;
	top: 0;
}
#main-settings {
	display: flex;
	flex-direction: column;
}
#settings-menu {
	display: flex;
	position: fixed;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	top: 50px;
	z-index: 2;
}
#settings-menu::-webkit-scrollbar {
	display: none;
}
#settings-menu div {
	display: flex;
	white-space: nowrap;
	gap: 5px;
	padding: 5px 10px;
}
#settings-menu div .material-icons {
	font-size: 26px;
}
#settings-menu div p {
	position: relative;
	top: 6px;
}

#settings-menu-content {
    height: calc(100vh - 85px);
    top: 85px;
    position: relative;
}
.settings-subtitle {
	font-size: 26px;
	font-weight: 600;
	padding: 0 0 0 0;
}
#settings-my-account, #settings-backup, #settings-appearance, #settings-language, #settings-about-cet {
	position: relative;
	padding: 15px 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
#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;
}
#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 {
	border-radius: 50%;
	padding: 17px;
}
#settings-profile-img img {
	height: 60px;
	width: 60px;
	border-radius: 50%;
}
#theme-container {
	display: flex;
	flex-direction: column;
	gap: 0px;
}
#theme-container input {
	opacity: 0;
}
#theme-container label:not(.active-theme-label) {
	position: relative;
	border-radius: 10px;
	padding: 8px 15px;
}
#theme-container label:hover, .active-theme-label {
	position: relative;
	border-radius: 10px;
	padding: 8px 15px;
}

#settings-language {
	gap: 15px;
}
#language-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
#language-list div {
	display: flex;
	gap: 8px;
	padding: 10px 20px;
}
#language-list div span {
	position: relative;
	bottom: 1px;
}
#about-cet-container {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
#about-cet-container img {
	margin: auto;
	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";
	text-align: center;
	font-size: 30px;
	font-weight: 600;
}
#contact-options {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
#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: 8px 15px;
	gap: 5px;
	border-radius: 6px;
}
#contact-options a p {
	position: relative;
	top: 4.5px;
}
.cef-copyright {
	position: relative;
	margin: auto;
	text-align: center;
}
.cef-copyright p {
	font-size: 14px;
}

/* RPS */
#html-rps, #body-rps {
	height: 100%;
	width: 100%;
	overflow: hidden;
}
#main-rps {
	width: 100%;
	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: -20px;
	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;
	border: 0;
	border-radius: 3px;
	width: 150px;
	height: 35px;
	font-size: 14px;
	font-weight: 600;
}

}