/* ============ GLOBAL CUSTOM PROPERTIES ============  */

:root {
  /* Nicer than default sans-serif font */
  --sans-serif: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif;

  /* Color variables */
  --black-000: #000;
  --white-000: #fff;

  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;

  --blue-100: #cfe2ff;
  --blue-200: #9ec5fe;
  --blue-300: #6ea8fe;
  --blue-400: #3d8bfd;
  --blue-500: #0d6efd;
  --blue-600: #0a58ca;
  --blue-700: #084298;
  --blue-800: #052c65;
  --blue-900: #031633;

  --indigo-100: #e0cffc;
  --indigo-200: #c29ffa;
  --indigo-300: #a370f7;
  --indigo-400: #8540f5;
  --indigo-500: #6610f2;
  --indigo-600: #520dc2;
  --indigo-700: #3d0a91;
  --indigo-800: #290661;
  --indigo-900: #140330;

  --purple-100: #e2d9f3;
  --purple-200: #c5b3e6;
  --purple-300: #a98eda;
  --purple-400: #8c68cd;
  --purple-500: #6f42c1;
  --purple-600: #59359a;
  --purple-700: #432874;
  --purple-800: #2c1a4d;
  --purple-900: #160d27;

  --pink-100: #f7d6e6;
  --pink-200: #efadce;
  --pink-300: #e685b5;
  --pink-400: #de5c9d;
  --pink-500: #d63384;
  --pink-600: #ab296a;
  --pink-700: #801f4f;
  --pink-800: #561435;
  --pink-900: #2b0a1a;

  --red-100: #f8d7da;
  --red-200: #f0bac0;
  --red-250: #f0bac0;
  --red-300: #ea868f;
  --red-400: #e35d6a;
  --red-500: #dc3545;
  --red-600: #b02a37;
  --red-700: #842029;
  --red-800: #58151c;
  --red-900: #2c0b0e;

  --orange-100: #ffe5d0;
  --orange-200: #fecba1;
  --orange-300: #feb272;
  --orange-400: #fd9843;
  --orange-500: #fd7e14;
  --orange-600: #ca6510;
  --orange-700: #984c0c;
  --orange-800: #653208;
  --orange-900: #331904;

  --yellow-100: #fff3cd;
  --yellow-200: #ffe69c;
  --yellow-300: #ffda6a;
  --yellow-400: #ffcd39;
  --yellow-500: #ffc107;
  --yellow-600: #cc9a06;
  --yellow-700: #997404;
  --yellow-800: #664d03;
  --yellow-900: #332701;

  --green-100: #d1e7dd;
  --green-200: #a3cfbb;
  --green-300: #75b798;
  --green-400: #479f76;
  --green-500: #198754;
  --green-600: #146c43;
  --green-700: #0f5132;
  --green-800: #0a3622;
  --green-900: #051b11;

  --teal-100: #d2f4ea;
  --teal-200: #a6e9d5;
  --teal-300: #79dfc1;
  --teal-400: #4dd4ac;
  --teal-500: #20c997;
  --teal-600: #1aa179;
  --teal-700: #13795b;
  --teal-800: #0d503c;
  --teal-900: #06281e;

  --cyan-100: #cff4fc;
  --cyan-200: #9eeaf9;
  --cyan-300: #6edff6;
  --cyan-400: #3dd5f3;
  --cyan-500: #0dcaf0;
  --cyan-600: #0aa2c0;
  --cyan-700: #087990;
  --cyan-800: #055160;
  --cyan-900: #032830;

  --ontrend-100: #fff4d9;
  --ontrend-200: #fdd0bb;
  --ontrend-300: #fea8b3;
  --ontrend-400: #7dcfe7;
  --ontrend-500: #0b6655;
  --ontrend-600: #400c3e;
  --ontrend-700: #2c4763;
  --ontrend-800: #1f364d;
  --ontrend-900: #0e2439;

  --global-font: var(--sans-serif);
  --drop-shadow: var(--gray-500);
  --img-border: var(--gray-700);
}

/* Global font */
body {
  font-family: 'Nunito', sans-serif
}

/* HEADER */
header.hero-block {
  background-color: #fff
}

header.hero-block h1 {
  color: #000
}

header.hero-block h2 {
  color: #000
}

header.hero-block a.btn-primary:link,
header.hero-block a.btn-primary:visited {
  color: #000;
  background-color: #f7d6e600;
  border-color: #000
}

header.hero-block a.btn-primary:focus,
header.hero-block a.btn-primary:hover,
header.hero-block a.btn-primary:active {
  color: #000;
  background-color: #a3eeb16c;
  border-color: #000
}

header.hero-block a.btn-secondary:link,
header.hero-block a.btn-secondary:visited {
  color: #000;
  background-color: #f7d6e600;
  border-color: #000
}

header.hero-block a.btn-secondary:focus,
header.hero-block a.btn-secondary:hover,
header.hero-block a.btn-secondary:active {
  color: #000;
  background-color: #a3eeb16c;
  border-color: #000
}


/* PROJECTS */

.theme-one .col-1 h2 {
  color: #000;
}

