@font-face {
    font-family: 'Spartan';
    src: url(fonts/LeagueSpartan-Bold.otf);
}
@media (max-width: 450px) {
    body {
        background-color: #090a0f;
    }
    .navbar {
        justify-content: center;
        width: 100%;
        background-color: #1F2233;
    }
    .nav-link {
        color: rgb(255, 255, 255);
        font-family: 'Spartan';
        width: 25%;
        font-size: 12px;
    }
    #nav-inicio-tab{
        width: 20%;
    }
    #nav-habilidades-tab{
        width: 30%;
    }
    #nav-projetos-tab{
        width: 25%;
    }
    #nav-contatos-tab{
        width: 25%;
    }
    .nav-link:hover {
        color: #090a0f;
    }
    .container {
        padding-top: 20px;
        display: block;
        width: 90%;
        background-color: #1F2233;
        border-radius: 10px;
        box-shadow: 2px 5px 5px black;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .stacks {
        display: flexbox;
        width: 100%;
        margin-top: 40px;
        padding-top: 20px;
        border-radius: 10px;
        background-color: #090a0f;
        box-shadow: 2px 5px 5px black;
    }
    .div-h1-stack {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    .h1-stacks {
        text-align: center;
        font-family: 'Spartan';
        color: #ffffff;
        font-size: 20px;
    }
    .stacks-icons {
        width: 100%;
        justify-content: center;
        display: flex;
        padding: 15px;
    }
    .stc-rjs {
        width: 90%;
        margin-top: 8px;
    }
    .stc-php {
        margin-top: 8px;
        width: 100%;
    }
    .stc-js {
        margin-top: 2px;
        width: 98%;
    }
    .stc-python {
        width: 80%;
        margin-top: 6px;
    }
    .stc-vsc {
        width: 85%;
        margin-top: 6px;
    }
    .inicio {
        padding-top: 20px;
        padding-bottom: 20px;
        display: block;
        width: 90%;
        background-color: #1F2233;
        border-radius: 10px;
        box-shadow: 2px 5px 5px black;
        margin-top: 20px;
    }
    .foto-perfil {
        display: flex;
        width: 80%;
        border-radius: 50%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        box-shadow: 2px 5px 10px #090a0f;
    }
    .font-ini {
        width: 100%;
        margin-top: 50px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .font-ini1 {
        font-family: 'Spartan';
        font-size: 13px;
        color: #ffffff;
        text-shadow: 2px 2px 2px black;
    }
    .font-ini2 {
        font-family: 'Spartan';
        font-size: 37px;
        color: #ffffff;
        text-shadow: 2px 2px 2px black;
    }
    .font-ini3 {
        font-family: 'Spartan';
        font-size: 15px;
        color: #ffffff;
        text-shadow: 2px 2px 2px black;
    }
    .font-ini4 {
        font-family: 'Spartan';
        font-size: 30px;
        color: #ffffff;
        text-shadow: 2px 2px 2px black;
    }
    .div-princ-redes {
        padding-bottom: 20px;
        background-color: white;
        padding-left: 20px;
    }
    .div-redes {
        display: block;
        margin-top: 10px;
    }
    .redes {
        margin-bottom: 20px;
    }
    .redes1 {
        font-family: 'Spartan';
        color: #090a0f;
        margin-top: 15px;
        font-size: 40px;
    }
    .redes-contatos {
        font-family: 'Spartan';
        color: #090a0f;
        margin-top: 15px;
        font-size: 15px;
    }
    .logos-contatos {
        width: 10%;
    }
    .links {
        text-decoration: none;
    }
    .div-habilidades {
        padding-top: 10px;
        display: block;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .hard-skills {
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 220px;
    }
    .h1-hskills {
        font-family: 'Spartan';
        color: #ffffff;
        padding-top: 5px;
        font-size: 25px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .section-hardskills {
        background-color: #090a0f;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 30px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 30px;
        border-radius: 10px;
        display: block;
    }
    .barra-progresso {
        padding: 5px;
    }
    .progress {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        border-radius: 100px;
        overflow: visible;
        background-color: #1F2233;
    }
    .progress-bar{
        border-radius: 100px;
    }
    .h1-progresso {
        font-family: 'Spartan';
        color: #ffffff;
        font-size: 20px;
        margin-left: auto;
        margin-right: auto;
    }
    .porcentagem {
        position: absolute;
        background-color: #090a0f;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        opacity: 95%;
        margin-left: -8%;
    }
    .h1-barra {
        display: flex;
        margin-top: 14px;
        margin-left: 7px;
        font-size: 11px;
        font-family: 'Spartan';
    }
    .cor-python {
        background-color: rgb(51, 255, 0) !important;
    }
    .cor-html {
        background-color: rgb(255, 136, 0) !important;
    }
    .cor-js {
        background-color: rgb(147, 154, 20) !important;
    }
    .cor-css {
        background-color: rgb(5, 83, 4) !important;
    }
    .cor-bootstrap {
        background-color: rgb(76, 0, 255) !important;
    }
    .cor-docker {
        background-color: rgb(44, 0, 89) !important;
    }
    .cor-linux {
        background-color: rgb(255, 7, 156) !important;
    }
    .cor-php {
        background-color: rgb(255, 6, 6) !important;
    }
    .cor-sql {
        background-color: rgb(0, 255, 157) !important;
    }
    .section-softskills {
        background-color: #090a0f;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        padding-top: 30px;
        border-radius: 10px;
    }
    .soft-skills {
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 220px;
    }
    .h1-sskills {
        font-family: 'Spartan';
        color: #ffffff;
        padding-top: 5px;
        font-size: 25x;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .div-softskills {
        display: flex;
    }
    .ponto {
        margin-top: 6px;
        margin-right: 4px;
        height: 5px;
        width: 5px;
        background-color: #ffffff;
        border-radius: 50px;
    }
    .h1-soft {
        font-family: 'Spartan';
        font-size: 18px;
        color: #ffffff;
        letter-spacing: 2px;
    }
    .estudos {
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    .h1-estudos {
        font-family: 'Spartan';
        color: #ffffff;
        padding-top: 5px;
        font-size: 25px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .div-estudos {
        background-color: #090a0f;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        border-radius: 10px;
    }
    .div-estudos-icons {
        display: flex;
        padding: 10px;
        width: 100%;
        justify-content: center;
    }
    .icon-rjs {
        width: 95%;
    }
    .icon-sql {
        width: 80%;
    }
    .icon-ts {
        width: 100%;
    }
    .icon-php {
        width: 110%;
    }
    .div-projetos {
        padding-top: 30px;
        padding-bottom: 30px;
        display: block;
    }
    .div-card {
        width: 100%;
        display: block;
        justify-content: center;
        margin: auto;
    }
    .meus-projetos {
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }
    .h1-projetos {
        font-family: 'Spartan';
        color: #ffffff;
        padding-top: 5px;
        font-size: 30px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .card {
        width: 100%;
        background-color: #090a0f;
        color: white;
        box-shadow: 2px 5px 5px black;
        margin-top: 20px !important;
        margin: auto;
    }
    .d-block {
        border-radius: 5px;
    }
    .btn {
        background-color: white;
        color: black;
        width: 50%;
        margin-top: 20px;        margin-left: 25%;
        box-shadow: 2px 5px 5px black;
    }
    .btn:hover {
        background-color: #1F2233;
        color: white;
        box-shadow: 2px 5px 5px black;
        border-color: rgb(255, 255, 255);
    }
    .spinner-border {
        margin-top: 30px;
        width: 100px;
        height: 100px;
    }
}
@media (min-width: 451px) and (max-width: 767px) {
    body {
        background-color: #090a0f;
    }
    .navbar {
        justify-content: center;
        width: 100%;
        background-color: #1F2233;
    }
    .nav-link {
        color: rgb(255, 255, 255);
        font-family: 'Spartan';
        width: 25%;
        font-size: 12px;
    }
    #nav-inicio-tab{
        width: 20%;
    }
    #nav-habilidades-tab{
        width: 30%;
    }
    #nav-projetos-tab{
        width: 25%;
    }
    #nav-contatos-tab{
        width: 25%;
    }
    .nav-link:hover {
        color: #090a0f;
    }
    .container {
        padding-top: 20px;
        display: block;
        width: 90%;
        background-color: #1F2233;
        border-radius: 10px;
        box-shadow: 2px 5px 5px black;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .stacks {
        display: flexbox;
        width: 100%;
        margin-top: 40px;
        padding-top: 20px;
        border-radius: 10px;
        background-color: #090a0f;
        box-shadow: 2px 5px 5px black;
    }
    .div-h1-stack {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    .h1-stacks {
        text-align: center;
        font-family: 'Spartan';
        color: #ffffff;
        font-size: 20px;
    }
    .stacks-icons {
        width: 100%;
        justify-content: center;
        display: flex;
        padding: 15px;
    }
    .stc-rjs {
        width: 90%;
        margin-top: 8px;
    }
    .stc-php {
        margin-top: 8px;
        width: 100%;
    }
    .stc-js {
        margin-top: 2px;
        width: 98%;
    }
    .stc-python {
        width: 80%;
        margin-top: 6px;
    }
    .stc-vsc {
        width: 85%;
        margin-top: 6px;
    }
    .inicio {
        padding-top: 20px;
        padding-bottom: 20px;
        display: block;
        width: 90%;
        background-color: #1F2233;
        border-radius: 10px;
        box-shadow: 2px 5px 5px black;
        margin-top: 20px;
    }
    .foto-perfil {
        display: flex;
        width: 80%;
        border-radius: 50%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        box-shadow: 2px 5px 10px #090a0f;
    }
    .font-ini {
        width: 100%;
        margin-top: 50px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .font-ini1 {
        font-family: 'Spartan';
        font-size: 13px;
        color: #ffffff;
        text-shadow: 2px 2px 2px black;
    }
    .font-ini2 {
        font-family: 'Spartan';
        font-size: 37px;
        color: #ffffff;
        text-shadow: 2px 2px 2px black;
    }
    .font-ini3 {
        font-family: 'Spartan';
        font-size: 15px;
        color: #ffffff;
        text-shadow: 2px 2px 2px black;
    }
    .font-ini4 {
        font-family: 'Spartan';
        font-size: 30px;
        color: #ffffff;
        text-shadow: 2px 2px 2px black;
    }
    .div-princ-redes {
        padding-bottom: 20px;
        background-color: white;
        padding-left: 20px;
    }
    .div-redes {
        display: flex;
        margin-top: 10px;
    }
    .redes {
        margin-bottom: 20px;
    }
    .redes1 {
        font-family: 'Spartan';
        color: #090a0f;
        margin-top: 15px;
        font-size: 40px;
    }
    .redes-contatos {
        font-family: 'Spartan';
        color: #090a0f;
        margin-top: 18px;
        margin-left: 15px;
        font-size: 15px;
    }
    .logos-contatos {
        width: 50px;
    }
    .links {
        text-decoration: none;
    }
    .div-habilidades {
        padding-top: 10px;
        display: block;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .hard-skills {
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 220px;
    }
    .h1-hskills {
        font-family: 'Spartan';
        color: #ffffff;
        padding-top: 5px;
        font-size: 25px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .section-hardskills {
        background-color: #090a0f;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 30px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 30px;
        border-radius: 10px;
        display: block;
    }
    .barra-progresso {
        padding: 5px;
    }
    .progress {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        border-radius: 100px;
        overflow: visible;
        background-color: #1F2233;
    }
    .progress-bar{
        border-radius: 100px;
    }
    .h1-progresso {
        font-family: 'Spartan';
        color: #ffffff;
        font-size: 20px;
        margin-left: auto;
        margin-right: auto;
    }
    .porcentagem {
        position: absolute;
        background-color: #090a0f;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        opacity: 95%;
        margin-left: -4%;
    }
    .h1-barra {
        display: flex;
        margin-top: 13px;
        margin-left: 5px;
        font-size: 12px;
        font-family: 'Spartan';
    }
    .cor-python {
        background-color: rgb(51, 255, 0) !important;
    }
    .cor-html {
        background-color: rgb(255, 136, 0) !important;
    }
    .cor-js {
        background-color: rgb(147, 154, 20) !important;
    }
    .cor-css {
        background-color: rgb(5, 83, 4) !important;
    }
    .cor-bootstrap {
        background-color: rgb(76, 0, 255) !important;
    }
    .cor-docker {
        background-color: rgb(44, 0, 89) !important;
    }
    .cor-linux {
        background-color: rgb(255, 7, 156) !important;
    }
    .cor-php {
        background-color: rgb(255, 6, 6) !important;
    }
    .cor-sql {
        background-color: rgb(0, 255, 157) !important;
    }
    .section-softskills {
        background-color: #090a0f;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        padding-top: 30px;
        border-radius: 10px;
    }
    .soft-skills {
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 220px;
    }
    .h1-sskills {
        font-family: 'Spartan';
        color: #ffffff;
        padding-top: 5px;
        font-size: 25x;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .div-softskills {
        display: flex;
    }
    .ponto {
        margin-top: 6px;
        margin-right: 4px;
        height: 5px;
        width: 5px;
        background-color: #ffffff;
        border-radius: 50px;
    }
    .h1-soft {
        font-family: 'Spartan';
        font-size: 18px;
        color: #ffffff;
        letter-spacing: 2px;
    }
    .estudos {
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    .h1-estudos {
        font-family: 'Spartan';
        color: #ffffff;
        padding-top: 5px;
        font-size: 25px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .div-estudos {
        background-color: #090a0f;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        border-radius: 10px;
    }
    .div-estudos-icons {
        display: flex;
        padding: 10px;
        width: 100%;
        justify-content: center;
    }
    .icon-rjs {
        width: 95%;
    }
    .icon-sql {
        width: 80%;
    }
    .icon-ts {
        width: 100%;
    }
    .icon-php {
        width: 110%;
    }
    .div-projetos {
        padding-top: 30px;
        padding-bottom: 30px;
        display: block;
    }
    .div-card {
        width: 80%;
        display: block;
        justify-content: center;
        margin: auto;
    }
    .meus-projetos {
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 220px;
    }
    .h1-projetos {
        font-family: 'Spartan';
        color: #ffffff;
        padding-top: 5px;
        font-size: 30px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .card {
        background-color: #090a0f;
        color: white;
        box-shadow: 2px 5px 5px black;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }
    .d-block {
        border-radius: 5px;
    }
    .btn {
        background-color: white;
        color: black;
        width: 50%;
        margin-top: 20px;        margin-left: 25%;
        box-shadow: 2px 5px 5px black;
    }
    .btn:hover {
        background-color: #1F2233;
        color: white;
        box-shadow: 2px 5px 5px black;
        border-color: rgb(255, 255, 255);
    }
    .spinner-border {
        margin-top: 30px;
        width: 100px;
        height: 100px;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    body {
        background-color: #090a0f;
    }
    .navbar {
        justify-content: center;
        width: 100%;
        background-color: #1F2233;
    }
    .nav-link {
        color: rgb(255, 255, 255);
        font-family: 'Spartan';
        width: 25%;
        font-size: 12px;
    }
    #nav-inicio-tab{
        width: 20%;
    }
    #nav-habilidades-tab{
        width: 30%;
    }
    #nav-projetos-tab{
        width: 25%;
    }
    #nav-contatos-tab{
        width: 25%;
    }
    .nav-link:hover {
        color: #090a0f;
    }
    .container {
        padding-top: 20px;
        display: flex;
        width: 90%;
        background-color: #1F2233;
        border-radius: 10px;
        box-shadow: 2px 5px 5px black;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .stacks {
        display: flexbox;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        margin-top: 40px;
        padding-top: 20px;
        border-radius: 10px;
        background-color: #090a0f;
        box-shadow: 2px 5px 5px black;
    }
    .div-h1-stack {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    .h1-stacks {
        text-align: center;
        font-family: 'Spartan';
        color: #ffffff;
        font-size: 20px;
    }
    .stacks-icons {
        width: 100%;
        justify-content: center;
        display: flex;
        padding: 15px;
    }
    .stc-rjs {
        width: 90%;
        margin-top: 8px;
    }
    .stc-php {
        margin-top: 8px;
        width: 100%;
    }
    .stc-js {
        margin-top: 2px;
        width: 98%;
    }
    .stc-python {
        width: 80%;
        margin-top: 6px;
    }
    .stc-vsc {
        width: 85%;
        margin-top: 6px;
    }
    .inicio {
        padding-top: 20px;
        padding-bottom: 20px;
        display: block;
        width: 90%;
        background-color: #1F2233;
        border-radius: 10px;
        box-shadow: 2px 5px 5px black;
        margin-top: 20px;
    }
    .inicio-apresentação {
        display: flex;
    }
    .foto-perfil {
        display: flex;
        width: 80%;
        border-radius: 50%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        box-shadow: 2px 5px 10px #090a0f;
    }
    .font-ini {
        width: 100%;
        margin-top: 50px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .font-ini1 {
        font-family: 'Spartan';
        font-size: 13px;
        color: #ffffff;
        text-shadow: 2px 2px 2px black;
    }
    .font-ini2 {
        font-family: 'Spartan';
        font-size: 37px;
        color: #ffffff;
        text-shadow: 2px 2px 2px black;
    }
    .font-ini3 {
        font-family: 'Spartan';
        font-size: 15px;
        color: #ffffff;
        text-shadow: 2px 2px 2px black;
    }
    .font-ini4 {
        font-family: 'Spartan';
        font-size: 30px;
        color: #ffffff;
        text-shadow: 2px 2px 2px black;
    }
    .div-princ-redes {
        padding-bottom: 20px;
        background-color: white;
        padding-left: 20px;
    }
    .div-redes {
        display: flex;
        margin-top: 10px;
    }
    .redes {
        margin-bottom: 20px;
    }
    .redes1 {
        font-family: 'Spartan';
        color: #090a0f;
        margin-top: 15px;
        font-size: 40px;
    }
    .redes-contatos {
        font-family: 'Spartan';
        color: #090a0f;
        margin-top: 18px;
        margin-left: 15px;
        font-size: 15px;
    }
    .logos-contatos {
        width: 50px;
    }
    .links {
        text-decoration: none;
    }
    .div-habilidades {
        padding-top: 10px;
        display: block;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .hard-skills {
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 220px;
    }
    .h1-hskills {
        font-family: 'Spartan';
        color: #ffffff;
        padding-top: 5px;
        font-size: 25px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .section-hardskills {
        background-color: #090a0f;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 30px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 30px;
        border-radius: 10px;
        display: block;
    }
    .barra-progresso {
        padding: 5px;
    }
    .progress {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        border-radius: 100px;
        overflow: visible;
        background-color: #1F2233;
    }
    .progress-bar{
        border-radius: 100px;
    }
    .h1-progresso {
        font-family: 'Spartan';
        color: #ffffff;
        font-size: 20px;
        margin-left: auto;
        margin-right: auto;
    }
    .porcentagem {
        position: absolute;
        background-color: #090a0f;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        opacity: 95%;
        margin-left: -8px;
    }
    .h1-barra {
        display: flex;
        margin-top: 13px;
        margin-left: 5px;
        font-size: 13px;
        font-family: 'Spartan';
    }
    .cor-python {
        background-color: rgb(51, 255, 0) !important;
    }
    .cor-html {
        background-color: rgb(255, 136, 0) !important;
    }
    .cor-js {
        background-color: rgb(147, 154, 20) !important;
    }
    .cor-css {
        background-color: rgb(5, 83, 4) !important;
    }
    .cor-bootstrap {
        background-color: rgb(76, 0, 255) !important;
    }
    .cor-docker {
        background-color: rgb(44, 0, 89) !important;
    }
    .cor-linux {
        background-color: rgb(255, 7, 156) !important;
    }
    .cor-php {
        background-color: rgb(255, 6, 6) !important;
    }
    .cor-sql {
        background-color: rgb(0, 255, 157) !important;
    }
    .section-softskills {
        background-color: #090a0f;
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        padding-top: 30px;
        border-radius: 10px;
    }
    .soft-skills {
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 220px;
    }
    .h1-sskills {
        font-family: 'Spartan';
        color: #ffffff;
        padding-top: 5px;
        font-size: 25x;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .div-softskills {
        display: flex;
    }
    .ponto {
        margin-top: 6px;
        margin-right: 4px;
        height: 5px;
        width: 5px;
        background-color: #ffffff;
        border-radius: 50px;
    }
    .h1-soft {
        font-family: 'Spartan';
        font-size: 18px;
        color: #ffffff;
        letter-spacing: 2px;
    }
    .estudos {
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    .h1-estudos {
        font-family: 'Spartan';
        color: #ffffff;
        padding-top: 5px;
        font-size: 25px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .div-estudos {
        background-color: #090a0f;
        width: 45%;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 2px 5px 5px black;
    }
    .div-estudos-icons {
        display: flex;
        padding: 10px;
        width: 100%;
        justify-content: center;
    }
    .icon-rjs {
        width: 95%;
    }
    .icon-sql {
        width: 80%;
    }
    .icon-ts {
        width: 100%;
    }
    .icon-php {
        width: 110%;
    }
    .div-projetos {
        padding-top: 30px;
        padding-bottom: 30px;
        display: block;
    }
    .div-card {
        width: 80%;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        justify-content: center;
        margin: auto;
    }
    .meus-projetos {
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 220px;
    }
    .h1-projetos {
        font-family: 'Spartan';
        color: #ffffff;
        padding-top: 5px;
        font-size: 30px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .card {
        background-color: #090a0f;
        color: white;
        box-shadow: 2px 5px 5px black;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }
    .d-block {
        border-radius: 5px;
    }
    .btn {
        background-color: white;
        color: black;
        width: 50%;
        margin-top: 20px;        margin-left: 25%;
        box-shadow: 2px 5px 5px black;
    }
    .btn:hover {
        background-color: #1F2233;
        color: white;
        box-shadow: 2px 5px 5px black;
        border-color: rgb(255, 255, 255);
    }
    .spinner-border {
        margin-top: 30px;
        width: 100px;
        height: 100px;
    }
}
@media (min-width: 1025px) {
    body {
        background-color: #090a0f;
    }
    .navbar {
        justify-content: center;
        width: 100%;
        background-color: #1F2233;
    }
    .nav-link {
        color: rgb(255, 255, 255);
        font-family: 'Spartan';
    }
    .nav-link:hover {
        color: #090a0f;
        border-color: aqua;
    }
    .foto-perfil {
        width: 70%;
        border-radius: 500px;
        margin: 35px;
        margin-top: 60px;
        box-shadow: 2px 5px 10px #090a0f;
    }
    .inicio {
        display: block !important
    }
    .inicio-apresentação {
        display: flex;
    }
    .stacks {
        display: flexbox;
        margin-left: auto;
        margin-right: auto;
        width: 40%;
        margin-top: 40px;
        padding-top: 20px;
        border-radius: 10px;
        background-color: #090a0f;
        box-shadow: 2px 5px 5px black;
    }
    .div-h1-stack {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    .h1-stacks {
        text-align: center;
        font-family: 'Spartan';
        color: #ffffff;
        font-size: 20px;
        text-shadow: 2px 5px 5px black;
    }
    .stacks-icons {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
        padding: 15px;
    }
    .stc-rjs {
        width: 90%;
        margin-top: 8px;
    }
    .stc-php {
        margin-top: 8px;
        width: 100%;
    }
    .stc-js {
        margin-top: 2px;
        width: 98%;
    }
    .stc-python {
        width: 80%;
        margin-top: 6px;
    }
    .stc-vsc {
        width: 85%;
        margin-top: 6px;
    }
    .container {
        display: flex;
        background-color: #1F2233;
        border-radius: 10px;
        box-shadow: 2px 5px 5px black;
        margin-top: 20px;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    .font-ini {
        width: 80%;
        margin-right: 40px;
        margin-top: 90px;
    }
    .font-ini1 {
        font-family: 'Spartan';
        font-size: 20px;
        color: #ffffff;
        text-shadow: 2px 2px 2px black;
    }
    .font-ini2 {
        font-family: 'Spartan';
        font-size: 55px;
        color: #ffffff;
        text-shadow: 2px 2px 2px black;
    }
    .font-ini3 {
        font-family: 'Spartan';
        font-size: 20px;
        color: #ffffff;
        text-shadow: 2px 2px 2px black;
    }
    .font-ini4 {
        font-family: 'Spartan';
        font-size: 50px;
        color: #ffffff;
        text-shadow: 2px 2px 2px black;
    }
    .div-princ-redes {
        margin-top: 30px;
        background-color: #ffffff;
        margin-bottom: 20px;
    }
    .div-redes {
        display: flex;
        margin-top: 10px;
        padding: 5px;
        padding-right: 20px;
        border-radius: 5px;
    }
    .redes {
        margin-bottom: 20px;
        padding: 20px;
    }
    .redes1 {
        font-family: 'Spartan';
        color: #090a0f;
        margin-top: 15px;
        font-size: 80px;
    }
    .redes-contatos {
        font-family: 'Spartan';
        color: #090a0f;
        margin-top: 15px;
        margin-left: 15px;
        font-size: 20px;
    }
    .logos-contatos {
        width: 50px;
    }
    .links {
        text-decoration: none;
    }
    .div-habilidades {
        padding-top: 10px;
        display: block;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .hard-skills {
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 220px;
    }
    .h1-hskills {
        font-family: 'Spartan';
        color: #ffffff;
        padding-top: 5px;
        font-size: 30px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .section-hardskills {
        background-color: #090a0f;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 40px;
        border-radius: 10px;
    }
    .barra-progresso {
        padding: 5px;
    }
    .progress {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        border-radius: 100px;
        overflow: visible;
        background-color: #1F2233;
    }
    .progress-bar{
        border-radius: 100px;
    }
    .h1-progresso {
        font-family: 'Spartan';
        color: #ffffff;
        font-size: 20px;
        margin-left: auto;
        margin-right: auto;
    }
    .porcentagem {
        position: absolute;
        background-color: #090a0f;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        opacity: 95%;
    }
    .h1-barra {
        display: flex;
        margin-top: 12.5px;
        margin-left: 4px;
        font-size: 13px;
        font-family: 'Spartan';
    }
    .cor-python {
        background-color: rgb(51, 255, 0) !important;
    }
    .cor-html {
        background-color: rgb(255, 136, 0) !important;
    }
    .cor-js {
        background-color: rgb(147, 154, 20) !important;
    }
    .cor-css {
        background-color: rgb(5, 83, 4) !important;
    }
    .cor-bootstrap {
        background-color: rgb(76, 0, 255) !important;
    }
    .cor-docker {
        background-color: rgb(44, 0, 89) !important;
    }
    .cor-linux {
        background-color: rgb(255, 7, 156) !important;
    }
    .cor-php {
        background-color: rgb(255, 6, 6) !important;
    }
    .cor-sql {
        background-color: rgb(0, 255, 157) !important;
    }
    .section-softskills {
        background-color: #090a0f;
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        border-radius: 10px;
    }
    .soft-skills {
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 220px;
    }
    .h1-sskills {
        font-family: 'Spartan';
        color: #ffffff;
        padding-top: 5px;
        font-size: 30px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .div-softskills {
        display: flex;
        margin-top: 10px;
    }
    .ponto {
        margin: 5px;
        height: 5px;
        width: 5px;
        background-color: #ffffff;
        border-radius: 50px;
    }
    .h1-soft {
        font-family: 'Spartan';
        font-size: 20px;
        color: #ffffff;
        letter-spacing: 2px;
    }
    .estudos {
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 15%;
    }
    .h1-estudos {
        font-family: 'Spartan';
        color: #ffffff;
        padding-top: 5px;
        font-size: 30px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .div-estudos {
        background-color: #090a0f;
        width: 45%;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        border-radius: 10px;
        display: flex;
        box-shadow: 2px 5px 5px black;
    }
    .div-estudos-icons {
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }
    .icon-rjs {
        width: 70px;
        padding-left: 10px;
    }
    .icon-sql {
        width: 65px;
        margin-left: 20px;
    }
    .icon-ts {
        width: 55px;
        margin-left: 20px;
        margin-top: 5px;
    }
    .icon-php {
        margin-top: 4px;
        width: 80px;
        margin-left: 20px;
    }
    .icon-js {
        width: 70px;
    }
    .icon-python {
        width: 60px;
    }
    .icon-vsc {
        width: 60px;
        margin-top: 5px;
    }
    .div-projetos {
        padding-top: 30px;
        display: block;
    }
    .div-card {
        width: 90%;
        display: flex;
        justify-content: space-around;
        margin-left: auto;
        margin-right: auto;
    }
    .meus-projetos {
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 220px;
    }
    .h1-projetos {
        font-family: 'Spartan';
        color: #ffffff;
        padding-top: 5px;
        font-size: 30px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .card {
        background-color: #090a0f;
        color: white;
        box-shadow: 2px 5px 5px black;
    }
    .d-block {
        border-radius: 5px;
    }
    .btn {
        background-color: white;
        color: black;
        width: 50%;
        margin-top: 20px;        margin-left: 25%;
        box-shadow: 2px 5px 5px black;
    }
    .btn:hover {
        background-color: #1F2233;
        color: white;
        box-shadow: 2px 5px 5px black;
        border-color: rgb(255, 255, 255);
    }
    .spinner-border {
        margin-top: 30px;
        width: 100px;
        height: 100px;
    }
}