*{
	padding: 0;
	margin: 0;
}

html {
    font-size: 16px;
}

body{
    overflow: hidden;
}

#void{
    grid-row: 1;
    grid-column: 1 /3;
    /* background-color: black; */
}

#voidedGap{
    grid-row: 2;
    grid-column: 1;
    background-color: #f1efef;

    width: 4vw;
    height: 72vh;
}

.selectedBox{
    grid-column: 2 / 3;
    grid-row: 2 /4;
    background-color: #f1efef;

    width: 68.5vw;
    height: 72vh;

    display: grid;
    grid-template-columns: 68.5vw; /* split into columns later but for now keep this 'parent' as one */
    grid-template-rows: 10vh 24vh 38vh; /* 3 rows adding to 72vh */
    gap: 0;
}

#selectedPersonName{
    grid-row: 1;
    /* background-color: aqua; */

    text-align: left;
    font-family: Inter;
    font-size: 1.2rem;
    font-weight: bold;

    display: flex;
    align-items: center;
}

#selectedPerson{
    grid-row: 2;

    display: grid;
    grid-template-columns: 12vw 30vw 26.5vw; /* 3 columns adding to 68.5vw */

}

#selectedPersonPhoto{
    grid-column: 1;

    width: 18vh;
    height: 18vh;
    margin-top: 3vh;
    /* margin-left: 3vh; */

    background-size: 100%;
    background-image: url("../assets/match1.png");
}

#selectedPersonMore{
    grid-column: 2;

    display: grid;
    grid-template-columns: 30vw; /* keep this as one column for now*/
    grid-template-rows: 8vh 8vh 8vh; /* 3 rows adding to 24vh but don't use the middle column */
    gap: 0;
}

#selectedPersonInfo{
    grid-row: 1;
    
    margin-top: 3vh;
    text-align: left;
    font-family: Inter;
    font-size: 1.2rem;
}

#statusBox{
    grid-row: 3;
    display: grid;
    grid-template-columns: 2.5vw 12.5vw 15vw; /* 3 columns with the last blank */
}

#statusCircle{
    background-color: #9aff76;

    margin: 1vh;
    width: 2vh;
    height: 2vh;
    border-radius: 50%;
}

#statusText{
    margin-top: 0.5vh;
    text-align: left;
    font-family: Inter;
    font-size: 1.2rem;
}

#connectBox{
    grid-row: 3;

    display: grid;
    grid-template-rows: 15vh 4vh 4vh 15vh; /* 4 rows and use only middle 2 later */
}

#connectText{
    grid-row: 2;

    text-align: left;
    font-family: Inter;
    font-size: 1.2rem;
}

#connectButtonsPart{
    grid-row: 3;

    display: grid;
    grid-template-columns: 11vw 11vw 11vw 35.5vw; /* split to 4 columns for the 3 buttons and void; these will add to  68.5vw*/
}

#audioButton{grid-column: 1;}
#videoButton{ grid-column: 2;}
#messageButton{grid-column: 3;}

#audioButton, #videoButton, #messageButton {
    justify-content: left;
}

.connectButtons button{
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background-color: #d9d9d9;

    height: 4vh;
    width: 9vw;

    text-align: center;
    font-family: Inter;
    font-size: 1.2rem;
}

.connectButtons button:hover{
    background-color: #ffdc8a;
    cursor: pointer;
}