@import url('https://fonts.googleapis.com/css2?family=Gilda+Display&family=Leckerli+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
@font-face {
  font-family: 'Blester'; /* Your custom font name */
  src: url('assets/webfonts/The\ Blester.ttf') format('truetype'); /* Path to the font file */
}

html {
  scroll-behavior: smooth;
 }

:root {
  --primary-color: rgb(256,0,0);
  --phone-btn-size: clamp(4rem, 6rem, 10vh);
}
.blester{
  font-family: 'Blester';
  line-height: 80%;
}

/* ###################### */
/* Main structure */

@media (min-width: 992px) {
  .banner{
    position:fixed;
    width: 40vw;
    height: 100vh;
    left: 60vw;
  }
  .edge{
    max-width: 5vw;
    height: 100vh;
    left:0;
  }
  .content{
    min-height: 100%;
    width: 55vw;
    left: 5vw;
  }
  .heading-alt-wrapper, .phone-heading, .phone-nav, .spacer{
    display: none;
  }

}
@media (max-width: 991px) {

  .banner{
    min-width: 100vw;
    min-height: 100vh;
    position:fixed;
    z-index: -1;
  }
  .edge{
    display: none;
  }
  .content{
    width: 90vw;
    background-color: #fff;
    position: relative;
    top: 100vh;
    margin-left: auto;
    margin-right: auto;
    min-height: 70vh;
    margin-bottom: 100vh;
  }
  .back-button{
    display: none;
  }
  .spacer{
    min-height: 100px;
    min-width: 100vw;
  }

  /* Heading (absolute positioning) */
  .phone-heading{
    position: absolute;
    top: 10vh;
    width:60vw;
    text-align: center;
  }
  .down-button{
    position:absolute;
    bottom: 5vh;
    right: 43vw;
    /* bottom: -3vh;
    left: 48vw; */
  }
  .home-button{
    position:absolute;
    bottom: 20vh;
    right: 43vw;
    /* left: 50vw; */
  }
}


.banner {
  background-size: cover;
  background-position: right;
}
.edge {
  background-size: cover;
  background-position: left;
  position: fixed;
}
.content{
  padding-left: 5vw;
  padding-top: 6vh;
  padding-right: 5vw;
  padding-bottom: 5vh;
  position: relative;
  background-color: #fff;
}


/* ####################### */
/* Text, colors, etc*/
/* Text */
a {
    text-decoration: none;
    color: var(--primary-color);
}
h1{
  font-weight: 400;
  font-style: italic;
  font-size: 8rem;
  margin-bottom: 1rem;
  line-height: 80%;
  color: var(--primary-color);
}
.heading-alt-wrapper h1{
  font-size: 8rem;
  color: #fff;
}

p, ul{
    font-size: 1rem;
    color: #333;
    font-family: 'Source Serif 4', serif;
    font-weight: 300;
}

/* Optional tabs */
.tabs{
    margin-bottom: 3rem;
    margin-top: 3rem;
    font-size: 1.1rem;
    padding-left: 2rem;
    color: #333;
    font-family:  "Gilda Display", serif;
    border-left: 0.5rem solid black;
    border-color: var(--primary-color);
}
.nav-link{
    min-width: 5rem !important;
    color: #333;
}
.nav-link.active{
    border: 1px solid black !important;
    background-color: white !important;
    color: #333 !important;
    border-color: var(--primary-color) !important;
}
.nav-link:active{
  border-color: var(--primary-color) !important;
}


/* Icons */
.texticon{
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
}
.texticon.float-start{
  margin-left: 0;
  margin-right: 1.5rem;
}
.texticon.float-end{
  margin-right: 0;
  margin-left: 1rem;
  margin-bottom: 7px;
}
.texticon img{
  width: 100%;
  height: 100%;
}


/* Home button */
.nav-img{
  color: #fff;
  z-index: 10;
  background-size: contain;
  transition: filter 0.3s ease;
  filter:opacity(0.7)
}
.nav-img:hover{
  filter: opacity(1);
}
.back-button{
  position: fixed;
  left: calc(100vw - 10rem);
  top: 3rem;
  height: 5rem;
  min-height: 5rem;
  width: 5rem;
  min-width: 5rem;
  transform: rotate(180deg);
  background-image: url('images/icons/back.png');
}
.phone-nav{
  min-width: var(--phone-btn-size);
  min-height: var(--phone-btn-size);
  width: var(--phone-btn-size);
  height: var(--phone-btn-size);
  margin: 0 !important;
  padding: 0;
}
.home-button{
  background-image: url('../static/images/icons/home.png');
}
.down-button{
  background-image: url('../static/images/button.png');
}