:root{
    --first: #009175;
    --second: #08372c;
    --third: #242424;
}

/* background colors */
.bg-first{
    background-color: var(--first);
}

.bg-second{
    background-color: var(--second);
}

.bg-third{
    background-color: var(--third);
}

.bg-image1{
    background-image: url(../images/unispectre.jpg);
    background-repeat: no-repeat;
}

/* buttons */
.btn-first{
    background-color: var(--first);
    color: #ffffff;
}

.btn-first:hover{
    background-color: var(--first);
    filter: brightness(85%);
    color: #ffffff;
}

.btn-second{
    background-color: var(--second);
    color: #ffffff;
}

.btn-second:hover{
    background-color: var(--second);
    filter: brightness(85%);
    color: #ffffff;
}

.btn-third{
    background-color: var(--third);
    color: #ffffff;
}

.btn-third:hover{
    background-color: var(--third);
    filter: brightness(85%);
    color: #ffffff;
}


/* text */
.text-first{
    color: var(--first);
}

.text-second{
    color: var(--second);
}

.text-third{
    color: var(--third);
}


/* font-seize */
.text-12{
    font-size: 1.2em;
}

.text-15{
    font-size: 1.5em;
}

.text-2{
    font-size: 2em;
}

.text-25{
    font-size: 2.5em;
}

.text-3{
    font-size: 3em;
}

.text-4{
    font-size: 4em;
}

.text-5{
    font-size: 5em;
}

/* border */
.border-first{
    border-color: var(--first);
}