.theme-one .col-1 h3 {
  color: #212529;
  padding-bottom: 30px;
  font-weight: 500;
}

.theme-one .col-1 h4 {
  color: #000;
  font-size: x-large;
  font-weight: 300;
}

.theme-one .col-3 h3 {
  color: #000
}

.theme-one .col-3 h3 a:link {
  color: #002564b5
}

.theme-one .col-3 p {
  color: #212529;
  font-weight: 500;
}

.theme-one .col-3 li {
  color: #002564b5
}

.theme-one {
  background-color: #fff
}

.theme-one a.btn-primary:link,
.theme-one a.btn-primary:visited {
  border-color: #000;
  background-color: #f7d6e600;
  color: #000
}

.theme-one a.btn-primary:focus,
.theme-one a.btn-primary:hover,
.theme-one a.btn-primary:active {
  border-color: #000;
  background-color: #d6eef76c;
  color: #000
}

/* FOOTER */

footer {
  background-color: #32b55cd4
}

footer h3 {
  color: #000;
  font-style: italic;
  font-size: x-large;
  font-weight: 300;
}

footer ul.footer-links li a:link,
footer ul.footer-links li a:visited {
  color: #000;
  text-decoration-color: #000;
  font-size: medium;
}

footer p.privacy a:link,
footer p.privacy a:visited {
  color: #000;
  text-decoration-color: #000;
  font-size: medium;
  text-decoration: none;
}

footer ul.footer-links li a:focus,
footer ul.footer-links li a:hover,
footer ul.footer-links li a:active {
  color: #212529;
  text-decoration-color: #212529;
  font-size: medium;
}

footer p.privacy a:focus,
footer p.privacy a:hover,
footer p.privacy a:active {
  color: #212529;
  text-decoration-color: #212529;
  font-size: medium;
  text-decoration: none;
}

footer ul.footer-icons li a:link i,
footer ul.footer-icons li a:visited i {
  color: #000
}

footer ul.footer-icons li a:focus i,
footer ul.footer-icons li a:hover i,
footer ul.footer-icons li a:active i {
  color: #212529
}

/* CONTACT */

.container-contact-form {
  background-color: #fff
}

#contact-form {
  background-color: #00256400
}

#contact-form h2 {
  color: #000
}

#contact-form p {
  color: #000
}

#contact-form p a:link {
  color: #002564b5;
}

#contact-form p a:visited {
  color: #000
}

#contact-form p a:focus {
  color: #000
}

#contact-form p a:hover {
  color: #000
}

#contact-form p:active {
  color: #000
}

#contact-form label {
  color: #000
}

#contact-form [type="text"] {
  background-color: #f0cfd300
}

#contact-form [type="email"] {
  background-color: #f0cfd300
}

#contact-form textarea {
  background-color: #f0cfd300
}

#contact-form #btn-submit {
  color: #000
}

#contact-form #btn-submit:focus {
  color: #000
}

#contact-form #btn-submit:hover {
  color: #000
}

#contact-form #btn-submit {
  background-color: #f0cfd300
}

#contact-form #btn-submit:focus {
  background-color: #cfe0f09d
}

#contact-form #btn-submit:hover {
  background-color: #cfdbf0db
}

#contact-form #btn-submit {
  border-color: #000
}

#contact-form #btn-submit:focus {
  border-color: #000
}

#contact-form #btn-submit:hover {
  border-color: #000
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  background-color: #fff;
  color: #000;
  opacity: 0.5;
  /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  background-color: #fff;
  color: #000;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  background-color: #fff;
  color: #000;
}

@media (max-width: 767px) {
  .hero-block h1 {
    letter-spacing: 0px;
  }
}

.hero-block h1 {
  font-size: calc(46px + (72 - 46) * ((100vw - 320px) / (1920 - 320)));
  margin-bottom: 24px;
}

/* Nav Bar */

.container-menu.menu-desktop {
  background-color: #32b55cd4
}

.container-menu.menu-mobile {
  background-color: #32b55cd4
}

.container-menu.menu-mobile ul.mobile-display {
  background-color: #32b55cd4
}

.container-menu a:link,
.container-menu a:visited {
  color: #000
}

.container-menu a:focus,
.container-menu a:hover,
.container-menu a:active {
  color: #afd6bc
}

.container-menu a#btn-cta:link,
.container-menu a#btn-cta:visited {
  background-color: #32b55cd4;
  border-color: #32b55cd4;
  color: #000
}

.container-menu a#btn-cta:focus,
.container-menu a#btn-cta:hover,
.container-menu a#btn-cta:active {
  background-color: #80cd99;
  border-color: #80cd99;
  color: #afd6bc
}

/* Skills section */

.top {
  margin: 50px 0px 30px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top h1 {
  margin-bottom: 50px;
  font-weight: 300;
}

.skills {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 500px;
}

.skills p {
  font-size: 15px;
  font-family: 'karla';
}

.skills div {
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px;
}

.separation {
  position: relative;
  left: 25%;
  background-image: linear-gradient(0deg, #000000, #000);
  width: 50%;
  height: 1px;
}