/* BASE HTML */
.html {
  font-family: 'Ramabhadra';
}

h1 {
  font-size: 40px;
}

a {
  font-size: 20px;
}

/* VIEW CONTAINERS */
.hero-container {
  background-image: url("images/hero.jpg");
  background-color: #cccccc;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
}

.about-container {
  background-color: #252525;
}

.music-container {
  background-image: url("images/concert.jpg");
  background-color: #cccccc;
  /* Used if the image is unavailable */
  background-position: center;
  /* Center the image */
  background-size: cover;
}

.lessons-container {
  background-color: #252525;
}

/* Hide scrollbars */
main::-webkit-scrollbar,
.section-content::-webkit-scrollbar {
  display: none;
}
main,
.section-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* PAGE SNAP LOGIC */
@media (min-height: 30em) {
  main {
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll;
  }
}


.section {
  color: white;
  position: relative;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 67px;
}

@media (min-height: 30em) {
  .section {
    height: 100vh;
  }
}


/* COMPONENTS */
.hero-text {
  font-size: calc(1.25rem + 4.5vw);
}

.headshot-img {
  width: 50%;
}

.walking-img {
  width: 33%;
}

.section-content {
  overflow-y: scroll;
}

.media-logo {
  color: white
}

.main-youtube-clip {
  height: 60%;
  width: 60%;
}

/* NavBar */

.main-navbar {
  position: absolute;
  width: 100%;
}

.main-navbar,
a {
  color: white;
  text-decoration: none;
}


a:hover {
  color: gray;
  text-decoration: none;
}

.media-link-buttons {
  width: 33%;
  flex-grow: 0;
  flex-shrink: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.main-nav-buttons {
  width: 67%;
  flex: 1 0 67%;
}

.nav-buttons {
  width: 33%;
  flex: 1 1 33%;
}

.main-title {
  width: 34%;
  flex: 1 1 34%;
  text-align: center;
}

.custom-toggler.navbar-toggler {
  border-color: white;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}