@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=MonteCarlo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');


:root {
    --dark-navy: #f5e5ce;
    --lightest-navy: #4c2b15;
    --navy-shadow: #4c2b15;
    --dark-slate: #ffbd59;
    --slate: #4c2b15;
    --light-slate: #4c2b15;
    --lightest-slate: #4c2b15;
    --white: #70c156;
    --green: #ffbd59;

    --font-mono: 'PT Mono';
    --font-sans: "Calibre","Inter","San Francisco","SF Pro Text",-apple-system,system-ui,sans-serif;
    --font-luckiest: 'Luckiest Guy', cursive;
  }

h1 {
  color: var(--lightest-slate);
  font-family: var(--font-luckiest);
}

h2, h3, h4, h5, h6 {
    color: var(--slate);
    font-weight: 700 !important;
}  

body {
    color: var(--lightest-slate);
    background-color: var(--dark-navy);
    font-family: var(--font-sans);
    font-weight: 700;
}

.green-text{
    color: var(--green);
}

main>.container {
    padding: 60px 15px 0;
    margin-bottom: 5rem;
}

/* Logo */
.b-circle {
  border: solid;
  border-color: #64ffda;
  color: #64ffda !important;
  padding: 5px 13px;
  border-radius: 50%;
  font-size: 18px;
}

.b-circle:hover {
  background-color:rgba(39.2,100,85.5,0.3);
}

.logo {
    color: var(--slate);
}

/* Nav */
.sticky-nav {
    position: fixed;
    width: 100%;
}

nav {
    background-color: var(--dark-navy);
    font-family: var(--font-sans);
}

.nav-link:hover {
    color: var(--dark-slate) !important;
}

.nav-link{
    color: var(--slate) !important;
    padding-top: 10px !important;
    font-family: var(--font-luckiest);
    font-size: 1.5em;
}

.nav-item {
    padding-left: 15px;
}

.nav-active {
    color: var(--dark-slate) !important;
}

.navbar-toggler {
    color: var(--dark-navy) !important;
}

/* Button */
.btn {
  font-family: var(--font-luckiest);
  color: var(--dark-navy);
  background-color: var(--slate) !important;
  font-size: 1.3em;
}

.btn:hover {
  background-color: var(--green) !important;
  color: var(--slate) !important;
}

.checklist >li i{
  color: var(--green);
}

code[class*="language-"],
  pre[class*="language-"] {
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
  }

a {
  text-decoration: none;
  color: var(--lightest-slate);
}

a:hover {
  color: var(--green);
}

.btn-portfolio{
  padding: 10px 18px;
}

/* Icons */
.fab {
  transition: 0.4s;
}

.fas, .hover{
  transition: 0.4s;
}

.fab:hover {
  color: var(--green);
  -moz-transform: translate(0px, -5px);
  -ms-transform: translate(0px, -5px);
  -o-transform: translate(0px, -5px);
  -webkit-transform: translate(0px, -5px);
  transform: translate(0px, -5px)
}

.fas:hover, .hover:hover {
  color: var(--green);
  -moz-transform: translate(0px, -5px);
  -ms-transform: translate(0px, -5px);
  -o-transform: translate(0px, -5px);
  -webkit-transform: translate(0px, -5px);
  transform: translate(0px, -5px)
}

.icon {
  font-size: 1.3em; 
  color: var(--slate);
}

  .test {
    background-color: var(--white);
  }

  input:focus {
    box-shadow: none !important;
  }

  .btn:focus {
    box-shadow: none !important;
  }

  /* Table */
  table, th, td {
    border: 1px solid var(--dark-navy);
    color: var(--green);
    font-size: 1.1em;
    font-weight: 200;
  }

  tr:nth-child(odd) {
    background-color: var(--dark-navy);
  }

  tr:nth-child(even) {
    background-color: var(--navy-shadow);
  }

  .even {
    font-weight: 800;
  }

  /* Footer */
  footer {
      background-color: var(--dark-navy);
      color: var(--slate) !important;
  }

  /* Medium Devices, Desktops */
  @media only screen and (min-width : 992px) {
    .side-border{
      border-right: solid 2px white;
    }
  }