/* imported fonts */

@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Rowdies:wght@300&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@1&display=swap");

@import url("https://fonts.googleapis.com/css2?family=PT+Sans&display=swap");

@import url("https://fonts.googleapis.com/css?family=Oswald:400,700");

@import url("https://fonts.googleapis.com/css2?family=Kenia&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Kelly+Slab&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Pinyon+Script&family=Shrikhand&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Kelly+Slab&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Pinyon+Script&family=Shrikhand&family=Tektur:wght@400..900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap");

/* import open props (for pre-defined variables) */
@import "https://unpkg.com/open-props";

:root {
  --clr-neutral-900: hsl(207, 19%, 9%);
  --clr-neutral-100: hsl(0, 0%, 100%);
  --clr-neutral-400: hsl(54, 77%, 52%);
  --clr-neutral-600: hsl(216, 55%, 17%);
  --level-one: translateZ(3rem);
  --level-two: translateZ(6rem);
  --level-three: translateZ(9rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* html & body */
html,
body {
  overflow-x: hidden;
}

/* navbar one */
#nav-1,
#nav-2,
#nav-1Modal .modal-content,
#main-section .missionText,
#nav-2 .navbar-toggler,
#special-announcements .btn,
.path-rows .card-body:hover,
#gw-media,
#main-section #main_btn,
#happenings,
#main-section .modal-header,
#quick-access,
#quick-access .button,
#gw-media .media-box {
  background-color: var(--clr-neutral-400);
}

#nav-1-icons .btn:hover,
#nav-2 .nav-item a:hover,
#main-section #main_btn:hover {
  color: #fff;
}

#nav-1-icons .btn:hover {
  transform: scale(1.2);
  transition: all 0.6s;
}

#nav-1Modal .modal-title,
#nav-2 li a,
#nav-2 .dropdown-item,
#main-section .missionText,
.stats_1,
#stats-head,
#happenings .card:hover,
#quick-access .modal-title,
#gw-media .media-box,.cte-title,.modals p {
  color: var(--clr-neutral-600);
}

#nav-1Modal .modal-footer button,
#main-title, #mission,
#special-announcements .btn:hover,
#happenings .card,
#quick-access .modal-footer button,
#main-section .modal-footer button,
#pathways,
#gw-articulation, .modals button {
  background-color: var(--clr-neutral-600);
}

#nav-2 ul li .under-divider,
#spin,
#special-announcements #title,
#special-announcements .btn:hover,
#carousel-span,
.articulation-span,
#quick-access .modal-footer button,.modals button {
  color: var(--clr-neutral-400);
}

#princ-title{
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
}

#mission #mission-text{
  font-size: 1.1rem;
}

.orange-type,
#nav-2 .dropdown-item:focus,
#nav-2 .dropdown-item:hover,
.indicator-text {
  color: #ea9628 !important;
}

#nav-2 .nav-item a:hover,
#special-announcements p a,
#quick-access .quick-titles a,
#quick-access .button {
text-decoration: none;
}

#nav-2 li a,
footer {
  font-family: "PT Sans", sans-serif;
  font-size: 1rem;
}



#nav-2 .nav-item a:hover {
  border-bottom: 3px solid #ea9628;
}

#nav-2 .dropdown-item {
  font-size: 0.9rem;
}

#nav-2 ul li .under-divider {
  border-bottom: 1px solid #fff;
}

#nav-2 .navbar-nav li a {
  font-size: 1.1rem;
}

#nav-2 .nav-item:hover .dropdown-menu {
  display: block;
}

.modal-body img {
  width: 100%;
}

#main-title h4 {
  letter-spacing: 2px;
  font-family: "PT Sans", sans-serif;
}

/* main section */
.textUp{
  margin-top: -20px;
  font-size: 0.8rem;
}
.modals{
  max-width: 800px;
  border: 0;
  box-shadow: 0 0 1em rgb(0 0 0 / .3);
}

.modals::backdrop{
  background: linear-gradient(45deg, yellow, blue);
  opacity: .7;
}

/* FOOTER */
footer p {
font-size: 0.9rem;
margin-top: -20px;
}

footer #footer-logo {
  width: 50%;
}

footer #copyright {
  font-family: "Tektur", cursive;
}

/* 
====================
MEDIA QUERIES - MINIMUMS
====================
*/
/* minimum width of 375 */
@media screen and (min-width: 375px) {
  #main-title h4 {
    font-size: 0.7rem;
  }
}

/* minimum width of 468 */
@media screen and (min-width: 468px) {
  #main-title h4 {
    font-size: 0.75rem;
  }

  #events #news-header {
    font-size: 2.5rem;
  }
}

/* minimum width of 576 */
@media screen and (min-width: 576px) {
  #main-title h1 {
    letter-spacing: 4px;
  }

  #main-title h4 {
    font-size: 1rem;
  }
  
}

/* minimum width of 768 */
@media screen and (min-width: 768px) {
  #main-title h1 {
    font-size: 2.4rem;
  }

  #main-title h4 {
    font-size: 1.3rem;
  }
}

/* minimum width of 992 */
@media screen and (min-width: 992px) {
  #main-title h1 {
    letter-spacing: 8px;
    font-size: 2.5rem;
  }
  #princ-line{
    display: none;
  }
}

/* minimum width of 1028 */
@media screen and (min-width: 1028px) {
  #main-title h1 {
    font-size: 2.5rem;
  }

  #main-title h4 {
    font-size: 1.5rem;
  }

  #main-title img {
    width: 100%;
    padding-top: 15px;
  }
}

/* minimum width of 1200 */
@media screen and (min-width: 1200px) {
  #main-title img {
    width: 85%;
    padding-top: 0;
  }
}

/* minimum width of 1400 */
@media screen and (min-width: 1400px) {
  #main-title h1 {
    font-size: 3.3rem;
  }

  #main-title h4 {
    font-size: 1.8rem;
  }
}

/* 
====================
MEDIA QUERIES - MAXIMUMS
====================
*/

/* maximum width of 340 */
@media screen and (max-width: 384px) {
  #main-title h4 {
    font-size: 0.65rem;
  }

  #main-section p{
    font-size: 0.8rem;
  }

  #main-section .textUp{
    font-size: 0.6rem;
  }
}

/* maximum of  767*/
@media screen and (max-width: 767px) {
  #main-title h1 {
    font-size: 1.8rem;
  }

  footer #footer-logo {
    width: 30%;
  }

  footer #nyc-logo {
    width: 30%;
  }
}

/* maximum of 991 */
@media screen and (max-width: 991px) {

  #main-title img {
    padding-bottom: 10px;
    width: 30%;
  }
}