/* @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,slnt,wdth,wght,GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC@8..144,-10..0,25..151,100..1000,-200..150,27..175,323..603,25..135,649..854,-305..-98,560..788,416..570,528..760&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nova+Round&family=Quicksand:wght@300..700&display=swap'); */

/* latin-ext */
@font-face {
  font-family: 'Nova Round';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/novaround/v22/flU9Rqquw5UhEnlwTJYTUY7UeMlbABYMtA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nova Round';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/novaround/v22/flU9Rqquw5UhEnlwTJYTUYDUeMlbABY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  src: url(https://fonts.gstatic.com/s/quicksand/v36/6xKtdSZaM9iE8KbpRA_hJVQNYuDyP7bh.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  src: url(https://fonts.gstatic.com/s/quicksand/v36/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Flex';
  font-style: oblique 0deg 10deg;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoflex/v29/NaPccZLOBv5T3oB7Cb4i0zu0RMHsCoRTXr0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Flex';
  font-style: oblique 0deg 10deg;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoflex/v29/NaPccZLOBv5T3oB7Cb4i0zu6RMHsCoRT.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
    --grey-color: #7f8c8d;
    --menu-link-active-color: #cb1616;
    --menu-link-color:#25930f;
    --color-1:#4446e7;
    --red-text: #cc0d01;
}
  
  /* *{
    padding: 0;
    margin: 0;
    box-sizing:border-box} */

    .red-text{
      color: var(--red-text);
    }

.roboto-flex-bear {
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size:50vh;
  font-variation-settings:
    "slnt" 0,
    "wdth" 50,
    "GRAD" 0,
    "XOPQ" 40,
    "XTRA" 350,
    "YOPQ" 30,
    "YTAS" 680,
    "YTDE" -100,
    "YTFI" 600,
    "YTLC" 500,
    "YTUC" 750;
}

.nova-round-regular {
    font-family: "Nova Round", system-ui;
    font-weight: 400;
    font-style: normal;
    src: 
  }

#bear div:nth-child(1){
    font-size: 100vh;
    line-height: 90vh;
}

#planet div:nth-child(1){
    font-size: 50vh;
    line-height: 60vh;
}

.home-text  {
    display: flex;
    align-items: baseline;
    flex-flow: row wrap;
}

.home-text div {
    display: flex;
    align-items: baseline;
    font-size: 25vh;
    position: relative;
}

#_planet {
    position: absolute;
  top: 19vh;
  left: 5vw;
}

.bear-text {
position: relative;
left: 1vw;
top: .5vh;
}

#bearme-logo-menu {
  max-width: 50px;
}

#bearme-logo-menu .st0 {
  fill: black;
}

.home-subheading {
  position: absolute;
  top: 35vh;
  left: 43vw;
  font-size: 5vh;
}

.home-link {
  position: absolute;
  top: 50vh;
  left: 43vw;
  font-size: 5vh;

}
.home-link a {
  color:#000000;
}


.bear-track {
  max-width: 15vw;
  margin-right: 1vh;
}

.bear-arrow {
  max-width: 5vw;
  max-height: 4vh;
  fill: var(--red-text);
  stroke: var(--red-text);
}

.menu-button span{
  font-size:30px;
  cursor: pointer;
}

 /* The side navigation menu */
 .sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    /* left: 0; */
    right: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  }
  
  /* The navigation menu links */
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  /* When you mouse over the navigation links, change their color */
  /* .sidenav a:hover {
    color: #f1f1f1;
  } */
  
  /* Position and style the close button (top right corner) */
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
  #main {
    position: relative;
    top: 0px;
    transition: all .5s;
 
  }

  .main-grid {
    display: grid;
    grid-template-areas:
    'A B C'
    'A D D'
    'A E E'
    'A F F';
    grid-gap: 10px;
    width: 97vw;
  height: 97vh;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

  
  #title-img {
    height: 97vh;
    max-width: 97vw;
    top: 0px;
    transition: all .5s;
  }
  
 

  #bear-text {
    grid-area: A;
    justify-self: left;
    align-self: center;
      font-size: 18rem;
      text-transform: uppercase;
      transform: rotate(-90deg);
      max-width: min-content;

}
  

  #in-cui {
    grid-area: B;
  }

  .menu-button {
    position: absolute;
    top: 50px;
    right: 100px;
  grid-area: C;
    z-index: 10;
    text-align: center;
}

#the {
  grid-area: E;
  font-size: 10rem;
}

#planet {
  grid-area: F;
  font-size: 12rem;
}

  ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  
  a {
    text-decoration: none;
  }

.main-content {
  padding-top:100px;
}

.chapter {
  font-size: 2rem;
  font-weight: 600;
  margin-left: 5rem;
  margin-top: 5rem;
}

.paragraph {
  max-width: 1200px;
  margin: 6rem auto;
  display: flex;
  flex-direction: column;

  p {
    margin-top:0;
    padding: 1rem;

  }

}

.enhanced {
    display: block;
 
    position: relative;
}

.enhanced::after, .enhanced::before {
  display: block;
  position: absolute;
  width: 200px;
  height: 50px;
  content: "";
} 


