:root {
    --s: 100px; /* control the size */
    --_g: #0000 90deg,rgb(238, 238, 238) 0;
    --typewriterSpeed: 1.25s;
    --typewriterCharacters: 9;
}


@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #181815;
        --name-color: rgb(240, 240, 240);
        --cursorColor: rgb(220, 220, 200);
        --sectionColor: rgb(165, 230, 235);
        --textColor: rgb(240, 240, 240);
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-color: rgb(235, 235, 235);
        --name-color: rgb(78, 82, 82);
        --cursorColor: rgb(0, 0, 0);
        --sectionColor: rgb(29, 56, 58);
        --textColor: rgb(69, 70, 69);
    }
}

body {
    margin: 0;
    font-family: "Source Sans Pro", sans-serif;
    overflow-x: hidden;
    background: var(--bg-color);
    color: var(--textColor);
}


.cabecalho{
    font-family: 'Abril Fatface', serif;
    vertical-align: middle;
}

ul {
    padding: 0px;
    list-style-type: none;
    text-indent: 0px;
}

a:visited{
    color:inherit;
}

main{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flex{
    display: flex;
    gap: var(--gap, 1rem);
    justify-content: center;
}

.primary-header{
    justify-content: space-between;
}

.primary-navigation{
    list-style: none;
    padding: 0;
    margin: 0;
}

.titulo_secao{
    color: var(--textColor);
    text-align: center;
    padding-top: 30px;
}

a {
    text-decoration: none;
    color: var(--textColor);
}

li a img{
    height: 25px;
}


#nome{
    margin: auto;
    left: 0;
    font-size: 30pt;
    color: var(--name-color);
    /* font-family: 'Abril Fatface', serif; */
    text-align: center;
}

.img_social_network{
    filter: invert(25%) saturate(0%) opacity(30%);
}

.img_social_network:hover{
    filter: invert(0%) saturate(100%) opacity(100%);
}

.blog_link:hover .blog_icon{
    /* -webkit-filter: saturate(100%) opacity(100%); */
    filter: saturate(100%) opacity(100%);
}

.blog_link .blog_icon{
    filter: saturate(0%) opacity(50%);
}

.blog_link{
    text-align: center;
}

h1 {
    font-size: 30pt;
    position: relative;
    font-family: "Source Code Pro", monospace;
    width: max-content;
    text-align: center;
}

h1::before,
h1::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

h1::before {
    background: var(--bg-color);
    animation: typewriter var(--typewriterSpeed)
        steps(var(--typewriterCharacters)) 0.25s forwards;
  }

h1::after {
    width: 0.350em;
    height: 80%;
    background: var(--cursorColor);
    animation:
        typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 0.25s forwards,
        blink 750ms steps(var(--typewriterCharacters)) infinite,
        fadeOut 1s ease 3.75s forwards
}

#social {
    color: hsl(0 0% 0% / 0.7);
    opacity: 0;
    transform: translateY(1rem);
    animation: fadeInUp 1s ease calc(var(--typewriterSpeed) + 0.5s) forwards;
  }

#corpo{
    font-family: "Anek Devanagari", "sans-serif";
    opacity: 0;;
    animation: fadeIn 1s ease calc(var(--typewriterSpeed) + 0.5s) forwards;
}

#links_acesso_rapido{
    text-align: center;
}

#links_acesso_rapido a:hover{
    background-color: rgba(--bg-color, 0.5);
    text-decoration: underline;
}

h2{
    color: var(--textColor);
    margin-bottom: 15px;
    font-family: "Anek Devanagari", "sans-serif";
}

@keyframes typewriter {
    to {
      left: 100%;
    }
}

@keyframes blink {
    to {
      background: transparent;
    }
}

@keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
}

@keyframes fadeIn{
    to{
        opacity: 1;
    }
}

@keyframes fadeOut{
    to{
        opacity: 0;
    }
}