body {
    font-family: Inter, Serif;
    background: linear-gradient(
        135deg,
        rgb(44, 61, 82),
        rgb(49, 67, 85)
    );

    height: 100vh;
    overflow: hidden;

    /* 
    font-family: 'Alesand',
    font-family: 'Alesand Extrude',
    font-family: 'Alesand Outline',
    font-family: 'Alesand Round',
    */
}

.header {
    color: white;
    float: left;
    text-shadow: 0px 2px 4px rgba(150, 150, 150, 0.281);

    margin-left: 15px;
}

.headerLinks {
    display: inline;
    float: right;
}

.headerLinks a {
    text-decoration: none;
    color: white;
    margin-left: 10px;
    margin-right: 5px;
}

.headerLinks a:hover {
    color: rgb(245, 245, 245);
    font-size: 25px;

    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    text-decoration: underline;
    transition: .2s ease-in-out;
    
}

.projectsContainer {
    display: grid;
    grid-area: 'projects';
    
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 'projects projects projects';
    
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    padding-left: 10%;

    grid-gap: 30px;
}

@keyframes fadeAndScale2 {
    0% {
        opacity: 0;
        transform: scale3d(.75, .75, 1);
    }

    40% {
        opacity: 0;
        transform: scale3d(.75, .75, 1);
    }

    80% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.projects {
    margin-top: 150px;
    height: 237px;
    width: 250px;
    display: flex;
    justify-content: center;
    background-color: rgb(49, 67, 85);
    border-radius: 15px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

    animation: fadeAndScale2 1s;
}

.projects p {
    font-size: 14px;
    color: rgb(247, 247, 247);
    margin-top: 10px;
    width: 230px;
    text-align: center;
    margin-left: 10px;
}

.projects h3 {
    margin-top: 10px;
    color: white;
}

.projects a {
    text-decoration: none;
}

#personCounter {
    transition: all 0.3s ease-in-out;
}

#personCounter:hover {
    transform: scale(1.07);
    transition: all 0.2s ease-in;
}

.personCounter {
    grid-area: 'personCounter';

    margin-top: 5px;

    text-align: center;
}

.personCounter img {
    width: 45%;
    border-radius: 5%;
}

#comingSoon {
    justify-content: center;
    align-items: center;
    display: flex;
}

#comingSoon img {
    height: 100px;
}