*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body{
    background-color: #bac3ff;
}
.container{
    display: flex;
    gap: 30px;
    margin: 60px auto;
    width: 800px;
    height: 630px;
    /* border: 5px solid white; */
    padding-inline: 20px;
    padding-block: 10px;
}
.contacts-list,.contact-detail{
    padding-inline:10px ;
    padding-top:20px ;
    width: 305px;
    height: 600px;
    background-color: white;
    border: none;
    border-radius: 30px;
    box-shadow: 2px 2px 8px gray;
}
.btn1{
    display: flex;
    justify-content: end;
    margin-block:2px;
}
#header-name{
    font-size: 28px;
}
#para1{
    color: gray;
    font-size: 12px;
    margin-top: 2px;
}
.nav-container{
    border-block:1px solid gray;
    padding-block: 10px;
    margin-block: 5px;
}
nav{
    display: flex;
    justify-content: space-between;
}
.nav-container ul{
    display: flex;
    list-style-type: none;
}
.nav-container ul li{
    margin-inline: 5px;
    color: gray;
}
#group-btn{
    padding-block: 5px;
    padding-inline:8px;
    border: none;
    border-radius: 40px;
    background-color: #3c46cf;
    color: white;
    font-size: 12px;
    font-weight:bold;
}
.contacts-display{
    width: 100%;
    height: 400px;
    /* border: 1px solid; */
    margin-bottom: 5px;
}
.icon-container{
    display: flex;
    justify-content: space-between;
    background-color: white;
    border-radius: 30px;
    padding-inline: 10px;
    padding-block: 5px;
}
#icon-list{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#icon-list span{
    color: gray;
    font-size: 10px;
}
/*position*/
.contacts-list{
    position: relative;
}
.icon-container{
    width: 96%;
    position: absolute;
    bottom: 16px;
    left: 5px;
}
.contacts-display{
    overflow:scroll;
}
.contact-detail{
    position: relative;
    background: #6552fe;
    margin-top: 30px;
    display: none;
}