/* Reset some default browser styles */
body, h1, h2, h3, p {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color:#e5eaf1;
    min-height: 100vh;
    margin: 0px;

}

header {
    /*background-color: #333;*/
    color: #0c0303;
    padding: 10px;
    background-color:rgba(133, 134, 73, 0.164);
    height:45px;

}
.container2{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.item1{ 
    display: flex;
    
}
.name{
    flex-direction: column;
}

.links{
    justify-content: flex-end;

}
header li {
    display: inline-block;
    justify-content: center;
    font-size: 16px;

}
header a{
    color: #010305;
    margin: 20px;
}
strong {
    font-size: 50px;
}

header h3 {
    font-size: 20px;
    padding-bottom:1px;
}
header p {
    font-size: 14px;
    padding-bottom:1px;
}

nav ul {
    /*background-color: #444;*/
    text-align: center;
    padding: 10px;
}

nav ul li {
    display: inline;
    margin: 0 20px;
    font-size: large;
}

nav a {
    color: #080202;
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

section {
    /*background-color: #fff;*/
    margin: 20px;
    padding: 20px;
}

h2 {
    font-size: 24px;
    padding-bottom: 10px;
}
.container1{
    display: grid;
    /*grid-template-rows: 1fr 1fr;*/
    grid-template-columns:  15rem 45rem 1fr;
    gap: 1px;
    /*height: fit-content;*/
    margin-left: 5%;

}

.item{
    display: flex;
}
.text {
    align-items: center;
    width: 100%;
    padding:40px;
    color:#0a0101;
    font-size: larger;

}
.image2 {
    background-image: url("./images/gis22.png");
    width: 40rem;
    height: 36rem;
    background-size: cover;
    background-repeat: no-repeat;
    justify-self: center;
    background-size:cover;
    background-repeat: no-repeat;
}

.image img{
    width: 15rem;
    border-radius: 50%;
    align-self: center;
    border-color: black;
}
button{ border-radius: 50%;
    padding: 2%;
    font-size: larger;
    border: none;

}

.cont {
    background-color: rgba(0, 140, 255, 0.336);
    
}
.pub {
    background-color: rgba(158, 230, 42, 0.452);
}
.about {
    background-color: rgba(255, 153, 0, 0.37);
}




/* Media query for screens up to 1000 pixels */

@media (max-width: 768px) {
    header {
        padding: 0px;
        text-align: center;
        height: fit-content;
    }

    nav ul {
        padding: 5px;
    }

    nav li {
        margin: 0 10px;
    }

    header h3 {
        font-size: 24px;
    }

    header p {
        font-size: 12px;
    }

    section {
        padding: 20px;
    }

    .container1 {
        grid-template-columns: 1fr;
    }
    .image{ 
        justify-self:center;
    }
    .text{
        text-align: center;
        font-size: 16px;
    }
    .image2{
        width: 20rem;
        height: 18rem;
        justify-self: center;
        
        
    }

    .text {
        padding: 10px;
    }
    .container2{
        display: grid;
        grid-template-columns: 1fr;
    }
    .name{
        justify-content: center;
    }
    .links{
        justify-content: center;
        padding: 4px;
    }
}