body{
    font-family: Helvetica;
    margin: 0;
    width: 100%;
    background-color: #262626;
    color: rgb(231, 231, 231);
}


a.btnAbtMe{
    padding: 10px;
    border-style: solid;
    border-color: black;
    color: black;
    border-radius: 30px;
    text-decoration: none;
}
a.btnProjects{
    padding: 10px;
    border-style: solid;
    border-color: black;
    color: black;
    border-radius: 30px;
    text-decoration: none;
}

a.btnPhoto{
    padding: 10px;
    border-style: solid;
    border-color: black;
    color: black;
    border-radius: 30px;
    text-decoration: none;
}

a.btnFun{
    padding: 10px;
    border-style: solid;
    border-color: black;
    color: black;
    border-radius: 30px;
    text-decoration: none;
}

a.btnContact{
    padding: 10px;
    border-style: solid;
    border-color: black;
    color: black;
    border-radius: 30px;
    text-decoration: none;
}

/* Default NavBar */

.NavBar{
    padding: 10px 0;
    padding-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    border: none;
    background-color: #161616;
    align-items: center;
    display: flex;
}
@media (max-aspect-ratio: 3/4){
    .NavBar{
        display: flex;
    }
}
.NavDivider {
    padding: 0px;
    margin: 0px;
    border: none;
    &:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    max-width: 100%;
    width: 100%;
    border: 1px solid #414141;
  }
}
.NavName{
    font-family: Helvetica;
    display: inline-block;
    vertical-align: middle;
    margin: 15px;
}

.NavImage{
    height: 65px;
    width: 65px;
    display: inline-block;
    vertical-align: middle;
    margin: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
}


.VerticalDivider{
    display: inline-block;
    vertical-align: middle;
    border-left: 1px solid white;
    height: 60px;
    margin-left: 20px;
    margin-right: 20px;
}

@media (max-aspect-ratio: 3/4){
    .VerticalDivider{
        visibility: hidden;
        position: absolute;
    }
}
.NavLinks{
        display: flex;
    vertical-align: middle;
    margin-left: 10px;
    flex-wrap: wrap;
    flex-direction: row;
}
@media (max-aspect-ratio: 3/4){
.NavLinks{
    display: grid;
    justify-items: center;
}
}
.NavLink{
    font-family: Helvetica;
    display: inline-block;
    vertical-align: middle;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 15px;
    margin-right: 15px;
    text-decoration: none;
    color: rgb(231, 231, 231);
    background-color: #00000000;
    border-radius: 5px;
}

.NavLink:hover{
    text-decoration: none;
    color: #696969;
    background-color: #3d3d3d;
}



/* index */
.index-bigboi-photo-container{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: -1;
}
.index-bigboi-photo{
    object-fit: cover;
    z-index: -1;
    width: 100%;
    
}
/* end of index */

.external-link{
    text-decoration: none;
    font-weight: bold;
    color: rgb(49, 186, 51);
}
.external-link:hover{
    color: rgb(43, 152, 45);
    text-decoration:underline
}

.Welcome-Container{
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: start;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    max-height: 300px;
    background-color: #25252596;
    border-radius: 20px;
}

.Welcome{
    margin-left: 30%;
    margin-right: 30%;
}

.Welcome-link{
    text-decoration: none;
    color: rgb(231, 231, 231);
    border-radius: 5px;
    padding: 20px;

    margin-left: 12%;
    margin-right: 12%;
    margin-top: 10px;
    margin-bottom: 20px;
    transition: all 0.5s ease;    
}

.Welcome-link:hover{
    color: rgb(199, 199, 199);
    background-color: #0000003d;
}