@import url('https://tom.mlcdn.com.br/fonts/magalu-textos/css/swap/family.css');

*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}

html {
  font-size: 62.5%;
}

body,
html {
  height: 100vh;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  font-family: 'Magalu', 'MagaluTextos', sans-serif;
}

body {
  background: #fff;
}

::-webkit-scrollbar {
  width: 1rem;
}

::-webkit-scrollbar-track {
  -webkit-border-radius: 0.9rem;
  border-radius: 0.9rem;
  background: #cecfd1;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 0.9rem;
  border-radius: 0.9rem;
  background: #788089;
}

::-webkit-scrollbar-thumb:window-inactive {
  background: #788089;
}

body,
input,
label,
button {
  font-size: 1.6rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: bold;
}

button {
  cursor: pointer;
  font-weight: bold;
  border: none;
  background: transparent;
  transition: background-color 0.2s;
}

a {
  cursor: pointer;
}

main#wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 0px 0px;
  grid-template-areas:
    'header'
    'content';
  width: 100%;
  height: 100%;
}

div#header {
  grid-area: header;
  z-index: 1200;
}

div#content {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: 'sidebar routes';
  grid-area: content;
}

div#sidebar {
  grid-area: sidebar;
  z-index: 1200;
}

div#routes {
  overflow: auto;
  height: calc(100vh - 6.4rem);
  grid-area: routes;
  background: #fafafa;
}

div#not-found {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  gap: 9.6rem;
}

div#not-found .status-code {
  max-width: 500px;
}

div#not-found .status-code h3 {
  font-size: 3.6rem;
  font-weight: 700;
  color: #343b3f;
  opacity: 0.8;
}

div#not-found .status-code p {
  font-size: 2.4rem;
  font-weight: 400;
  color: #343b3f;
  opacity: 0.8;
  letter-spacing: -1px;
  line-height: 4rem;
  margin-top: 3.2rem;
}

div#not-found .status-code p a {
  font-weight: 700;
  color: #0086ff;
  text-decoration: none;
}

div#not-found .status-code a[role='button'] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 32px;
  background-color: #0086ff;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.4rem;
  text-align: center;
  letter-spacing: -0.5px;
  color: #ffffff;
  transition: background-color 0.2s;
  width: 100%;
  margin-top: 3.2rem;
  text-decoration: none;
}

div#not-found a[role='button']:hover {
  background-color: #2396fe;
}