:root {
  --background-primary: #ecf0f1;
  --background-secondary: #e5e5e5;
  --background-footer: #636789;
  --color-one: #ffffff;
  --color-two: #636363;
  --color-hover-one: #1766ff;
  --color-hover-two: #636789;
  --color-hover-three: #a6b6cc;
  --color-font-primary: #3f4359;
  --color-font-secondary: #636789;
  --color-font-one: #767676;
  --color-font-two: #27ae60;
  --line-divisor-primary: #636789;
  --line-divisor-secondary: #e5e5e5;
  --color-selections: #4d4d57;
  --color-selections-two: #c3c1d1;
}

/* Configurações da Pagina */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body::-webkit-scrollbar {
  width: 7px;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background-color: var(--color-font-primary);
  border-radius: 5px;
}

body {
  scrollbar-width: thin;
  scrollbar-color: var(--color-font-primary) transparent;
}

body {
  background: var(--background-primary);
  color: var(--color-font-one);
  font: 400 15px "Rubik", Sans-serif;
}

footer,
header {
  user-select: none;
}

button {
  cursor: pointer;
}

::selection {
  color: var(--color-selections-two);
  background-color: var(--color-hover-two);
}

/* Header - Stalys */

.header-onlys {
  padding: 12px 12rem;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-onlys img {
  width: 5rem;
}

.btn-home {
  background-color: var(--color-font-secondary);
  font: 500 15px "Rubik", sans-serif;
  color: var(--line-divisor-secondary);
  padding: 13px 20px;
  border: none;
  border-radius: 5px;
}

.btn-home:hover {
  background-color: var(--color-font-primary);
  transition: 0.5s;
}

.divisor-header {
  background-color: var(--line-divisor-primary);
  height: 0.1rem;
}

@media screen and (max-width: 425px) {
  .header-onlys {
    padding: 12px 32px;
  }

  .header-onlys img {
    width: 3.6rem;
  }
}

/* Main - Stalys*/

.main {
  margin: 150px 50px;
}

/* Footer - Stalys */

.footer {
    background: var(--background-footer);
}

.footer-onlys {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-onlys copyright {
    font: 600 15px 'Rubik', sans-serif;
    color: var(--color-hover-three);
}

@media screen and (max-width: 608px) {
    .footer-onlys copyright {
        font-size: 12px;
        font-weight: 500;
    }
}