@import url(common.css);

.purpose {
    width: 100vw;
    height: 80vh;
    background-image: url(../images/world-1600x900.jpg);
    background-attachment: fixed;
    background-position: bottom;
}

.purpose div {
    /*border-bottom: 1px solid red;*/
    width: 50%;
    height: max-content;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10vh;
    text-align: center;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    /*color: darkblue;*/
    
}

.purpose h2 {
    font-size: 3rem;
    /*color: rgb(252, 122, 0);  - this is the ORANGE color*/
}

.purpose p {
    font-family: sedan;
    font-size: 2rem;
    font-style: italic;
}

.about {
    margin: 5%;
}

.about h2 {
    font-size: 2.5rem;
    text-align: center;
}

.about p {
    font-size: 2rem;
    text-align: center;
    padding: 2rem;
}

.ministers {
    background-image: linear-gradient(to right, whitesmoke, rgb(194, 174, 241));
    border-top: 1px solid black;
    padding: 4rem;
}

.ministers h2 {
    font-size: 3rem;
    text-align: center;
}

.ministers > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    margin: 2vw 10% 2vw 10%;
}

.ministers > div > img {
    width: 15vw;
}

.ministers > div > p {
    font-size: 2rem;
}

span {
    font-weight: bold;
}