*{
    margin: auto;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --bg-dark:darkslategrey;
    --bg-light:rgb(245, 240, 240);
    font-family: Kristen ITC;
}
body,html{
    width:100%;
    height: 100%;
    background-color: var(--bg-light);
}

body > header{
    width: 100%;
    padding: 20px;
    background-color: var(--bg-dark);
    color: var(--bg-light);
    font-size: 18px;
    position: relative;
}

body > header::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 0.1rem;
    background-color: var(--bg-dark);
    bottom: -0.6rem;
    left: 0rem;

}

main{
    padding-top: 4vmin;
}

.people{
    text-align: center;
}
.people .wrapper{
    --wid:120px;
    width:var(--wid);
    height: var(--wid);
    border: 4px solid var(--bg-dark);
    border-radius: 100%;
    position: relative;
    display: inline-flex;
}

.people:nth-child(1){
    margin-top: 40px;
}
.people:not(.people:nth-child(1)){
    margin-top: 100px;
}

.people .wrapper .circle{
    width:90%;
    height: 90%;
    background-color: var(--bg-dark);
    border-radius: 100%;
}
.people .wrapper .circle{
    width:25px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
}



.people .wrapper .img
{
    width: 100%;
    height: 100%;
    border-radius: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
    background-color:var(--bg-dark);
    z-index: 1;
    cursor: pointer;
}


.people .wrapper .img:hover::after{
    content: 'view';
    position: absolute;
    width: 90%;
    height: 90%;
    display: block;
    background-color: rgba(0, 0, 0, 0.6);
    transform:translatex(6px) translateY(5.6px);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: red;
    pointer-events: none;
    cursor: pointer;
}  


.people .wrapper .img .pr article{
    width: fit-content;
    height: fit-content;
    background-color: red;
    display: block;
    margin: auto;
}
.people .wrapper .img .pro{
    position: absolute;
    display: grid;
    background-color: red;
    z-index: 3;
}

.people .wrapper .img img,
.people .wrapper .img .pro{
    width:90%;
    width:90%;
    border-radius: 100%;
    display: block;
}



.people .wrapper .name{
    position: absolute;
    color:var(--bg-dark);
    bottom: -26px;
    left: 0;
    right: 0;
}

.people .wrapper.b{
    transform:translatey(28px);
}

.join{
    position: fixed;
    right: 20px;
    background-color: dodgerblue;
    padding:4px 10px;
    border-radius: 0.4ch;
    color:var(--bg-light);
    cursor: pointer;
}

.join:hover{
    background-color: var(--bg-dark);
    /* color:dodgerblue; */
}