hmtl{
    scroll-behavior: smooth;
    }
body {
    font-family: 'Josefin Sans', sans-serif;
}
  @keyframes slideInFrombottom {
    0% {
      transform: translatey(-100%);
    }
    100% {
      transform: translatey(0);
    }
  }
  @keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
h1 {
    color: #1A5062;
    font-weight: 700;
}
h2 {
    color: #1A5062;
    font-weight: 700;
}
.navbar {
    background-color: #1A5062;
    animation: 1s ease-out 0s 1 slideInFromLeft;

}
i {
color:#fff; font-size:28px;
}

.nav-link {
    color: #fff;
    opacity: 100%;
    font-size: 17px;
}
.nav-link:hover {
    font-size: 19px;
    text-transform: uppercase;
    color: inherit;
}

.active {
    color: #000;
    font-size: 20px;
    text-transform: uppercase;

}
h3 {
    font-weight: 400;
    padding-top: 22px;
    color: #1A5062;
}
h4 {
    padding-bottom: 20px;
}

.spacer {
    padding-top: 65px;
}
.cardspacer {
    padding-bottom: 22px;
}
.personal {
    width: 100%;
}
.row img:not(.modal img, .personal) {
    width: 100%;
    cursor: pointer;
}
.row img:hover:not(.modal img, .personal) {
    opacity: 75%;
}
.modal-body {
    text-align: center;
}
.modal img {
    width: 100%;
}
.modal p {
    text-align: left;
}
.forms {
    width: 100%;
}

.forms label {
    font-weight: 700;
}

.forms .btn {
    background-color: #1A5062;
    border-radius: 10%;
    color: #fff;
    height: 5vh;
}
.forms .btn:hover {
    transition: linear 500ms;
    border-radius: 25%;
    background-color: #989897;
}

/*Dark Mode*/
.dark { 
    background-color: #000; 
   }
   .darkmode:hover {
    cursor: pointer;
   }


   .dark .landingpage {
    background: url('../img/backgroundnight.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 90vh;
   }

   .dark #clock {
    background-color: rgba(0, 0, 0, 0.5);
}
    .dark .navbar {
        background-color: #989897;
    }
    .dark .nav-link:hover {
        color: #fff;
    }

  .dark p {
    color: #fff; 
  }
  .dark .landingintro h2 {
    color: #989897;
  }
  .dark h2 {
    color: #989897;

  }

  .dark h3 {
    color: #989897; 
  }

  .dark .modal p {
    color: #000; 
  }

  .dark label {
    color: #989897;
  }

  /*Media Queries*/

  /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .landingpage {
        height: 50vh;
    }
    .landingintro {
        width: 50%;
    }

    #clock {
        width: 50%;
    }

    nav a img {
        width: 20%;
    }

    
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .landingpage {
        height: 50vh;
    }
    .landingintro {
        width: 75%;
    }
    #clock {
        width: 75%;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .landingintro {
        width: 45%;
    }
    #clock {
        width: 45%;
    }
} 


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .landingpage {
        height: 90vh;
    }
    .landingintro {
        width: 25%;
    }
    #clock {
        width: 25%;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    nav a img {
        width: 30%;
    }
}