@import url(https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Saira+Extra+Condensed:wght@500;700&display=swap);

div.contactInfo,
h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase
}

.underlineEffect,
a,
a.portfolio {
  text-decoration: none
}

:root {
  --navbarFontType: "M PLUS Rounded 1c", sans-serif;
  --navbarFontColor: #ffffff;
  --principalFont: "M PLUS Rounded 1c", sans-serif;
  --principalFontSize: 3rem;
  --principalFontColor: #000000;
  --principalFontBorderColor: 2px #bd5d38;
  --secondaryFont: "Saira Extra Condensed", sans-serif;
  --secondaryFontColor: #2b3035;
  --secondaryFontSize: 1.4rem
}

a#github,
nav.navbar-dark-custom {
  background-color: #000
}

li>a.nav-link.js-scroll-trigger {
  margin: 0
}

.navbar-dark .navbar-nav .nav-link {
  font-family: var(--principalFont);
  color: #fff !important;
  padding: .5rem 1rem;
  margin-left: 0;
  transition: transform .35s
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #bd5d38 !important;
  -webkit-text-stroke: 0.5px #fff;
  transform: scale(1.25)
}

.nav-link {
  display: inline-block;
  margin-left: .9rem
}

.nav-link:hover {
  transform: scale(1.5)
}

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

  #sideNav {
    width: 17rem;
    height: 100vh
  }

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

  #sideNav .navbar-brand .img-profile {
    max-width: 10rem;
    max-height: 10rem;
    border: .4rem solid #fff;
    padding: .3rem
  }

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

  #sideNav .navbar-collapse .navbar-nav {
    flex-direction: column;
    width: 100%
  }

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

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(189, 93, 56, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.custom-toggler {
  border: 2px solid #bd5d38;
  border-radius: 4px
}

.custom-toggler:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9)
}

section.resume-section {
  display: flex;
  align-items: center;
  padding: 5rem 1rem;
  max-width: 75rem
}

.underlineEffect:hover::after,
section.resume-section .resume-section-content {
  width: 100%
}

a.socialIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  width: 3.5rem;
  color: #fff;
  border-radius: 50%;
  font-size: 2.2rem;
  margin-right: 2.25rem;
  transition: .2s ease-in-out
}

.dev-icons,
a.portfolio {
  display: inline-block
}

a.socialIcon:last-child {
  margin-right: 0
}

a.socialIcon:hover {
  transform: scale(1.25)
}

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

a#github:hover {
  box-shadow: 0 0 55px 10px #333
}

a#linkedin {
  background-color: #0a66c2
}

#linkedin:hover {
  box-shadow: 0 0 55px 10px #0a66c2
}

a#whatsapp {
  background-color: #25d366
}

.underlineEffect::after,
a#mail {
  background-color: #bd5d38
}

a#whatsapp:hover {
  box-shadow: 0 0 55px 10px #25d366
}

a#mail:hover {
  box-shadow: 0 0 55px 10px #bd5d38
}

h1.headingTitle {
  font-family: var(--principalFont);
  font-size: var(--principalFontSize);
  color: #000;
  -webkit-text-stroke: 2px #bd5d38
}

span.subHeadingTitle {
  color: #bd5d38;
  -webkit-text-stroke: 2px #000
}

div.contactInfo {
  font-family: var(--secondaryFont);
  color: #000;
  font-size: 1.5rem
}

@media (max-width:481px) {
  a.socialIcon {
    height: 3.5rem;
    width: 3.5rem;
    font-size: 2.2rem;
    margin-right: .5rem
  }

  div.contactInfo {
    font-size: 1.25rem
  }
}

@media (max-width:360px) {
  div.contactInfo {
    font-size: 1.1rem
  }
}

h2.sectionTitle {
  font-family: var(--principalFont);
  font-size: 2.5rem;
  color: var(--principalFontColor);
  -webkit-text-stroke: var(--principalFontBorderColor)
}

h3.sectionSubTitle,
li.subHeading {
  font-family: var(--secondaryFont)
}

h3.sectionSubTitle {
  font-size: 1.5rem;
  color: #000
}

li.subHeading {
  font-size: 1.3rem;
  color: var(--secondaryFontColor);
  text-transform: none
}

small.place {
  font-style: italic;
  font-size: 1.2rem;
  color: #343a40;
  font-weight: 200
}

span.date {
  font-weight: 500;
  color: #bd5d38 !important;
  font-size: .9rem
}

li.mb-2>span.mySkills,
p.portDetail {
  color: #343a40
}

ul.list-inline>li.list-inline-item.dev-icons {
  font-size: 3.5rem
}

li.dev-icons>span {
  display: block;
  font-size: .8rem;
  margin-top: 4px;
  color: #000;
  text-align: center
}

li.dev-icons:not(:last-child) {
  text-align: center;
  margin-right: 2rem !important
}

.html-icon,
li.list-inline-item.dev-icons>.fa-html5 {
  color: #f06529
}

.css-icon,
li.list-inline-item.dev-icons>.fa-css3-alt {
  color: #2965f1
}

.bootstrap-icon,
li.list-inline-item.dev-icons>.fa-bootstrap {
  color: #563d7c
}

.js-icon,
li.list-inline-item.dev-icons>.fa-js-square {
  color: #f0db4f
}

.wordpress-icon,
li.list-inline-item.dev-icons>.fa-wordpress {
  color: #096484
}

.vuejs-icon,
li.list-inline-item.dev-icons>.fa-vuejs {
  color: #42b883
}

.dev-icons {
  position: relative;
  transition: .3s
}

.dev-icons:hover {
  transform: translateY(-15px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2)
}

.json-icon,
.linux-icon,
li.list-inline-item.dev-icons>.fa-brackets-curly,
li.list-inline-item.dev-icons>.fa-linux {
  color: #000
}

.npm-icon,
li.list-inline-item.dev-icons>.fa-npm {
  color: #cb3837
}

.fa-check {
  color: #bd5d38
}

p.portDetail {
  font-style: italic;
  font-size: .85rem
}

a.portDetailLink {
  font-size: .75rem !important;
}

.underlineEffect {
  position: relative;
  color: #bd5d38
}

.underlineEffect::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  transition: width .5s ease-in-out
}

.language-indicators i,
.language-indicators span {
  margin-right: 5px
}

.languageIconSize {
  font-size: 2rem;  
}

.languageIconSize:not(:last-child) {
  padding-right: .5rem;
}

.sass-icon {
  color: #cf649a
}

.react-icon {
  color: #61dbfb;
}

.expo-icon {
  display: inline-block !important;
  width: 30px;
  height: 30px;
  background-image: url(../assets/img/expo-icon.png); 
}