:root {
    --white: #ffffffac;
    --black: #292431;
    --titleGreen: #ACFD00;
    --titlePurple: #3400A3;
    --darkBlue: #000C2D;
    --lightBlue: #F2FFFA;
    --pink: #ff00f7;
    --green: #00FF0A;
    --neonBlue: #00FFF0;
    --lightBlue: #695672;

    --rose: #ff9ffc;
    --lightGreen: #95ff99;
    --lightNeonBlue: #80fff6;

    --darkGradient: #8adad1;

    --contato:#221D26;
}

@font-face {
    font-family: myFirstFont;
    src: url(../fonts/Jura/Jura-VariableFont_wght.ttf);
}

* {
    font-family: myFirstFont;
}

body {
    background-color: var(--white) !important;
    color: var(--black) !important;
}

a.nav-link {
    color: var(--black) !important;
}

.header {
    min-height: 500px;
    background-image: linear-gradient(140deg, rgba(171, 0, 252, 0.3), var(--white), rgba(0, 71, 252, 0.1));
}

.profilePic {
    width: 100% !important;
}

.greenTitle {
    color: var(--titlePurple);
}

.container {
    margin-left: 5% !important;
    margin-right: 5% !important;
}



.bg-body-tertiary {
    --bs-bg-opacity: 0 !important;
    border-bottom: 1px solid var(--black);
    margin-left: 5%;
    margin-right: 5%;
}

[data-theme="dark"] {
    --white: #292431;
    --black: #fff;
    --titleGreen: #3400A3;
    --titlePurple: #ACFD00;
    --darkBlue: #F2FFFA;
    --lightBlue: #000C2D;

    --pink: #ff9ffc;
    --green: #95ff99;
    --neonBlue: #80fff6;

    --rose: #ff00f7;
    --lightGreen: #00FF0A;
    --lightNeonBlue: #00FFF0; 

    --darkGradient: #09061B;;

    --contato: #221D26;
}


.cardTecnologia {
    background-color: var(--lightBlue);
    border-radius: 20px;
    padding: 15px;
}

.blurPink{
    border-bottom: 5px solid var(--rose);
}

.blurGreen{
    border-bottom: 5px solid var(--lightGreen);
}

.blurBlue{
    border-bottom: 5px solid var(--lightNeonBlue);
}

.pink{
    color: var(--rose);
}

.green{
    color: var(--lightGreen);
}

.neonBlue{
    color: var(--lightNeonBlue);
}

.imgsTecnologia{
    padding: 10px;
}

.expT{
    background-image: linear-gradient(to right, var(--darkGradient) , var(--white));
}

.contato{
    background-color: var(--contato);
    border-radius: 30px;
    color: white;
}

.btnmode{
    border: 3px solid #ff9ffc;
    border-radius: 20px;
}