styles.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* respeita a borda das caixas, sem altera-las*/
}

:root {
  /* root é usado para determinar um tamanho padrão emt odo site para as fontes, assim não precisando alterar todos os tamanhos quando utilizamos @media, ao alterar o root, todas se alteram na mesma proporção */
  font-size: 16px;
}

::-webkit-scrollbar {
  /* WebKit é usado para personalizar componentes do navegador, neste caso a scrollbar */
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: #2c2c31;
}

::-webkit-scrollbar-thumb {
  background-color: #9e9ea0;
}

@keyframes entrada {
  /*Animações de entrada do site */
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  background-color: #121215;
  color: #eaeaea;
  font-family: "Roboto", sans-serif;
  display: grid;
  /* começando o grid para dividir a tela em profile e timeline */
  grid-template-areas: "profile timeline"; /* areas da tela */
  grid-template-columns: 1fr 1fr; /* colunas e medidas */
  grid-template-rows: 100vh; /* tamanho da linha */
  /* vh = altura, fr = fração da página */
}

nav {
  padding: 64px;
  grid-area: timeline;

  overflow-y: scroll; /*quando o conteúdo não caber na vertical, é habilitado o scroll */
  animation: entrada 0.7s ease-in-out;
}

.memory {
  display: flex; /* Alinha todos os elementos um do lado do outro (flexíveis)*/
  flex-direction: column; /* Alinha um em baixo do outro */
  gap: 16px; /* espaçamento entre os elementos (tags) */
  text-decoration: none; /*serve para remover o underline das frases*/
  margin-bottom: 64px; /* espaçamento entre as caixas*/
}

.memory small {
  color: #bebebf;
  font-size: 0.75rem;
}

.memory h1 {
  font-size: 2rem;
  color: #eaeaea;
}

.memory img {
  width: 100%;
  height: 280px;
  object-fit: cover; /* mantém a proporção de uma capa, não estica*/
  border-radius: 8px;
  transition: transform 0.3s ease-in-out;
}

.memory div {
  width: 100%;
  height: 280px;
  overflow: hidden;
  border-radius: 8px;
}

.memory:hover img {
  /* hover=quando passar o mouse em cima */
  transform: scale(1.1);
}

.memory p {
  font-size: 1.2rem;
  color: #bebebf;
  line-height: 28px; /* altura de uma linha para outra*/
}

/* O GRID LAYOUT POSSIBILITA DIVIDIR O NOSSO SITE EM LINHAS E COLUNAS (separar áreas) */

aside {
  grid-area: profile;
  display: flex;
  flex-direction: column;
  align-items: center; /* centro horizontal */
  justify-content: center; /* centro vertical */
  gap: 20px;

  border-right: 1px solid;
  border-image: linear-gradient(#727275, #2c2c31) 1;
  background-image: url(./assets/background.svg);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

aside * {
  /* Colocando as animações somente nos elementos do aside, sem contar background etc... */
  animation: entrada 0.7s ease-in-out;
}

aside img:nth-child(2) {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 4px solid transparent;
  background: linear-gradient(#d39e33, #ed5636, #633bbc) padding-box,
    linear-gradient(260deg, #d39e33, #ed5636, #633bbc) border-box;
}

aside p {
  font-size: 2rem;
  text-align: center;
}

aside span {
  font-size: 0.75rem;
  color: #9e9ea0;
}

@media (max-width: 768px) {
  /* media é utilizado pra quando o dispositivo for menor que 768px, o site obedecer essas instruções */
  :root {
    font-size: 14px;
  }
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 0.2fr 0.8fr;
    grid-template-areas:
      "profile"
      "timeline";
  }
  aside {
    border-right: none;
    padding: 32px 12px;
  }
  nav {
    overflow-y: visible;
    padding: 22px;
  }
}