:root {
    /* ---- COLORS ---- */
    --green: #018D8E;
    --black: #1E1E1E;
    --light-gray: #dbdbdb;
    --gray: #797470;
    --purple: #872176;
    --yellow: #EFA92D;
    --dark-blue: #17458F;
    --light-blue: #019FCC;
    --white: #FFFFFF;
}
.section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
}

/* TOPICS */
.section-topic {
    display: flex;
    align-items: center;
}
.section-topic img{
    width: auto;
    height: 35px;
    padding-right: 10px;
    animation: roleLeft 2s ease-in-out
}
.section-topic h1{
    color: var(--dark-blue);
    font-weight: 700
}

/* BUTTONS */
.btn-responsive-contribute {
    padding: 1% 2%;
    text-align: center;
    color: var(--white);
    background-color: var(--purple);
    border: 2px solid var(--purple);
    font-weight: 700;
    margin: 2em 0em;
    text-decoration: none;
    border-radius: 50px
}
.btn-responsive-contribute:hover{
    color: var(--purple);
    background-color: var(--white);
    border: 2px solid var(--purple);
}

.btn {
    width: 300px;
    height: 50px;
    align-content: center;
    overflow: hidden;
    padding: 2px 5px;
    font-weight: 700;
    text-decoration: none;
}

.btn-copy-key-pix {
    width: 200px;
    height: auto;
    padding: 2px;
    border-radius: 50px;
    color: var(--purple);
    background-color: var(--white);
    border: 2px solid var(--purple);
    border-radius: 10px;
}
.btn-copy-key-pix:hover {
    color: var(--yellow);
    border: 2px solid var(--yellow);
}

.btn-purple {
    width: 100%;
    color: var(--white);
    background-color: var(--purple);
    border-radius: 50px;
    filter: drop-shadow(1px 3px 4px var(--black))
}
.btn-purple:hover{
    color:var(--white);
    background-color: var(--yellow);
}

.btn-yellow {
    color: var(--white);
    background-color: var(--yellow);
    border-radius: 14px;
    filter: drop-shadow(1px 3px 2px var(--black))
}
.btn-yellow:hover {
    color: var(--white);
    background-color: var(--purple);
}

.btn-rotary-collapse {
    width: 150px;
    color: var(--white);
    text-decoration-line: none;
    border-radius: 10px;
    padding: 0% 2%;
    text-align: center;
    background-color: var(--gray);
}
.btn-rotary-collapse:hover {
    color: var(--white);
    background-color: var(--yellow);
}

.btn-contribute-project {
    width: 100%;
    color: var(--purple);
    padding-bottom: 6%
}
.btn-contribute-project:hover {
    color: var(--yellow);
}
.btn-contribute-project::after{
   content: "▼";
}

.btn-contribute-option {
    color: var(--gray);
    background-color: var(--white);
    padding: 1%;
    border-radius: 10px;
}
.btn-contribute-option-active {
    color: var(--white);
    background-color: var(--green);
    padding: 1%;
    border-radius: 10px;
}
.btn-contribute-option:hover,.btn-contribute-option-active:hover{
    color: var(--white);
    background-color: var(--green);

}

/* SPAN STYLES */
span{
    display: contents;
}
.span-light-blue {
    color: var(--dark-blue);
    filter: saturate(100);
}
.span-yellow {
    color: var(--yellow);
}
.span-purple {
    font-weight: 700;
    color: var(--purple);
}
.span-green, .span-read-more {
    color: var(--green);
}
.span-read-more{
    text-decoration-line:underline
}
.span-dark-blue{
    color: var(--dark-blue);
}

/* GLOBAL STYLES */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    background: linear-gradient(to top, var(--black) 50%, var(--green) 50%);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.element-for-tablet-and-desktop {
    display: block
}
.element-for-mobile {
    display: none
}

@media (max-width: 480px){
    .btn-responsive-contribute {
        padding: 2% 2%;
        width: 250px
    }
    .element-for-tablet-and-desktop {
        display: none
    }
    .element-for-mobile {
        display: block
    }
}
@media (min-width: 481px) {
    .btn-responsive-contribute {
        padding: 2% 2%;
        width: 250px
    }
    .element-for-tablet-and-desktop {
        display: none
    }
    .element-for-mobile {
        display: block
    }
}
@media (min-width: 610px) {
    .element-for-tablet-and-desktop {
        display: none
    }

    .element-for-mobile {
        display: block
    }

    .btn-rotary-collapse{
        width: 200px
    }
}

@media (min-width: 768px) {
    .btn-responsive-contribute {
        padding: 2% 2%;
        width: 300px
    }
    .element-for-tablet-and-desktop {
        display: block
    }
    .element-for-mobile {
        display: none
    }
    .about-img {
        width: 30vw;
        border-radius: 20px
    }

    html {
        font-size: 16px;
    }
}

@media (min-width: 1024px){
    .section-topic {
        justify-self: flex-start;
        padding: 0
    }
    .btn-purple {
        width: 50%;
        color: var(--white);
        background-color: var(--purple)
    }
    .btn-responsive-contribute {
        padding: 1.5% 3%;
        font-size: 1.3em;
        margin: 4em 0em;
        width: 350px;
    }
    .element-for-tablet-and-desktop {
        display: block
    }
    .element-for-mobile {
        display: none
    }
}
@media (min-width: 1280px) {
    .section-topic {
        justify-self: flex-start;
        padding: 0
    }
}
    
@media (min-width: 1440px) {
    .section-topic {
        justify-self: flex-start;
        padding: 0
    }

    .element-for-tablet-and-desktop {
        display: block
    }

    .element-for-mobile {
        display: none
    }

    html {
        font-size: 16px;
    }

    .btn-contribute {
        width: 300px;
        height: auto;
        padding: 3px;
    }
}
@media (min-width: 1991px){
    .section-topic {
        justify-self: flex-start;
        padding: 0;
    }
}