@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Sofia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Graduate&display=swap');

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   color: #800000;
}

html, body {
   max-width: 100%;
   overflow-x: hidden;
}

html {
   height: 100%;
   width: 100%;
   /* Sources cited: https://www.turbosquid.com/FullPreview/524319 */
   background-image: url("../images/bg-img.jpg");
   background-size: 14em;
   padding-top: 8vh;
}

header {
   position: fixed;
   top: 0;
   width: 100%;
   background-color: #757575;
   color: #fff;
   z-index: 100;
   line-height: 1em;
   display: grid;
   grid-template-columns: 80px auto;
}

.nav-logo {
   height: 80px;
}

.nav-title {
   /* padding-left: 10px; */
   font-family: "Graduate", serif;
   font-size: 50px;
   letter-spacing: -.05em;
   margin-top: 10px;
}

header * {
   display: inline-block;
}

h2 {
   font-size: 3em;
}

.slides {
   text-shadow: .2em .2em #510000,
                .1em .1em #510000,
                0 0 2em #dddddd99;
}

.slides h1 {
   letter-spacing: -.06em;
}


/* Landing */
.landing {
   height: 100vh;
   display: grid;
   place-items: center;

   width: 100vw;
   text-align: center;
   text-transform: uppercase;
   overflow: auto;
   white-space: nowrap;
   /* display: flex;
   justify-content: center;
   align-items: center; */
}

.landing .slides {

   display: grid;
   place-items: center;

}

.landing .card {
   margin: auto;
   overflow: hidden;
   border-radius: .2em;
   box-shadow: 0 .2em 2em #000;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   font-family: "Graduate", serif;
   display: inline-flex;
   justify-content: center;
   align-items: center;

   aspect-ratio: 3 / 2;
   /* width: 100%;
   max-width: 60vw; */
   height: 75vh;
   position: absolute;
   transition: all 0.5s;
   border-radius: .3em;
   overflow: hidden;
}

.landing .card-1 {
   background-image: url("../images/2023-2024/Team Photos/outside-censored.jpg");
}

.landing .card-2 {
   background-image: url("../images/2023-2024/broadneck-library.jpg");
}

.landing .card-3 {
   background-image: url("../images/2023-2024/working.jpg");
}

.landing .card-4 {
   background-image: url("../images/2023-2024/joahs-team.jpg");
}

.landing h1 {
   font-size: 8em;
   line-height: 1em;
}

.landing h2 {
   font-size: 2.5em;
   text-shadow: .05em .05em #510000,
                0 0 .4em #fff;
}

.what-we-do {
   backdrop-filter: blur(1px);
}



/* Carousel */

.carousel {
   height: 100vh;
   display: grid;
   place-items: center;
}

.slider {
   width: 100%;
   max-width: 800px;
   height: 350px;
   position: relative;
}

.slide {
   width: 100%;
   max-width: 800px;
   height: 350px;
   position: absolute;
   transition: all 0.5s;
   border-radius: 3em;
   overflow: hidden;
}

.slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.current-slide {
   transform: scale(1.1);
   z-index: 1;
}

.btn {
   position: absolute;
   width: .4em;
   height: .4em;
   padding: 10px;
   border: none;
   border-radius: 50%;
   z-index: 10px;
   cursor: pointer;
   font-size: 8em;
   text-shadow: 0 0 5px #fff;
   filter: invert(80%);
   z-index: 2;
   background-color: #fff;
}

.btn-prev {
   top: 45%;
   left: 2%;
}

.btn-next {
   top: 45%;
   right: 2%;
}

.about-title {
   font-family: "Graduate", serif;
   font-size: 4.5em;
   text-align: center;
   color: white;
}

.about-info {
   font-family: "Graduate", serif;
   font-size: 3em;
   text-align: center;
   color: #eee;
}

footer {
   position: fixed;
   bottom: 0;
   width: 100%;
   background-color: #000;
   color: #fff;
   text-align: center;
   padding: 1em;
}

.about {
   grid-template-columns: auto auto;
   font-family: "Graduate";
}


@keyframes slide_right {
   0% {
      transform: translate(0);
   }

   100% {
      transform: translate(3em);
   }
}

.caution-tape {
   margin-left: -10em;
   background-image: url("../images/stripes.svg");
   background-size: 3em 3em;
   animation: slide_right 10s linear infinite;
}

.footer-text {
   text-shadow: 0 0 .1em #000;
   color: white;
   font-weight: 900;
}





* {
   scroll-behavior: smooth;
}

.back-to-top {
   box-sizing: border-box;
   position: fixed;
   left: 25px;
   bottom: 25px;
   height: 60px;
   width: 60px;
   padding: 0;
   padding-bottom: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 40px;
   border-radius: 50%;
   background-color: #800000;
   box-shadow: 0 0 3px #320000;
   color: #2aafd4;
   transition: .5s;
   z-index: 1;
   opacity: .7;
}

.back-to-top:hover {
   opacity: 1;
   text-shadow: 0 .5px 1px #320000,
      0 1px 1px #320000,
      0 1.5px 1px #320000,
      0 2px 1px #320000;
}

.footer-grid {
   display: grid;
   grid-template-columns: auto auto;
}

.inner-outer-shadow {
   box-shadow: inset 0 2px 4px 0 #888,
               0 2px 4px 0 #888,
               0 4px 6px -1px #888,
               0 2px 4px -2px #888;
}

.social-icon {
   font-size: 2em;
   margin: 0 .2em;
}