/*

Personal Website
By: Rebytre

*/

/*---Main Background---*/
body{
    background-color: #030303;
}

/*---Main Grid---*/
.container{
    width: 100%;
    height: 92vh;
    display: grid;
    grid-template-rows: 0.5fr 1fr 8fr 0.5fr;
    grid-template-columns: 0.5fr 1.5fr 4.5fr 0.5fr;
    column-gap: 2vh;
    row-gap: 2vh;
}

/*---Navigation Container---*/
#navContainer{
    /*Grid Position*/
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 4;
    /*Grid*/
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 2fr 8fr 1fr;
    column-gap: 1svh;
    column-rule: 10px solid #ffffff;
    /*Customization*/
    background-color:#3333339f;
    border-radius: 2vh;
    color: #ffffff;
    font-family: verdana;
    font-size: 2vh;
    text-align: center;
}

/*--Navigation Items--*/
/*-Home-*/
#home{
    box-sizing: border-box;
    border: medium solid #ffffff00;
    border-radius: 2vh;
    cursor: pointer;
    grid-column-start: 1;
    grid-column-end: 2;
}

#home:hover{
    background-color: #4242429f;
    border-color: #ffffffff;
}

/*-Projects-*/
#projects{
    box-sizing: border-box;
    border: medium solid #ffffff00;
    border-radius: 2vh;
    cursor: pointer;
    grid-column-start: 2;
    grid-column-end: 3;
}

#projects:hover{
    background-color: #4242429f;
    border-color: #ffffffff;
}

/*-Socials-*/
#socials{
    box-sizing: border-box;
    border: medium solid #ffffff00;
    border-radius: 2vh;
    cursor: pointer;
    grid-column-start: 3;
    grid-column-end: 4;
}

#socials:hover{
    background-color: #4242429f;
    border-color: #ffffffff;
}

/*-About-*/
#about{
    box-sizing: border-box;
    border: medium solid #ffffff00;
    border-radius: 2vh;
    cursor: pointer;
    grid-column-start: 4;
    grid-column-end: 5;
}

#about:hover{
    background-color: #4242429f;
    border-color: #ffffffff;
}

/*---Menu Items---*/

/*--Personal Icon--*/
.personalIcon{
    border-radius: 50%;
    border: medium solid #bebebe;
}

/*--Content Container--*/
#contentContainer{
    /*Grid Position*/
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 3;
    grid-column-end: 4;
    background-color:#3333339f;
    border-radius: 2vh;
    color: #ffffff00;
}

.titleWithBorder{
    border-bottom: 2px solid #ffffff;
    padding-bottom: 2svh;
}

/*-Personal Container-*/
#personalContainer{
    /*Grid Position*/
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 3;
    /*Customization*/
    background-color:#3333339f;
    border-radius: 2vh;
    color: #ffffff;
    font-family: verdana;
    font-size: 2vh;
    text-align: center;
    padding-top: 3vh;
}

/*-Header Container-*/
#homeContainer{
    /*Visibility*/
    visibility: visible;
    opacity: 1;
    /*Grid Position*/
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 3;
    grid-column-end: 4;
    /*Customization*/
    border-radius: 2vh;
    color: #ffffff;
    font-family: verdana;
    font-size: 2vh;
    text-align: center;
}

/*-Projects Container-*/
#projectsContainer{
    /*Visibility*/
    display: grid;
    height:100%;
    overflow-y:auto;
    scrollbar-width: none;
    visibility: hidden;
    opacity: 0;
    /*Grid Position*/
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 3;
    grid-column-end: 4;
    /*Customization*/
    border-radius: 2vh;
    color: #ffffff;
    font-family: verdana;
    font-size: 2vh;
    text-align: center;
}

/*-Socials Container-*/
#socialsContainer{
    /*Visibility*/
    visibility: hidden;
    opacity: 0;
    /*Grid Position*/
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 3;
    grid-column-end: 4;
    /*Customization*/
    border-radius: 2vh;
    color: #ffffff;
    font-family: verdana;
    font-size: 2vh;
    text-align: center;
}

/*-About Me Container-*/
#aboutMeContainer{
    /*Visibility*/
    visibility: hidden;
    opacity: 0;
    /*Grid Position*/
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 3;
    grid-column-end: 4;
    /*Customization*/
    
    border-radius: 2vh;
    color: #ffffff;
    font-family: verdana;
    font-size: 2vh;
    text-align: center;
}