@font-face{font-family:'Varela'; src: url('../font/VarelaRound-Regular.ttf');}
@font-face{font-family:'Roboto'; src: url('../font/Roboto-Regular.ttf');}
@font-face{font-family:'Lobster'; src: url('../font/Lobster-Regular.ttf');}
@font-face{font-family:'Source'; src: url('../font/SourceSansPro-Regular.ttf');}

:root {
    --c1 : #7395AE;
    --c2 : #557A95;
    --c3 : #4a4a48;
    --c4 : #f6f6f6;
}
nav, footer {background-color:var(--c1);}
body {background-color:var(--c4);}
#home, #work, .tag-educ {background-color:var(--c2);}
.btn:hover {background-color:white;}
.nav-btn, .btn {background-color:transparent;}

.title-home, .subtitle-home, .text-home, .nav-btn, .rights, .btn, #work, .tag-educ, a, #work hr{color:white;}
body, .tag-contact p, .tag-contact a{color:var(--c3);}
.nav-btn:hover, .btn:hover, .nav-btn a:hover, .tag-cert a {color:var(--c2);}

.nav-btn, .text-home, .title-section {font-family:'Varela';}
.logo {font-family:'Lobster';}
.title-home, .subtitle-home, .tag-skill, .tag-exp, .info-project, .tag-project, .tag-contact p, .rights {font-family:'Source';}
.subtitle-section, .text-section, .btn, .tag-educ, .tag-cert, .date-project, .skill-title {font-family:'Roboto';}

.rights, #contact .title-section {text-align:center;}
.logo, .nav-btn a {text-decoration:none;}

.parallax {background-attachment:fixed; background-position:center; background-repeat:no-repeat; background-size:cover;}
.img-1 {background-image:url('../img/07.png');}
.img-2 {background-image:url('../img/06.png');}

* {margin: 0px; padding:0px; box-sizing:border-box; outline:none; z-index:1;}
html{scroll-behavior: smooth;}
header{position:sticky; position:-webkit-sticky; top:0; z-index:2;}
article {position:relative; width:100%; height:cover;}
footer {position:relative;}

nav {display:flex; padding:2%;}
.container-logo {flex:1 1 auto;}
.nav-links {flex:2 1 auto; display:flex; list-style:none;}
.nav-item {flex:1;}
.nav-btn, .nav-btn a {border:none; cursor:pointer;transition:all 0.2s ease-in-out;}
.btn-container {text-align:center;}
.btn {border: 2px solid white; cursor:pointer; text-decoration:none; font-weight:bold; transition:all 0.2s ease-in-out;}

.skill-title {padding-bottom:3%;}
.tag-skill {padding:1%;}
.skill {margin:1%;}