*{
	padding: 0;
	margin: 0;
}

html {
    font-size: 16px;
}

body{
    overflow: hidden;
}

.userType{
    grid-row: 1;
    background-color: white;

    display: grid;
    grid-template-columns: 22vw 5.5vw; /* 3 columns needed to add to 27.5vw but split to 2 for now*/
    grid-template-rows: auto;
    gap: 0;
}

#typeVoid{
    grid-column: 2;
    /* background-color: black; */
}

.tabs{
    display: grid;
    grid-template-columns: 11vw 11vw; /* split columns further */
    grid-template-rows: 6vh 7vh; /* two 'rows' with a void top adding to 13vh */
    gap: 0;
}

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

.clickTab{
    grid-row: 2;

    width: 11vw;

    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#typeRecruiter{
    grid-column: 1;

    background-color: #e8dfd8;
}

#recruiterText{
    width: 11vw;
    
    text-align: center;
    font-family: Inter;
    font-size: 1.3rem;
}

#typeMentor{
    grid-column: 2;
    

    background-color: #ffdc8a;
}

#mentorText{
    width: 11vw;
    
    text-align: center;
    font-family: Inter;
    font-size: 1.3rem;
}

.info{
    grid-row: 2;
    background-color: #e8dfd8;

    display: flex;
    align-items: center;
}

#infoText{
    width: 22.5vw;
    margin-left: 2vh;
    text-align: left;
    font-family: Inter;
    font-size: 1.1rem;
}

.potentialPerson{
    display: grid;
    grid-template-columns: 7.5vw 20vw; /* 2 columns adding to 27.5vw */
    grid-template-rows: 5.5vh 13.5vh; /* adds to 19vh */
}

.potentialPersonName{
    grid-column: 1;

    margin-top: 1.25vw;
    margin-left: 1.25vw;

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

.potentialPersonPhoto{
    grid-column: 1;
    margin-top: 1vw;
    margin-left: 1.25vw;

    width: 9vh;
    height: 9vh;
    border-radius: 50%;
    background-size: 100%;
}

#Layla{
    grid-row: 3;
    background-color: #ffdc8a;
}

#laylaPhoto{background-image: url("../assets/match1.png");}

#Marcos{
    grid-row: 4;
    background-color: #e8dfd8;
}

#marcosPhoto{background-image: url("../assets/match2.png");}

#Romi{
    grid-row: 5;
    background-color: #ffdc8a;
}

#romiPhoto{background-image: url("../assets/match3.png");}

.potentialPersonInfo{
    grid-column: 2;
    margin-top: 1vw;

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