@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=Righteous&display=swap');


:root {
    --dark-navy: #335261;
    --navy: #072227;
    --light-navy: #112f40;
    --lightest-navy: #544023;
    --navy-shadow: rgba(43, 50, 53, 0.753);
    --dark-slate: #335261;
    --slate: #b4e7f4;
    --light-slate: #b4e7f4;
    --lightest-slate: #b4e7f4;
    --white: #fff7e6;
    --green: #58d0dd;

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

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

h2, h3, h4, h5 {
    color: var(--slate);
}  

h6 {
  color: var(--navy);
  font-size: 1.1em;
}

.font-large {
  font-size: 4em;
}


  /* bubbles */
  body,html{
    width:100%;
  }

  body{
    color: var(--lightest-slate);
    background-color: var(--dark-navy);
    font-family: var(--font-sans);
  }
  
.bubbles{
  position:absolute;
  width:100%;
  height: 100%;
  z-index:-1;
  overflow:hidden;
  top:0;
  left:0;
}
.bubble{
  position: absolute;
  bottom:-100px;
  width:40px;
  height: 40px;
  background:#f1f1f1;
  border-radius:50%;
  opacity:0.5;
  animation: rise 10s infinite ease-in;
}
.bubble:nth-child(1){
  width:40px;
  height:40px;
  left:10%;
  animation-duration:8s;
}
.bubble:nth-child(2){
  width:20px;
  height:20px;
  left:20%;
  animation-duration:5s;
  animation-delay:1s;
}
.bubble:nth-child(3){
  width:50px;
  height:50px;
  left:35%;
  animation-duration:7s;
  animation-delay:2s;
}
.bubble:nth-child(4){
  width:80px;
  height:80px;
  left:50%;
  animation-duration:11s;
  animation-delay:0s;
}
.bubble:nth-child(5){
  width:35px;
  height:35px;
  left:55%;
  animation-duration:6s;
  animation-delay:1s;
}
.bubble:nth-child(6){
  width:45px;
  height:45px;
  left:65%;
  animation-duration:8s;
  animation-delay:3s;
}
.bubble:nth-child(7){
  width:90px;
  height:90px;
  left:70%;
  animation-duration:12s;
  animation-delay:2s;
}
.bubble:nth-child(8){
  width:25px;
  height:25px;
  left:80%;
  animation-duration:6s;
  animation-delay:2s;
}
.bubble:nth-child(9){
  width:15px;
  height:15px;
  left:70%;
  animation-duration:5s;
  animation-delay:1s;
}
.bubble:nth-child(10){
  width:90px;
  height:90px;
  left:25%;
  animation-duration:10s;
  animation-delay:4s;
}
@keyframes rise{
  0%{
    bottom:-100px;
    transform:translateX(0);
  }
  50%{
    transform:translate(100px);
  }
  100%{
    bottom:1080px;
    transform:translateX(-200px);
  }
}

.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);
}

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

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

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

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

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

/* Button */
.btn {
  color: var(--green) !important;
  font-size: 1.2em;
  background-color: var(--light-navy);
  font-family: var(--font-lobster);
}

.btn:hover {
  color: var(--dark-navy);
  background-color:var(--navy);
}

.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;
}

.btn-loan {
  background-color: var(--slate);
  color: var(--light-navy) !important;
}

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

/* 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 */
  th {
    border-radius: 5px;
  }

  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(--light-navy);
  }

  .even {
    font-weight: 800;
  }

  .top-row, th{
    background-color: #112f40 !important;
    font-weight: 650 !important;
  }

  .form-container {
    background-color: var(--light-navy);
  }

  .bg-rounded {
    border-radius: 8px;
  }

  /* 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;
    }
  }