:root{    
     --primary: rgb(96 188 82);
    --secundary: rgb(46 176 74);
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Libre Franklin', sans-serif;
}

a {
    text-decoration: none;
}

html , body , .container-page{
    height: 100%;
    width: 100%;
}

.container-page {
    display: flex;
    flex-direction: column;
}



/* -------------------------- navbar-page (start) --------------------- */

.header-page {
    background-color:   var(--primary);
    height: 12%;
    width: 100%;
}

nav {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav .navtop {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navtop .navTopLeft {
    display: flex;
    color: white;
    border-left: 1px dotted white ;
}

nav .navdotted {
    height: 100%;
    border-left: white 2px solid;
}

.navTopLeft .navtext .navtext-title {
    font-size: 3vw;
}

.navtext .navtext-money {
    font-size: 5vw;
    font-weight: 900;
}

/* -------------------------- navbar-page (end) ----------------------- */

/* --------------------------- main-page (start) ---------------------- */

main {
    display: flex;
    justify-content: center;
}

.container-main {
    width: 90%;
    color:  var(--primary);
    display: flex;
    justify-content: center;
}

main .main-head p {
    font-size: 4vw;
}

.main-bottom .main-element {
    display: flex;
    flex-direction: column;
}

.image-of-elements {
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.image-of-element:focus{
    transform: scale(1.2);
}


.main-element-name {
    font-size: 4vw;
    margin-top: 5px;
}

.main-bottom a {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary);
}

.main-bottom a div img {
    width: 70%;
}


.main-bottom-icons a .last-image-of-elements {
    width: 55%;
}
/* --------------------------- main-page (end) ------------------------ */

/* -------------------------- footer-page (start) --------------------- */
.footer-page {
    background-color: transparent;
    height: 12%;
}

.footer {
    width: 80%;
    height: 80%;
    background-color: var(--secundary);
    box-shadow: rgba(111, 100, 100, 0.3) 0px 0px 20px 2px;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.footer-link {
    display: flex;
    flex-direction: column;
}

.footer .footer-links {
    transition: all 0.2s ease-in-out;
}

.footer .footer-links:focus{
    transform: scale(1.2);
}

.footer-link .link{
    display: flex;
    justify-content: center;
    color: white;
    cursor: pointer;
    font-size: 3vw;
    margin-top: 5px;
}

.footer-link .link img {
    max-width: 30%;
}

/* -------------------------- footer-page (end) ----------------------- */