:root {
    --light-text-color: #393C47;
    --light-background-color: #F3F3F3;
    --dark-text-color: #F3F3F3;
    --dark-background-color: #191B23;
    --duracao-transicao: 1s;

  @media (prefers-color-scheme: dark) {
    --text-color: var(--dark-text-color);
    --background-color: var(--dark-background-color);
  }
}
html{
  font-size: calc(5px + 1vw);
  font-family: "Basic", sans-serif;
}
body{
  color: var(--text-color);
  background-color: var(--background-color);
  transition: 
    background-color var(--duracao-transicao),
    color var(--duracao-transicao);
}
header .row{
  padding-top: 1rem;
  align-items: center;
}
#logo {
  transition: opacity var(--duracao-transicao) ease-in-out;
}
.btn-mode{
  border: none;
  opacity: 60%;
  color: var(--text-color);
  background: transparent;
  transition: 
    opacity var(--duracao-transicao),
    color var(--duracao-transicao);
}
.btn-mode:hover{
  opacity: 100%;
}
section{
  padding-top: 1rem;
  padding-bottom: 2rem;
}
p, span, a{
  font-weight: 10;
  font-size: 1.4rem;
}
h1{
  font-size: 15rem;
  line-height: 5rem;
  text-align: center;
  position: relative;
  text-transform: uppercase;
  text-shadow:
    -1px -1px 0 var(--text-color),  
    1px -1px 0 var(--text-color),
    -1px  1px 0 var(--text-color),
    1px  1px 0 var(--text-color);
  transition: text-shadow var(--duracao-transicao);
}
h1 code{
  font-size: 10rem;
  font-weight: 900;
  letter-spacing: -0.25rem;
  word-spacing: -1.5rem;
  font-family: "Bakbak One", sans-serif;
}
@media screen and (max-width: 768px) {
  h1 code{
    font-size: 9rem;
    line-height: 1.5rem;
  }
  .solid{
    top: -2rem;
  }
}
#title{
  display: flex;
  min-height: 550px;
  align-items: center;
}
.crossed{
  color: var(--background-color);
  transition: color var(--duracao-transicao);
}
.solid{
  top: -1rem;
  line-height: 1rem;
  position: relative;
  color: var(--text-color);
  transition: color var(--duracao-transicao);
}
.solid span{
  top: -2.5rem;
  right: -1rem;
  font-size: 5rem;
  text-shadow: none;
  position: relative;
  word-spacing: normal;
  color: var(--text-color);
  transition: color var(--duracao-transicao);
}
.toggleLanguage{
  display: flex;
  padding-bottom: 1rem;
  justify-content: flex-end;
}
#language{
  font-size: 14px;
  font-weight: 200;
  border-width: 0.25px;
  background: #f3f3f308;
  color: var(--text-color);
  border-color: var(--text-color);
}
footer{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.block{
  width: 100%;
  opacity: 20%;
  height: 60px;
  margin-bottom: 1rem;
  background-color: #D9D9D9;
}
.label{
  font-size: 1.2rem;
}
.sub-label{
  opacity: 25%;
  font-size: 0.8rem;
  margin-top: -1rem;
  text-transform: uppercase;
}
.social-item{
  width: 28px;
  height: 28px;
  opacity: 60%;
  display: flex;
  margin: 0 4px;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  background: var(--text-color);
  transition:
    opacity var(--duracao-transicao),
    background var(--duracao-transicao);
}
.social-item:hover{
  opacity: 100%;
  box-shadow: #393C47;
  background: var(--background-color);
}
.social-item svg{
  width: 20px;
  height: 20px;
  fill: var(--background-color);
  transition: var(--duracao-transicao);
}
.social-item:hover svg{
  fill: var(--text-color);
}
.tooltip {
  position: absolute;
  display: none;
  background-color: #333;
  color: white;
  padding: 8px;
  border-radius: 4px;
  z-index: 9999;
}