body {
    margin: 0 auto;
    background-image: url('/images/solar-panels.jpg');
    background-attachment: fixed;
    background-size: 100%;
   
    background-position-y: 0px;
    background-position: center;

    width: 100%;
    font-size: 1em;
    font-family:  'Bahnschrift';
    font-weight: 500;
}

.ambiente-body {
    background-image: url('/images/bee-on-flower-2.jpg');
    background-position-y: 0px;
}

.sociedade-body {
    background-image: url('/images/green-building.jpg');
    background-position-y: 3px; 
}

.psnc-body {
    background-image: url('/images/green-paint.jpg');
    background-position-y: 3px; 
    background-size: 100%;

}


header {
    width: 100%;
    position: fixed;
    background-color: #B8E8B1;

    display: flex;
    align-items: center;
    
}

header text {
    
    font-size: 3.6em;
    color: #135930;
    letter-spacing: -0.1rem;
}

header a {
    text-decoration: none;

}


header img {
    width: 5rem;
    margin: 1rem;
    margin-right: 2rem;
    text-decoration: none;

}

header nav {
    display: flex;
    justify-content: space-between;
    margin-left: 3em;

}

header nav a {
    margin-left:1em;
    color: #135930;
    font-size: 1.8rem;
    font-style: normal;
}

.logo-name-container {
    display: flex;
    align-items: center;
}








.main-general {
    width: 100%;
}


tittle {
    display: flex;
    justify-content: space-around;
    font-size: 700%;
    margin: auto;
    text-align: center;
    padding: 2%;
    color: white;
    background-color: #13593075;
    font-weight: 400;
}

.tittle-psnc {
    font-size: 550%;
}



.div-general-text {
    margin: 0;
    background-color: #DAF7D6;
    text-align: justify;
    padding: 40px;
    padding-left: 60px;
    padding-right: 60px;
}



.p-general {
    margin-bottom: 50px;
    margin-top: 15px;
    font-size: 200%;
    line-height: 140%;
    font-weight: 200;
    padding-top: 0px;
    padding-bottom: 0px;
    text-indent: 50px;

}

.subt-general {
    margin-left: 50px;
    font-size: 240%;
    margin-bottom: -10px;


}

.names-container {
    /* background-color: aqua; */
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}

.dot {
    margin-top: 10px;
    height: 210px;
    width: 210px;
    display: inline-block;
    border: 12px solid #135930;
    border-radius: 25%;

}

.dot-marg {
    background-image: url('/images/bee-m.jpg');
    background-size: 260%;
    background-position-x: -235px;
    background-position-y: -135px;
    height: 210px;
    width: 210px;

  }

  .dot-mar {
    background-image: url('/images/burafly-m.jpg');
    background-size: 260%;
    background-position-x: -165px;
    background-position-y: 985px;

  }

  .dot-pdr {
    background-image: url('/images/piupiu-p.jpg');
    background-size: 210%;
    background-position-x: -110px;
    background-position-y: 845px;

  }


  .dot-vrn {
    background-image: url('/images/fulor-v.jpg');
    background-size: 230%;
    background-position-x: -150px;
    background-position-y: 930px;

  }


.names-box {
    /* background-color: fuchsia; */
    display: grid;
    justify-items: center;
}

.names-text {
    color: #135930;
    margin: 0px;
    font-size: 240%;

}


.header-filler {
    width: 100%;
    height: 7em;
    background-color: azure;
}


.space {
    width: 100%;
    height: 350px;
}



footer {
    background-color: #135930;
    position: relative;
    height: 5em;
    width: 100%;
    margin-top: 10%;
    display: flex;
    align-items: center;
}

footer text {
    color: rgba(255, 255, 255, 0.795);
    font-size: 1.3em;
    font-weight: 400;
    margin-left: 1em;
}












@media all and (max-width: 850px) {

    body {
    /* background-image: url('/images/solar-panels.jpg'); */
    width: 100%;
    background-attachment: fixed;
    background-size: 380%;

    background-position-x: 830px;
    }

    .ambiente-body {
        background-image: url('/images/bee-on-flower.jpg');
        background-size: 250%;
        background-position-y: -400px;
        background-position-x: -260px;

    }
    
    .sociedade-body {
        background-position-y: 3px; 
    }

    .psnc-body {
        background-image: url('/images/green-paint.jpg');
        background-position-y: 3px; 
        background-position-x: 0px;
        background-size: 140%;
    
    }


    header {
        position: fixed;
        width: 100%;
        height: 115px;

        background-color: #B8E8B1;

    }


    header text {
        font-size: 2em;
        color: #135930;
        letter-spacing: -0.1rem;
    }
    
    header a {
        text-decoration: none;
    
    }
    
    
    header img {
        width: 5rem;
        margin: 1rem;
        margin-right: 1rem;
        text-decoration: none;
    
    }
    
    header nav {
        height: 0px;
        width: 0px;
    
    }
    
    header nav a {
        display: inline;
        font-size: 0px;
    }




    tittle {  
        font-size: 300%;
        padding: 2%;
        padding-top: 10%;
        padding-bottom: 10%;
        color: white;
        font-weight: 400;
    }
    
    .tittle-psnc {
        font-size: 160%;
    }
    

    .div-general-text {
        margin: 0;
        background-color: #DAF7D6;
        text-align: justify;
        padding: 15px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    
    
    .p-general {
        margin-bottom: 50px;
        margin-top: 15px;
        font-size: 120%;
        line-height: 140%;
        font-weight: 200;
        padding-top: 0px;
        padding-bottom: 0px;
        text-indent: 50px;
    
    }
    
    .subt-general {
        text-align: left;
        margin-left: 50px;
        font-size: 150%;
        margin-bottom: -10px;
    
    
    }




    .names-container {
        /* background-color: aqua; */
        display: grid;
        justify-content: center;
        margin-bottom: 0px;
    }
    
    .names-box {
        background-color: rgba(255, 0, 255, 0);
    }

    .dot {
        height: 180px;
        width: 180px;
        border: 10px solid #135930;
        margin-bottom: 60px;
    }

    .dot-marg {
        background-image: url('/images/bee-m.jpg');
        background-size: 260%;
        background-position-x: -200px;
        background-position-y: -120px;

      }
    
      .dot-mar {
        background-image: url('/images/burafly-m.jpg');
        background-size: 290%;
        background-position-x: -170px;
        background-position-y: -100px;


      }
    
      .dot-pdr {
        background-image: url('/images/piupiu-p.jpg');
        background-size: 210%;
        background-position-x: -85px;
        background-position-y: -30px;


      }
    
    
      .dot-vrn {
        background-image: url('/images/fulor-v.jpg');
        background-size: 240%;
        background-position-x: -140px;
        background-position-y:840px;
;

      }










    footer {
        height: 4em;
        margin-top: 30%;
        display: flex;
        align-items: center;
    }


    footer text {
        color: rgba(255, 255, 255, 0.795);
        font-size: 0.9em;
        font-weight: 400;
        margin-left: 1em;
    }


}