@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Montserrat:400,700");
@import "bootstrap/bootstrap.min.css";
:root {
  --bs-primary-rgb: 76, 166, 210;
  --bs-secondary-rgb: 255, 176, 84;
  --bs-info-bg-subtle: rgb(163, 215, 240);
}

.alert {
  --bs-alert-border-radius: 0;
  --bs-alert-border: 0;
}

/* General */
body {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  margin-top: 88px;
  padding: 0;
  color: #2c3e50;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

a:link, a:visited {
  color: rgb(76, 166, 210);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a.btn-primary:link, a.btn-primary:visited {
  color: #fff;
}

a:hover, a:active, a:focus {
  color: rgb(8, 120, 174);
  text-decoration: none;
}

form label {
  font-weight: 700;
}

.btn {
  transition: all 0.2s ease-in-out;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgb(76, 166, 210);
  --bs-btn-border-color: rgb(76, 166, 210);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(8, 120, 174);
  --bs-btn-hover-border-color: rgb(44, 144, 193);
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(44, 144, 193);
  --bs-btn-active-border-color: rgb(44, 144, 193);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgb(76, 166, 210);
  --bs-btn-disabled-border-color: rgb(76, 166, 210);
}

/* Header */
#main-nav {
  color: #fff;
  font-weight: 700;
}
#main-nav a {
  transition: color 0.2s ease-in-out;
}
#main-nav a:link, #main-nav a:visited {
  color: #fff;
}
#main-nav a:hover, #main-nav a:active, #main-nav a:focus {
  color: rgb(255, 137, 1);
}

.masthead {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.masthead .masthead-avatar {
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  border: 0.5rem solid #fff;
  margin-bottom: 2rem;
}
.masthead .masthead-heading {
  font-size: 2.75rem;
  line-height: 2.75rem;
}

@media (min-width: 992px) {
  #main-nav {
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: padding-top 0.3s, padding-bottom 0.3s;
  }
  #main-nav .navbar-brand {
    font-size: 1.75em;
    transition: font-size 0.3s;
  }
  html.scrolling #main-nav {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  html.scrolling #main-nav .navbar-brand {
    font-size: 1.5em;
  }
  .masthead .masthead-heading {
    font-size: 4rem;
    line-height: 3.5rem;
  }
}
/* Utilities */
.mbgb-primary {
  background: linear-gradient(0deg, rgb(76, 166, 210) 0%, rgb(76, 166, 210) 50%, rgba(255, 255, 255, 0) 50%);
}

.bg-third {
  background-color: rgb(255, 176, 84);
}

.divider-custom {
  margin: 1.25rem 0 1.5rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.divider-custom .divider-custom-line {
  display: inline-block;
  width: 100%;
  max-width: 7rem;
  height: 0.25rem;
  background-color: #2c3e50;
  border-radius: 1rem;
  border-color: #2c3e50;
}
.divider-custom.divider-light .divider-custom-line {
  background-color: #fff;
}
.divider-custom .divider-custom-icon {
  display: inline-block;
  padding: 0 0.5rem;
  font-size: 2rem;
  line-height: 2rem;
}

.cell-tech {
  position: relative;
}
.cell-tech:hover::before {
  content: "+";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgb(255, 176, 84);
  animation: fade-in 0.2s ease-in-out;
  font-weight: 700;
  font-size: 3em;
  padding-top: 0.4em;
  border-radius: var(--bs-border-radius);
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.tech-sprite {
  background-image: url("/static/images/tech-sprite.png");
  background-repeat: no-repeat;
  width: 64px;
  height: 64px;
  display: inline-block;
  vertical-align: middle;
}
.tech-sprite.python {
  background-position: 0 0;
}
.tech-sprite.bootstrap {
  background-position: -64px 0;
}
.tech-sprite.html5 {
  background-position: -128px 0;
}
.tech-sprite.nginx {
  background-position: -192px 0;
}
.tech-sprite.django {
  background-position: 0 -64px;
}
.tech-sprite.vuejs {
  background-position: -64px -64px;
}
.tech-sprite.css3 {
  background-position: -128px -64px;
}
.tech-sprite.sass {
  background-position: -192px -64px;
}
.tech-sprite.javascript {
  background-position: 0 -128px;
}
.tech-sprite.mysql {
  background-position: -64px -128px;
}
.tech-sprite.postgresql {
  background-position: -128px -128px;
}
.tech-sprite.rabbitmq {
  background-position: -192px -128px;
}
.tech-sprite.php {
  background-position: 0 -192px;
}
.tech-sprite.git {
  background-position: -64px -192px;
}
.tech-sprite.docker {
  background-position: -128px -192px;
}
.tech-sprite.mongodb {
  background-position: -192px -192px;
}

/* Footer */
.footer {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: rgb(255, 176, 84);
  background-image: linear-gradient(325deg, rgb(255, 137, 1) 0%, rgb(255, 137, 1) 12%, rgba(255, 255, 255, 0) 12%), linear-gradient(290deg, rgb(255, 137, 1) 0%, rgb(255, 137, 1) 7%, rgba(255, 255, 255, 0) 7%);
  color: #2C90C1;
  z-index: 2;
}

.copyright {
  background-color: rgb(76, 166, 210);
  color: #fff;
  padding: 1rem 0;
  text-align: center;
}

#scroll-top {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgb(76, 166, 210);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  z-index: 3;
  opacity: 0;
}
#scroll-top:hover {
  background-color: rgb(8, 120, 174);
}

html.scrolling #scroll-top {
  opacity: 1;
}

#cookie-consent {
  background-color: rgb(255, 176, 84);
  transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  z-index: 3;
  animation: fade-in 0.5s ease-in-out;
}
#cookie-consent:hover {
  background-color: rgb(255, 137, 1);
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Ho no boy */
.ho-no-boy {
  font-size: 100px;
  transform: rotate(45deg);
  animation: turn 2s infinite;
}
@keyframes turn {
  0% {
    transform: rotate(45deg);
  }
  50% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(45deg);
  }
}

/*# sourceMappingURL=style.css.map */