styles.scss

@import "./node_modules/bulma/sass/utilities/_all.sass";

// app colors
$red: hsl(9, 69%, 49%);
$green: hsl(180, 76%, 29%);
$lightgreen: hsl(180, 76%, 40%);
$text-white: hsl(0, 0%, 100%);
$text-black: hsl(3, 0%, 0%);

// title
$title-color: $red;
$title-size: $size-2;
$subtitle-color: $red;

// navbar
$navbar-background-color: $green;
$navbar-item-hover-background-color: $lightgreen;
$navbar-item-color: $text-white;
$navbar-item-hover-color: $text-black;

// footer
$footer-background: black;
$footer-background-color: $footer-background;

// cards
$card-shadow: -7px 11px 25px -9px rgba(0, 0, 0, 1);

@import "./node_modules/bulma/bulma";

// Import only what you need from Bulma
@import "./node_modules/bulma/sass/elements/container.sass";
@import "./node_modules/bulma/sass/form/_all.sass";
@import "./node_modules/bulma/sass/layout/hero.sass";
@import "./node_modules/bulma/sass/utilities/_all.sass";

@import "./node_modules/bulma/sass/elements/button.sass";
@import "./node_modules/bulma/sass/elements/title.sass";
@import "./node_modules/bulma/sass/components/navbar.sass";
@import "./node_modules/bulma/sass/layout/section.sass";

// Reference: https://bulma.io/documentation/customize/variables/#derived-variables


h2 {
  font-size: 1.5em;
}

#__next {
  display: flex;
  flex-direction: column;
  min-height: 105vh;
}

body {
  font: 15px/1.3 "PT Sans", sans-serif;
  color: #5e5b64;
}

.main {
  background-color: #fff;
  position: relative;
  z-index: 1;
  height: auto;
}

footer {
  left: 0;
  right: 0;
  bottom: 0;
}

footer a:hover {
  color: $text-white;
}

@media (min-width: 769px) {
  .main {
    margin-bottom: 15vh;
  }
}

.alignment-left {
  margin: 0;
}

.about .content-heading {
  color: #363636;
  font-weight: 600;
  line-height: 1.125;
  font-size: 1.125em;
  margin-bottom: 0.8888em;
}

/* join us page */
.join-item {
  margin-top: 3rem;
}

.join-button .button {
  justify-content: left;
  padding-right: 10rem;
  border: 1px solid white;
  border-radius: 20px;
  color: white;
  margin: 5px 5px 5px 0;
  background: linear-gradient(to right, $red 70%, $green 30%);
}

.join-button .join-icon {
  position: absolute;
  top: 15%;
  right: 10%;
  margin: auto;
}


.join-button .bottom {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  bottom: 0;
  visibility: visible;
  display: block;
}

.join-button .top {
  display: none;
}

@media (min-width: 769px) {
  .join-button .top {
    top: 0;
    visibility: visible;
    display: block;
  }
  .join-button .bottom {
    display: none;
  }
}

.join img {
  height: auto;
  width: 20vw;
  padding: 10px 0;
}

@media (min-width: 1023px) {
  .join img {
    height: auto;
    width: 10vw;
  }
}

/* logo */
.logo {
  display: flex;
  align-items: center;
  margin-right: 1em;
}
.logo .text-container {
  padding-left: 0.5em;
}

.logo .bottom-text {
  margin-top: -0.3em;
  font-size: 1em;
}
.logo .top-text {
  font-size: 1em;
}

/* about us page */

.about .content-heading {
  color: #363636;
  font-weight: 600;
  line-height: 1.125;
  font-size: 1.125em;
  margin-bottom: 0.8888em;
}

/* hero image */
.hero-image img {
  width: 100vw;
  height: 30vh;
  object-fit: cover;
}

.about .hero-image img {
  object-position: 100% 25%;
}

.home .hero-image img {
  object-position: 0% 40%;
}

/* social media icons */

.social-icons {
  text-align: center;
  margin-top: 25px;
}

.social-icon {
  margin-left: 2.5em;
  margin-right: 2.5em;
}



/* leadership cards */
.leadership {
  flex-wrap: wrap;
}

.leadership-card {
  margin-top: 2vh;
  height: 100%;
}

/* sponsor cards */

.sponsor-card {
  margin-top: 2vh;
  height: 100%;
}

/* projects page */

.projects .card-equal-height {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.projects .card-equal-height .card-footer {
  margin-top: auto;
}
.projects .card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0.5rem;
}
.projects .card img {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 30px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0.5rem;
  max-width: 96.5%;
  max-height: 96.5%;
  margin: 0 auto;
  margin-top: 1%;
}

.copyright {
  font-style: italic;
  font-size: 80%;
  color: $text-white;
}