body {
font-family:'Comfortaa',cursive;
padding-top:54px;
background-color:#e6e6e6;
color:#000
}

* {
box-sizing:border-box
}

/* Style the header: fixed position (always stay at the top) */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100!important;
  width: 100%;
  background-color: #f1f1f1;
}

.navbar  {
z-index: 160;
}

/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 8px;
  background: #76bfef;
  width: 0%;
}

#about {
color:#fff;
background-image:url(../img/pic3.jpg);
height:100%;
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-size:cover
}

#education {
color:#fff;
background-image:url(../img/pic2.jpg);
height:100%;
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-size:cover
}

#interests {
color:#fff;
background-image:url(../img/pic1.jpg);
height:100%;
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-size:cover
}

hr.line1 {
border-top:4px solid #fff;
border-radius:2px
}

hr.line2 {
border-top:2px solid #fff;
border-radius:1px
}

hr.line3 {
border-top:4px solid #000;
border-radius:2px
}

.dark-layer {
background-color:rgba(0,0,0,0.7);
border-radius:15px;
padding:10px
}

.weight700 {
font-weight:700
}

.h1-color-1 {
color:#000
}

.h1-color-2 {
color:#1367a0!important
}

.underline {
text-decoration:underline
}

h1 {
font-size:6rem;
line-height:5.5rem
}

h2 {
font-size:3.5rem
}

h3 {
font-size:2rem
}

p.lead {
font-size:1.5rem;
font-weight:400
}

.subheading {
font-weight:500;
font-size:1.5rem
}

.language-text {
font-size:1.5rem;
font-family:'Comfortaa',cursive
}

.social-icons a {
display:inline-block;
height:3.5rem;
width:3.5rem;
background-color:#495057;
color:#fff!important;
border-radius:100%;
text-align:center;
font-size:1.5rem;
line-height:3.5rem;
margin-right:1rem
}

.social-icons a:last-child {
margin-right:0
}

.social-icons a:hover {
background-color:#1367a0
}

.dev-icons {
font-size:3rem
}

.dev-icons .list-inline-item i:hover {
color:#1367a0
}

#sideNav .navbar-nav .nav-item .nav-link {
font-weight:800;
letter-spacing:.05rem;
font-size:1.5rem
}

#sideNav .navbar-toggler:focus {
outline-color:#d48a6e
}

.skill-container {
width:100%;
height:30px;
background-color:#ccc;
margin:10px 0
}

.skills {
text-align:right;
padding:5px;
color:#fff;
height:30px
}

.html {
width:90%;
background-color:#e34f26
}

.css {
width:80%;
background-color:#1B73BA
}

.openai {
width:75%;
background-color:#000
}

.Bootstrap {
width:90%;
background-color:#1B73BA
}

.php {
width:90%;
background-color:#8892be
}

.wordpress {
width:90%;
background-color:#00749c
}

.mysql {
width:90%;
background-color:#00758f
}

.javascript {
width:75%;
background-color:#f7df1e
}

.jquery {
width:75%;
background-color:#7acef4
}

.sass {
width:60%;
background-color:#CD6799
}

.cd-top {
display:inline-block;
height:40px;
width:40px;
position:fixed;
bottom:40px;
right:10px;
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.05);
box-shadow:0 0 10px rgba(0,0,0,0.05);
overflow:hidden;
text-indent:100%;
white-space:nowrap;
background:rgba(95,180,236,0.8) url(../img/cd-top-arrow.svg) no-repeat center 50%;
visibility:hidden;
opacity:0;
-webkit-transition:opacity .3s 0s,visibility 0 .3s,background-color .3s 0;
transition:opacity .3s 0s,visibility 0 .3s,background-color .3s 0
}

.cd-top.cd-top--show,.cd-top.cd-top--fade-out,.cd-top:hover {
-webkit-transition:opacity .3s 0s,visibility 0 0s,background-color .3s 0;
transition:opacity .3s 0s,visibility 0 0s,background-color .3s 0
}

.cd-top.cd-top--show {
visibility:visible;
opacity:1
}

.cd-top.cd-top--fade-out {
opacity:.5
}

.cd-top:hover {
background-color:#1367a0;
opacity:1
}

@media only screen and (min-width: 768px) {
.cd-top {
right:20px;
bottom:20px
}
}

@media only screen and (min-width: 1024px) {
.cd-top {
height:60px;
width:60px;
right:30px;
bottom:30px
}
}

@media (min-width: 992px) {
#sideNav {
text-align:center;
position:fixed;
top:0;
left:0;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
width:17rem;
height:100vh
}

#sideNav .navbar-brand {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
margin:auto auto 0;
padding:.5rem
}

#sideNav .navbar-brand .img-profile {
max-width:10rem;
max-height:10rem;
border:.5rem solid rgba(255,255,255,0.4)
}

#sideNav .navbar-collapse {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:start;
-ms-flex-align:start;
align-items:flex-start;
-webkit-box-flex:0;
-ms-flex-positive:0;
flex-grow:0;
width:100%;
margin-bottom:auto
}

#sideNav .navbar-collapse .navbar-nav {
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
width:100%
}

#sideNav .navbar-collapse .navbar-nav .nav-item {
display:block
}

#sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
display:block
}
}

section.resume-section {
padding-top:5rem!important;
padding-bottom:5rem!important;
max-width:100rem
}

section.resume-section .resume-item .resume-date {
min-width:none
}

@media (min-width: 768px) {
section.resume-section {
min-height:100vh
}

section.resume-section .resume-item .resume-date {
min-width:18rem
}
}

@media (min-width: 992px) {

section.resume-section {
padding-top:3rem!important;
padding-bottom:3rem!important
}
}

.bg-primary {
background-color:#1367a0!important
}

.text-primary-1 {
color:#fff!important;
font-size:1.2rem;
text-decoration:underline
}

.text-primary-2 {
color:#1367a0!important;
font-size:1.2rem;
text-decoration:underline
}

a {
color:#1367a0
}

a:hover,a:focus,a:active {
color:#007bff
}

@media (max-width: 991px) {
.header {
top: 56px;
}
}

@media (max-width: 767px) {
h2 {
font-size:2rem;
font-weight:700
}

#sideNav .navbar-nav .nav-item .nav-link {
font-size:1rem
}
}

@media (max-width: 576px) {
h2 {
font-size:1.25rem;
font-weight:700
}

h3 {
font-size:1.25rem
}

p.lead {
font-size:1.2rem
}
}

@media (min-width: 992px) {
body {
padding-top:0;
padding-left:17rem
}
}