* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-size:14px;
    list-style-type: none;
}

body{
    display: flex;
    flex-direction: row;
    color: #fff;
}
/*Navigation*/
.nav-button{
    position: absolute;
    top: 50%;
    font-size: 2rem !important;
    cursor: pointer;
    display: none !important;
    transition: opacity 2s ease-in-out, display 2s ease-in-out allow-discrete;
}

#toBusiness{
    left: 2rem;
}

#toCasual{
    right: 2rem;
}

.active-nav{
    display: block !important;
    opacity: 1;
}

@starting-style{
    .active-nav{
        opacity: 0;
    }
}
/*Fotos*/
#business-foto {
    background-image: url("./images/business-foto.jpg");
}

#casual-foto {
    background-image: url("./images/casual-foto.jpg");
}

.foto{
    height: 100vh;
    background-size: cover;
    width: 0;
    transition: width 2s ease-in-out;
}

.active-foto{
    width: min(50vw, 990px);
}
/*Main Content*/
main{
    height: 100vh; 
    width: calc(100vw - min(50vw, 990px));
    background-color: #1B1B25;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    justify-content: flex-start;
    overflow-y: scroll;
    padding-bottom: 2.5rem;
}
/*Semi-Static Content*/
header{
    position: sticky;
    top: 0;
    background-color: #1B1B25;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
}

h1 {
    font-size: 3.5rem;
}

.title{
    font-size: 1.5rem;
    opacity: 0;
    display: none;
    transition: opacity 2s ease-in-out, display 2s ease-in-out allow-discrete;
}

.active-title{
    display: block;
    opacity: 1;
}

@starting-style{
    .active-title{
        opacity: 0;
    }
}

#contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .5rem
}

#contact > a {
    text-decoration: none;
    color: #fff;
}

#contact > a:visited {
    text-decoration: none;
    color: #fff;
}

hr{
    width: 75%;
    border:#fff solid 1px;
    align-self: center;
}
/*Content Container*/
.content{
    text-align: center;   
    width: 75%;
    opacity: 0;
    display: none;
    flex-direction: column;
    gap: 1.5rem;
    transition: opacity 2s ease-in-out, display 2s ease-in-out allow-discrete;
}

.active-content{
    display: flex;
    opacity: 1;
}

@starting-style{
    .active-content{
        opacity: 0;
    }
}

h3{
    text-align: start;
    font-size: 1.25rem
}
#profile{
    font-size: 1.125rem;
    line-height: 2rem;
}

#techstack{
    display: grid;
    grid-template-areas: "header header header header header header header"
                         "lang frame arch test tools dbs web";
    gap: 1rem;                     
}

.tech-header{
    grid-area: header;
}

.tech-lang{
    grid-area: lang;
    display: grid;
    grid-template-rows: 1.5rem auto auto;
    grid-template-areas: "lang-h lang-h"
                         "lang-k lang-j"
                         "lang-t lang-c";
    gap: .25rem                    
}
.lang-header{
    grid-area: lang-h;
}
.lang_logo{
    height: 30px;
}

.tech-frame{
    grid-area: frame;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    align-items: center;
}
.frame_logo{
    width: 30px;
}

.tech-tools{
    grid-area: tools;
    display: grid;
    grid-template-rows: 1.5rem auto auto auto;
    grid-template-areas: "tools-h tools-h"
                         "tools-git tools-ci"
                         "tools-gradle tools-android"
                         "tools-intelliJ none";
    gap: .25rem
}
.tools-header{
    grid-area: tools-h;
}
.tools_logo{
    width: 30px;
}

.tech-dbs{
    grid-area: dbs;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    align-items: center;
}
.db_logo{
    width: 30px;
}

.tech-web{
    grid-area: web;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    align-items: center;
}
.web_logo{
    width: 30px;
}

#experience{
    display: flex;
    flex-direction: column;
    gap: 1rem
}
h4 {
    align-self: flex-start;
}
h4 > a {
    text-decoration: none;
    color: #fff;
}

h4 > a:visited {
    text-decoration: none;
    color: #fff;
}

#projects{
    display: flex;
    flex-direction: column;
    gap: 1rem
}

#education{
    display: flex;
    flex-direction: column;
    gap: 1rem
}

#certificates{
    display: flex;
    flex-direction: column;
    gap: 1rem
}

#languages{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem
}

.lang-desc{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .75rem
}
.flag{
    height:1.75rem;
}

#additional-exp{
    display: flex;
    flex-direction: column;
    gap: 1rem
}