/* TOC */

/* 1. GENERAL STYLES */
/* 2. UTILITY CLASSES */
/* 3. NAVBARS */
/* 4. CREDIT */


/* ~~ 1. GENERAL STYLES */

:root {
  font-size: 16px;
  --light: #ddd;
  --dark: #222;
  --cor1: rgb(141, 103, 117);
  --cor2: rgb(100, 136, 136);
  --cor3: rgb(115, 136, 96);
  --cor4: hsl(220, 15%, 25%);
  --cor5: hsl(32, 66%, 44%);
}

body {
  background-color: var(--light);
  color: var(--dark);
  font-weight: 100;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 500;
}

p {
  font-family: 'Taviraj', serif;
}

a {
  color: var(--cor2);
  cursor: pointer;
  position: relative;
}

a:visited {
  color: var(--cor2);
}

/* */

/* ~~ 2. UTILITY CLASSES */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.light {
  color: var(--light);
}

.bg-light {
  background-color: var(--light);
}

.dark {
  color: var(--dark);
}
.bg-dark {
  background-color: var(--dark);
}

.color1 {
  color: var(--cor1);
}

.bg-color1 {
  background-color: var(--cor1);
}

.color2 {
  color: var(--cor2);
}

.bg-color2 {
  background-color: var(--cor2);
}

.color3 {
  color: var(--cor3);
}

.bg-color3 {
  background-color: var(--cor3);
}

.color4 {
  color: var(--cor4);
}

.bg-color4 {
  background-color: var(--cor4);
}

.hidden {
  opacity: 0;
  z-index: -1;
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-justify-c {
  justify-content: center;
}

.flex-align-c {
  align-items: center;
}

.text-small {
  font-size: .9rem;
}

/*  */

/* ~~ 4. CREDIT */

.credit {
  margin: .5rem 0;
  font: .75rem "Libre Franklin", sans-serif;
  font-weight: 100;
  text-decoration: none;
}

.credit:visited {
  color: var(--light);
}

.credit:hover {
  text-decoration: underline;
}

/*  */