*{
    margin: auto;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
body{
    background-color: blanchedalmond;
        
}

    header {
    width: 100%;
    height: 60px;
    margin: auto;
    align-items: center;
    padding: 50px;
    background: #2f0494;

    h1{
    color: white;
    text-align: center;
    }
    h2{
        color: white;
        text-align: center;
    }
    }
    .nav{
        background: #2f0494;
        display: flex;
        position: relative;
        margin-right:10%;
        float: right;
         overflow: hidden;
    }
    
    .nav a{
        float: left;
        color: white;
        text-align: center;
        padding: 14px 20px;
        text-decoration: none;
    
    }
    
    .nav a:hover{
        background-color: #ddd;
        color: black;
        border-radius: 20px;
    
        .nav a::after{
            content: attr(type);
        }
    }
    
    .nav a:active{
        background-color: yellow;
    }

    .nav a:visited{
        background-color: red;
    }
    .container{     
        margin: auto;
        max-width: 500px;
        padding: 10px;
        display: block;
}
.mission {
    border-radius: 20px;
    max-width: 300px;
}


.avaters{
    --avater-count: 5;
    --avater-size: 70px;
    --transition-duration: 500ms;
    --colum-size: calc(var(--avater-size) / 2);
    display: grid;
    grid-template-columns: repeat(10, var(--colum-size));
    transition: grid-template-columns 500ms;
    transition-delay: 500ms;
    max-width: 80vw;
    padding-block: 4rem;
    overflow:hidden;
}
.avaters:hover,
.avaters:focus-within{
    --colum-size: calc(var(--avater-size) * 1.5);
    transition-delay: 0ms;

}

.avater{
    width: var(--avater-size);
    object-fit: cover;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 5px solid white;
    box-shadow: .25rem .25rem .5rem;
    transition: scale 500ms;
}

.avater:hover,
.avater:focus{
    scale:2;
    z-index: 2;
}

.avater:hover + .avater,
.avater:has( + .avater:hover){
    scale:1.5;
    border-color:#2f0494;
}


footer{
    background-color: navy;
    color: white;
    padding: 20px;
    text-align: center;    
}

footer a{
    float: right;
    justify-content: space-between;
    color: white;
    text-decoration: none;
    
}
 footer i{
    color: white;
 }

footer i:hover{
    color: red;
    opacity: .5;
}