comandos.css

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");

* {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	background: #4c5058;
}

body {
	font-family: "Roboto", sans-serif;
	background: linear-gradient(#36393f, #4c5058);
	background-repeat: no-repeat;
	background-size: cover;
	color: white;
	font-size: 16px;
}

header {
	width: 100%;
	height: 30px;
}

main {
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

footer {
	width: 100%;
	height: 100px;
}

a {
	color: #64b3e3;
}

li {
	list-style: none;
}

mention {
	background-color: #414675;
	border-radius: 2px;
	padding: 0 5px;

	cursor: pointer;

	transition: background-color 100ms ease;
}

mention:hover {
	background-color: #5865f2;
}

code {
	background-color: #18181b;
	border-radius: 5px;
	padding: 0 5px;
}

secret {
	background-color: #18181b;
	color: #18181b;

	border-radius: 5px;
	padding: 0 5px;

	transition: color 100ms ease, background-color 100ms ease;
}

secret:hover {
	color: white;
	background-color: #4a4d53;
}

.descricao-geral {
	background-color: #2a2c30;
	box-shadow: 5px 5px 5px #0002;
	border-radius: 5px;

	margin-bottom: 20px;
	padding: 20px 30px;

	font-size: 1.2em;
}

.descricao-geral h2 {
	margin-bottom: 1em;
}

.busca {
	overflow: hidden;

	width: calc(100% - 60px);

	background-color: #202024;
	box-shadow: 5px 5px 5px #0002;

	border-radius: 5px;

	padding: 0 30px;
	
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

#imgBusca {
	height: 30px;
	transform: rotateY(180deg);
}

#inputBusca {
	width: calc(100% - 100px);
	height: 3em;

	font-size: 1.1em;

	margin: 0 20px;

	background: none;
	color: white;

	border: none;
	outline: none;
}

#resetBusca {
	height: 30px;
	margin-left: auto;

	transition: transform 500ms ease;

	cursor: pointer;
}

.resetHidden {
	transform: translateX(80px) !important;
}

.resetAnimation {
	animation: rotateBusca 500ms ease, hideBusca 500ms ease forwards;
	animation-delay: 0s, 500ms;
}

.legenda {
	height: max-content;
	background-color: #202024;
	box-shadow: 5px 5px 5px #0002;

	z-index: 10;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;

	padding: 10px 30px;
	margin-bottom: 20px;
	border-radius: 5px;

	position: sticky;
	top: 0;

	user-select: none;
}

.legenda li:first-child {
	width: 100%;
	flex-grow: unset;

	background: none;
	border-radius: 0;

	font-size: 1.5em;
	font-weight: bold;
}

.legenda li {
	min-width: max-content;
	flex-grow: 1;

	text-align: center;

	background-color: #2a2c30;

	border-radius: 5px;

	margin: 10px 10px;
	padding: 5px 10px;
}

.filtros {
	height: max-content;
	background-color: #202024;
	box-shadow: 5px 5px 5px #0002;

	display: flex;
	flex-wrap: wrap;
	align-items: center;

	padding: 20px 30px;
	margin-bottom: 20px;
	border-radius: 5px;

	user-select: none;
}

.filtros li {
	min-width: 200px;
	flex-grow: 1;

	text-align: center;

	background-color: #2a2c30;

	border-radius: 5px;

	margin: 10px 10px;
	padding: 5px 0;

	cursor: pointer;

	transition: background-color 300ms ease;
}

.filtros li:hover {
	background-color: #83b7d88c;
}

.filtros li:first-child {
	width: 100%;
	flex-grow: unset;

	background: none;
	border-radius: 0;

	font-size: 1.5em;
	font-weight: bold;

	cursor: auto;
}
.lista li {
	height: fit-content;

	overflow: auto;

	background-color: #2a2c30;
	border-radius: 10px;
	box-shadow: 5px 5px 5px #0002;

	margin: 20px 0;
	padding: 1em 30px;
}

.lista li:hover {
	max-height: 500px;
}

.lista li:hover .icon {
	transform: rotate(90deg);
}

.lista li .desc {
	height: fit-content;
	max-height: 0;
	overflow: hidden;

	transition: max-height 300ms ease, margin 300ms ease;
}

.lista li:hover .desc {
	margin: 10px 0;

	max-height: 300px;
	overflow: auto;
}

.title {
	display: flex;
	align-items: center;
}

.title h3 {
	margin-left: 1em;
	font-size: 1.5em;
}

.title .perms {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
}

.title .perms h5 {
	text-align: center;
	font-weight: 900;

	flex-grow: 1;
	margin: 5px;
	padding: 10px 10px;

	border-radius: 5px;

	cursor: pointer;

	position: relative;
}

.adm {
	background-color: #d1230c !important;
}

.mod {
	background-color: #ff7600 !important;
	color: #18181b;
}

.sup {
	background-color: #ffc77f !important;
	color: #18181b;
}

.ver {
	background-color: #2ecc71 !important;
	color: #18181b;
}

.nov {
	background-color: #4f6570 !important;
}

.all {
	background-color: #64b3e3 !important;
	color: #18181b;
}

.ocult {
	background-color: #18181b;
}

.desc h4 {
	font-weight: 400;
}

.desc .sessao {
	margin-top: 1em;
}

.params {
	margin-left: 0.5em;
	opacity: 0.5;
	font-weight: 300;
}

/* * OPCOES */

.active-bg {
	background-color: #64b3e3 !important;
	font-weight: bold;
	color: #000;
}

.comando-ativo {
	border-left: solid 10px #64b3e3;

	z-index: 5;
	position: sticky;
	top: var(--custom-top);

	box-shadow: 0 0 20px #000a !important;
}

.comando-ativo .desc {
	max-height: 300px !important;

	overflow: auto !important;

	margin: 10px 0 !important;
}

.icon {
	height: 1em;
	transition: transform 300ms ease-out;
}

.invert {
	filter: invert(1);
}

.sumir {
	max-width: 0;
	display: none;
}

@keyframes rotateBusca {
	to {
		transform: rotate(360deg);
	}
}

@keyframes hideBusca {
	to {
		transform: translateX(80px);
	}
}

/* * Scroll Bar */
/* width */
::-webkit-scrollbar {
	width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
	background-color: #2a2c30;
	/* box-shadow: inset 0 0 5px grey;
	border-radius: 10px; */
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #3f3f3f;
}

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

::selection {
	color: white;
	background: #64b3e3;
}

@media (max-width: 920px) {
	body {
		font-size: 17px;
	}
}