.enhanced::before {
  left: 0;
  top: 0;
  border-left: 6px solid black;
  border-top: 6px solid black;
  border-radius: 5px;
 }

 .enhanced::after {
  right: 0;
  bottom: 0;
  border-right: 6px solid black;
  border-bottom: 6px solid black;
  border-radius: 5px;
 }

 .question {
  font-weight: 500;
 }

  .question.enhanced::before,  .question.enhanced::after {
        border-color:var(--red-text);
 }
 
 .quote {
  font-style: italic;
 }


.grid-content {
  display: grid;
  /* grid-template-areas: 'title title title title' 'left left left right'; */
  /* grid-template-columns: repeat(12, 72px); */
  grid-template-columns: repeat( auto-fit, minmax(350px, 1fr));
  gap: 36px;
  grid-template-rows: repeat(2, auto);
  max-width: 1200px;
  margin: 0 auto;
}

.grid-content img {
  max-width: 100%;
}

.nova-round {
  font-family: "Nova Round";
}
  .title {
    font-size: 5rem;
    border-bottom: 2px solid black;
     margin-bottom: 1.8rem;
    line-height: 6.5rem;
  }

  .big-link {
    font-size: 5rem;
    border-top: 2px solid black;
     margin-bottom: 1.8rem;
    line-height: 5rem;
    text-align: right;
    padding-top: 1rem;
  padding-right: 1rem;
  
    a {
      color:black;
    }

    a::before {
      content: "\21D2";
    }
  }

  .main-content {
    font-family: Quicksand;
    font-size: 1.8rem;
    line-height: 2.5rem;
  }
  
  .full-width-image img {
    width: 100vw;
    position: relative;
    left: -8px;
  }

  .box-docs {
    border: 1px solid #4d4d4d;
    padding: 1rem;
    font-size: 1rem;
    text-align: right;
    line-height: 2rem;
    font-family: Nova round;
    max-width: max-content;
    position: relative;
    right: 0px;
    align-self: end;
    margin-bottom: 3rem;
    color: #4d4d4d;

    a {
      color: #4d4d4d;
    }
    .box-title {
      color: #000000;
      font-weight: 600;
    }
  }

  .ymir-data {
    font-size: 1rem;
  border-top: 1px solid rgb(75, 74, 74);
  margin-bottom: 1.8rem;
  line-height: 1.5rem;
  text-align: center;
  padding-top: 1rem;
  padding-right: 1rem;
  }

.left {
  /* grid-area: left; */
  /* grid-area: 2 / 1 / 3 / 2; */
}

.right {
  /* grid-area: right; */
  /* grid-area: 2 / 2 / 3 / 3; */
}

  .menu-hover-fill li {
    position: relative;
    margin: 5px 0;
    max-width: 100%
  }
  .menu-hover-fill li::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0.2rem;
    width: 0.25rem;
    height: 100%;
    background: var(--menu-link-active-color);
    transition: 0.6s;
  }
  .menu-hover-fill li a {
    --menu-link-color: var(--grey-color);
    position: relative;
    background: linear-gradient(var(--menu-link-active-color) 0 100%) left/0 no-repeat;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    transition: background-size 0.45s 0.04s;
  }
  .menu-hover-fill li a::before {
    position: absolute;
    content: attr(data-text);
    z-index: -1;
    color: var(--menu-link-color);
  }
  .menu-hover-fill li:nth-child(1) {
    --menu-link-active-color: var(--color-1);
  }
  .menu-hover-fill li:nth-child(2) {
    --menu-link-active-color: var(--color-1);
  }
  .menu-hover-fill li:nth-child(3) {
    --menu-link-active-color: var(--color-1);
  }
  .menu-hover-fill li:nth-child(4) {
    --menu-link-active-color: var(--color-1);
  }
  .menu-hover-fill li:nth-child(5) {
    --menu-link-active-color: var(--color-1);
  }
 .menu-hover-fill li:nth-child(6) {
    --menu-link-active-color: var(--color-1);
  }
  .menu-hover-fill li:nth-child(7) {
    --menu-link-active-color: var(--color-1);
  }
  .menu-hover-fill li:nth-child(8) {
    --menu-link-active-color: var(--color-1);
  }
  .menu-hover-fill li:hover::before {
    left: calc(80%);
  }
  .menu-hover-fill li:hover a {
    background-size: 100%;
  }

  .ext-link {
    font-style: italic;
    font-weight: 600;
  }

    /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
    @media screen and (max-width: 992px) {
      .sidenav {
        width: 100%;
        height: 0;
        padding-top: 0;
      }
      .sidenav a {font-size: 60px;}
      .sidenav .closebtn {font-size: 50px;}
  
      .menu-button span{
        font-size:70px;
      }
      .menu-hover-fill li {
        max-width: 70%
      }
      
      .home-subheading {
        position: absolute;
        top: 15vw;
        left: 20vw;
        font-size: 5vw;
      }

        .home-link {
        position: absolute;
        top: 25vw;
        left: 20vw;
        font-size: 5vw;
      }

      .menu-button {
        position: absolute;
        top: 0px;
        right: 0px;
        grid-area: C;
        z-index: 10;
      }
      #title-img {
        height: auto;
        max-width: 97vw;
        top: 0px;
        transition: all .5s;
      }
       .main-content {
    font-family: Quicksand;
    font-size: 2.5rem;
    line-height: 3rem;
  }
    }