/* :root {
  --primary-color: #1B262C;
  --secondary-color: #3282B8;
  --third-color: #0F4C75;
  --primary-background: #BBE1FA;
  --secondary-background: #A8D8EA;
  --header:#A8D8EA;
  --dark: black;
  --light: #BBE1FA;

  --primary-color: #8174A0;
  --secondary-color: #EFB6C8;
  --third-color: #A888B5;
  --primary-background: #FFECC8;
  --secondary-background: #FFDFDF;
  --header:#FFDFDF;
  --dark: black;
  --light: #FFDFDF;
} */

.light-mode {
  --primary-color: #8174A0;
  --secondary-color: #EFB6C8;
  --third-color: #A888B5;
  --primary-background: #FFECC8;
  --secondary-background: #FFDFDF;
  --header:#FFDFDF;
  --dark: black;
  --light: #FFDFDF;
}

.dark-mode {
  --primary-color: #1B262C;
  --secondary-color: #3282B8;
  --third-color: #0F4C75;
  --primary-background: #FFECC8;
  --secondary-background: #A8D8EA;
  --header:#A8D8EA;
  --dark: black;
  --light: #BBE1FA;
}

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--primary-background);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  background-color: var(--header);
}

.hero {
  padding-top: 75px;
}

.hero-small-text {
  color: var(--light);
  font-weight: 400;
}

.gradient-background {
  background: linear-gradient(300deg, var(--primary-background), var(--secondary-color), var(--primary-color));
  background-size: 125% 105%;
}

.gradient-background-1 {
  background-color: var(--primary-background);
}

.my-nav-link{
  color: var(--primary-color);
  font-weight: bold;
}

.my-nav-link:hover {
  color: var(--secondary-color);
  font-weight: bold;
}

.my-active {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  font-weight: bold;
}

.my-active:hover {
  color: var(--primary-background);
  background-color: var(--third-color);
  font-weight: bold;
}

.hero-text {
  color: var(--light);
}

.name {
  color: var(--secondary-color);
}

.btn-primary:hover, .btn-primary:active{
  background-color: var(--secondary-background) !important;
  color: var(--primary-color);
  border-color: var(--secondary-background) !important;
}

.btn-primary{
  background-color: var(--secondary-color);
  color: var(--primary-color);
  border-color: var(--secondary-color);
}

.profile-background {
  position: absolute;
}

.my-project-container {
  padding-top: 75px;
}

.project-img {
  object-fit: cover;
}

.border-bottom {
  color: var(--light);
  border-bottom-color: var(--primary-background) !important;
}

.project-card {
  list-style: none;
  padding: 0;
  color: var(--dark);
}

.text-body-secondary{
  color: var(--dark) !important;
}

.card-body {
  padding-left: 0px;
  padding-right: 0px;
}

.btn-outline-secondary {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.btn-outline-secondary:hover {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
}

.project-name {
  color: var(--primary-color) !important;
}

.my-card {
  padding: 20px;
  border-color: var(--primary-background);
  height: 100%;
}

.my-about {
  padding-top: 75px;
}

.my-about-container {
  background-color: #00000000 !important;
  border: 10px dashed var(--primary-background);
}

.about-title {
  color: var(--primary-color) !important;
}

.about-text {
  color: var(--dark) !important;
}

.my-quote {
  padding-bottom: 50px;
}

.hobbies-container {
  padding-top: 25px;
  position: relative;
}

.hobbies-bg {
  position: absolute;
  border-radius: 10px;
  border: 2px solid var(--primary-background);
}

.hobbies-bg-1 {
  top: 18%;
  left: 16%;
  z-index: -1;
  height: 220px;
  width: 220px;
}

.hobbies-bg-2 {
  top: 25%;
  left: 30%;
  z-index: 0;
  height: 120px;
  width: 470px;
}

.hobbies-bg-3 {
  top: -8%;
  left: 68%;
  z-index: -1;
  height: 320px;
  width: 170px;
}

.hobbies-bg>rect {
  opacity: 0;
}

.footer-container {
  position: relative;
  width: 100%;
  height: 400px;
}

.footer-background {
  width: 100%;
  height: 250px;
  position: absolute;
  top: 45%;
  z-index: -1;
  background-color: var(--primary-color);
}

.contact-container {
  padding-top: 50px !important;
}

.contact-box {
  background: linear-gradient(185deg, var(--third-color), var(--secondary-color));
  background-size: 180% 180%;
}

.contact-box h2 {
  color: var(--primary-background) !important;
}

.contact-box p {
  font-size: 1rem;
  color: var(--primary-background);
  font-weight: 400;
}

.gmail {
  color: var(--dark);
}

.media-container {
  background-color: var(--secondary-background);
  font-size: 1rem;
  padding: 5px 20px 5px 5px !important;
  color: black;
  text-decoration: none;
}

.tech-skill-container {
  background-color: var(--secondary-color);
  font-size: 1rem;
  padding: 10px !important;
  color: var(--primary-color);
  font-weight: 450;
}

.front {
  position: relative;
  z-index: 1;
}

@media (max-width: 990px) {
  .hobbies-bg-1 {
    top: 16%;
    left: 16%;
  }

  .hobbies-bg-2 {
    top: 45%;
    left: 8%;
  }

  .hobbies-bg-3 {
    top: 52%;
    left: 65%;
  }
}

@media (max-width: 765px) {
  .hobbies-bg-1 {
    top: 16%;
    left: 16%;
  }

  .hobbies-bg-2 {
    top: 42%;
    left: 8%;    
    width: 370px;
  }

  .hobbies-bg-3 {
    top: 52%;
    left: 65%;
    width: 165px;
  }
}

@media (max-width: 475px) {
  .hobbies-bg-1 {
    top: 16%;
    left: -5%;
  }

  .hobbies-bg-2 {
    top: 42%;
    left: -4%;    
    width: 275px;
  }

  .hobbies-bg-3 {
    top: 50%;
    left: 65%;
    width: 100px;
  }

  .nav-link {
    padding: 8px 10px;
  }
}