:root {
  --verde-musgo: #5a7256;
  --lilas-suave: #c5b8e3;
  --off-white: #fdfcf7;
  --texto: #2e2e2e;
  --hover: #8e80c5;
  --fonte-principal: 'chunko';
  --fonte-secundaria: 'gotham';
}

@font-face {
  font-family: 'chunko';
  src: url(fonts/Chunko-Bold-Demo-BF67b2ec86adebe.otf);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'gotham';
  src: url('fonts/gotham/Gotham-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'gotham';
  src: url('fonts/gotham/Gotham-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'gotham';
  src: url('fonts/gotham/Gotham-Ultra.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}


* {
    image-rendering: pixelated;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overscroll-behavior: none;
}

body {
    font-family: var(--fonte-secundaria), sans-serif;
    color: var(--verde-musgo);
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
}

main {
    flex: 1.5;
    padding: 10px 3vw;
    min-width: 300px;
    height: 100vh;
    overflow-Y: scroll;
}

.header {
  font-family: var(--fonte-principal);
  font-size: 2rem;
 padding: 10px;
 margin: 5px;
}

.imagem {
    background: url(discos3.jpg);
    background-position: center;
    background-size: 70%;
    flex: 1;
}

.texto {
  font-size: 1rem;
}

.a {
  color: var(--lilas-suave); /* cor inicial */
  text-decoration: none;     /* remove o sublinhado */
}

/* link padrão */
a:link {
  color: var(--lilas-suave);
  text-decoration: none;
}

/* link já visitado */
a:visited {
  color: var(--hover);
}

/* quando passa o mouse */
a:hover {
  color: var(--verde-musgo);
  text-decoration: underline;
}

/* enquanto está sendo clicado */
a:active {
  color: var(--texto);
}