@import url("https://use.typekit.net/hje5cod.css");

/* CSS RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: harri-text, Roboto, sans-serif;
  font-size: 1rem;
  background-color: #fff6eb;
  /*this was black which made it appear like a mobile screen size*/
  font-weight: normal;
  color: #252160;
  text-decoration: none;
  line-height: 1.4rem;
}

.text {
  padding-bottom: .5rem;
}

.text ul {
  padding-left: 3rem;
  padding-right: 2rem;
}

.text_il2 {
  padding-left: 5rem;
  margin-bottom: 2rem;
}

.video_links {
  padding-left: 3rem;
  margin-bottom: 2rem;
  list-style-position: inside;
}

.video_links a:hover {
  text-decoration: underline;
  color: #f7941c;
}

h1 {
  font-size: 1.8rem;
  font-weight: 400;
  font-family: lilita one, Roboto, san-serif;
  padding: 1.2rem;
  line-height: 2rem;
  text-shadow: 1px 1px 2px rgb(216, 215, 215);
}

h2 {
  /*! padding: 1.5rem 1.8rem; */
  line-height: 2rem;
  margin-top: 1.2rem;
  padding: 0rem 1.2rem 1rem 1.2rem;
  font-size: 1.4rem;
  font-weight: 600;
}

h3,
h4,
h5,
h6 {
  font-weight: bold;
  padding: 0rem 1.2rem 0rem 1.2rem;
}

.video h2 {
  line-height: .2rem;
  margin: 2rem 0rem 0rem 0rem;
}

figcaption {
  padding: .5rem 1rem 1.6rem 1rem;
  line-height: 1.3rem;
  font-size: .8rem;
}

.image {
  display: block;
  margin: 0 auto;
  width: 100%;
  border: 1px solid #252160;
}

/*basic principle and tool box bulleted list*/
.bp_list {
  padding: 0rem 2rem 1rem 2rem;
}
.tool_box_list{
  padding: 0rem 2rem 1rem 2rem;
  list-style-type: none;
  
}
.tool_box_list li:nth-child(2),
.tool_box_list li:nth-child(4),
.tool_box_list li:nth-child(6),
.tool_box_list li:nth-child(8),
.tool_box_list li:nth-child(10){
  background-color: #f7941c;
  padding: 1rem .6rem 1rem .6rem;
  margin-bottom: .5rem;
  margin-top: .5rem;
  
}
.tool_box_list li:nth-child(1),
.tool_box_list li:nth-child(3),
.tool_box_list li:nth-child(5) a:hover{
  color: #252160;
  margin-bottom: .5rem;
  margin-top: .5rem;
}

.tool_box_list a:hover{
  color:#252160;
border-style: solid;
}

/* TYPOGRAPHY */

p {
  margin-bottom: 1.2rem;
  font-size: 1rem;
  padding: 0rem 1.2rem 0rem 1.2rem;
}

.accomm_access li {
  font-size: 1rem;
  font-weight: normal;
}

/*side nav*/
.pageheader {
  position: fixed;
  z-index: 1001;
  background-color: #fff6eb;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  padding: 1.9rem 1.1rem .3rem 1.1rem;
  box-shadow: .5rem .5rem .5rem #bda083;

}


.logo {
  /*position: absolute;*/
  max-width: 18.75rem;

}

/* DRAWER LAYOUT */

.container {
  margin: 0 auto;
  max-width: 40rem;
  /* needed to use positioning on other elements on the page. */
  position: relative;
  background-color: #fff6eb;

}

main {
  /*padding: 1.25rem;*/
  clear: right;
  max-width: 60rem;
  margin-top: 12rem;
  padding-bottom: 8rem;
}

/* MENU BUTTON */

button {
  background: #fff6eb;
  float: right;
  /*! font-size: 1rem; */
  padding: .325rem;
  border-radius: .0625rem;
  box-shadow: .1rem .1rem .5rem gray;

  /* brings to the front */
  z-index: 999;
  cursor: pointer;
  /* need to add cursor manually */
  /*! margin-left: .4rem; */
}

button:hover,
button:focus,
button:active {
  background-color: #fff6eb;
  border: 1px solid #000000;
  transition: transform 0.5 ease-in-out;
}

/* SKIP TO MAIN CONTENT 
    This is used by screen reader users and keyboard users so that they do not need to tab through the entire page navigation to get to the content of the page. This is "invisible" initially by locating it off the screen and becomes visible when there is keyboard focus.

*/

a:link {
  color: #252160;
}

a.skip,
a.skip:visited {
  color: #000000;
  padding: .625rem;
  position: fixed;
  top: -6.25rem;
  /* brings to the front */
  z-index: 1001;
}

a.skip:focus {
  top: 0;
}

a.skip:hover {
  font-weight: bold;
  text-decoration: underline;
  transition: transform 0.5s ease-in-out;
}

a.skip:active {
  font-weight: bold;
}

.gtk_content a{
  color: #ffffff;
}


/* DRAWER NAVIGATION */

.drawer {
  /* 100% Full-height */
  height: 100vh;
  /* 0 width - change this with JavaScript */
  width: 15.62rem;
  max-width: 100%;
  /* Stay in place */
  position: fixed;
  /* Stay in front */
  z-index: 1000;
  /* Stay at the top of browser window */
  top: 0;
  /* stay at right side of browser window */
  right: -15.62rem;
  background-color: #252160;
  /* Disable horizontal scroll */
  overflow-x: hidden;
  padding-top: 2.5rem;
  /* Animate right position of the drawer to simulate opening and closing */
  transition: right 0.5s;

}

/* NAVIGATION LINKS */

.drawer button {
  /* this is styling for the close button */
  border: 0;
  background: none;
}

.drawer a,
.drawer a:visited,
.drawer button {
  padding: .625rem .625rem;
  text-decoration: none;
  font-size: 1.25rem;
  color: #fff6eb;
  display: block;
  /* When you mouse over the navigation links, change their color */
  /*transition: color 0.3s;*/
}

.drawer a:hover {
  font-weight: bold;

}

.drawer a:focus {
  text-decoration: uppercase;
  transition: transform 1.o ease-in-out;
}

.drawer a:active {
  color: #FFF6EB;

}

.drawer a:visited {
  text-transform: uppercase;
}

.drawer .closeBtn {
  /* Position and style the close button (top right corner of drawer) */
  position: absolute;
  top: 0;
  right: .625rem;
  font-size: 2.25rem;
}

nav.breadcrumbs ul {
  display: none;
}

.intro {
  font-style: italic;
}


/*landing page nav blocks*/
.landing_container li {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  /*! padding-top: 1rem; */
}

.landing_container img {
  width: 3rem;
}

.landing_container li:nth-child(2),
.landing_container li:nth-child(4) {
  background-color: #f7941c;
  gap: 1rem;
  padding: 2rem;
  flex-direction: row-reverse;

  /*! padding-left: 2rem; */
}

.landing_container li:nth-child(1),
.landing_container li:nth-child(3) {
  background-color: #252160;
  padding: 2rem;
  gap: 1rem;

}


/*landing container LINKS*/
.landing_container a {
  color: #fff6eb;
  font-size: 1.35rem;
  line-height: 1.7rem;
  font-weight: 300;
}

.landing_container li:nth-child(2) a,
.landing_container li:nth-child(4) a {
  color: #252160;
}

.landing_container a:hover {
  /*font-weight: bold;*/
  transform: scale(1.1);
  font-weight: 600;
  /* Keep the original font weight */
  transition: transform 0.5s ease-in-out;

}

.landing_container,
.landing_container1 a:focus {
  text-decoration: none;
  
}

.landing_container a:active {
  text-shadow: #fff6eb;
  border: 2px solid;
}

.landing_container,
.landing_container1 a:visited {
  font-style: normal;
  
}

li.img_landing1 :hover,
li.img_landing2 :hover,
li.img_landing3 :hover,
li.img_landing4 :hover {
  transform: scaleX(1.03);
  transition: transform 0.5 ease-in-out;
}



/*main{
    max-width: 40rem; going to need to change this number for line length
     padding: 1.2rem;
     margin: auto;
    
     }*/


/*VIDEO*/
.video {
  margin-bottom: 2rem;
}

/*BP Cards and EXPLORE BTN links*/

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 2fr));
  grid-gap: 2rem;
  /*display: flex;
        flex-direction: column;
        gap: 2rem;
        flex-wrap: wrap;*/
}

.card {
  background: #f7941c;
  padding: 1rem 2.2rem 2.2rem 3rem;
  position: relative;
  margin-bottom: 1rem;
  margin-top: 1rem;
  box-shadow: .5rem .5rem .5rem #bda083;

}

.card h2 {
  font-weight: 700;
  line-height: 1.5rem;
  font-size: 1.3rem;
  padding: 0%;
}

.card h3 {
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.9rem;
  padding-left: 0;
}

.card p {
  line-height: 1.5rem;
  padding-bottom: 1rem;
  padding-left: 0;
}

.card a:hover{
  color:#252160;
  border: 1.3px solid #252160;
  transition: transform 0.5s ease-in-out;
}
.card a:active{
  border: 1.3px solid #FFF6EB;

}

/*video tutorial links*/
.video_links a {
  color: #252160;
}

.video_links a:hover {
  text-decoration: underline;
  font-weight: bold;
  transition: transform 0.5s ease-in-out;
  border: 1.3px solid #252160;
}

.video_links a:focus {
  text-transform: none;

}

.video_links a:visited {
  font-style: italic;
}

.video_links a:active {
  font-weight: bold;
}


.accomm_access {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  grid-gap: 1rem;
}


a.explore_btn:link {
  display: block;
  background-color: #ffffff;
  border-radius: 5rem;
  padding: .5rem;
  position: absolute;
  text-align: center;
  width: 6rem;
  right: 1rem;
  bottom: 1rem;
  box-shadow: .1rem .1rem .5rem gray;
}

a.explore_btn:focus {
  text-transform: none;
}

a.explore_btn:visited {
  font-style: italic;
}

a.explore_btn:hover {
  font-weight: bold;
  transition: transform 0.5s ease-in-out;
  color:#252160;
}

a.explore_btn:active {
  font-weight: bold;
}



/*links*/
a {
  color: #252160;
}

a:link {
  text-decoration: none;
  list-style-type: none;
}

a:focus {
  text-transform: none;
}

a:visited {
  font-style: italic;
}

a:hover {
  /*deleted scale on hover and active*/
  /*color: #252160;*/
  /*text-shadow: #502566;
 border-radius: 5rem;*/
  width: 20rem;
  transition: transform 0.5s ease-in-out;
  text-decoration: underline;
  
}

a:active {
  font-weight: bold;
  border-style: solid;
}


/*GTK*/


.gtk_content {
  color: #FFF6EB;
  background-color: #252160;
  padding: 1.5rem 2rem 1.5rem 2rem;
  margin-bottom: 1rem;
}

.gtk_content h3 {
  color: #FFF6EB;
  padding-left: 2.4rem;
  background-image: url(assets/bulb.svg);
  background-repeat: no-repeat;
  /*! background-position: left .2rem; */
  background-size: 1.8rem;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.3rem;
  padding-bottom: .5rem;
  padding-top: .5rem;
}

.gtk_owl_container {
  width: 40%;
  margin: 1rem auto;

}

.gtk_owl_container img {
  display: block;
  margin: 0 auto;
  width: 100%;
  /*! padding: 2rem; */
}


/*Backstory_button*/


.story_button a {
  background-color: #f7941c;
  border-radius: 5rem;
  margin: 1.2rem;
  padding: .8rem 1rem .5rem 1rem;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  text-align: center;
  width: 17rem;
  height: 3rem;
  max-width: 33rem;
  list-style-type: none;
  display: block;
  box-shadow: .1rem .1rem .5rem gray;
}

.story_button li {
  list-style-type: none;
}

.story_button {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.story_button a:link {
  color: #252160;
  box-shadow: .1rem .1rem .5rem gray
}

.story_button a:focus {
  outline-style: none;
}

.story_button a:visited {
  font-style: italic;
}

.story_button a:hover {
  background-color: #FFF6EB;
  border: 1.3px solid #252160;
  transition: transform 0.5s ease-in-out;
}

.story_button a:active {
  box-shadow: none;
}


/*accessibilty list*/
.accomm_access {

  background: #f7941c;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  padding-left: 2rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border: 0;
  font-size: 1rem;
  padding: 2rem, 1rem;
  box-shadow: 0px, 5px, 20px;
  max-width: 100%;

}

.mag_glass li {
  width: 17%;
  display: block;
  margin: 0 auto;
  padding-bottom: 2rem;
}

.scout_lets_go {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  margin: 2rem 0 2rem 0;
  gap: 1.5rem;
  /*! align-content: baseline; */
  align-items: center;
}

.scout_lets_go img {
  width: 10rem;
}

.scout_lets_go li {
  list-style-type: none;
  align-items: center;
  font-size: 1.4rem;
}

.scout_lets_go a {
  background-color: #f7941c;
  padding: 1rem;
  border-radius: 2rem;
  align-items: center;
  box-shadow: .1rem .1rem .5rem gray;
  color: #252160;
}

.scout_lets_go a:focus {
  outline-style: uppercase;

}

.scout_lets_go a:visited {
  font-style: italic;
}

.scout_lets_go a:hover {
  background-color: #FFF6EB;
  border: 1.3px solid #f8ad4b;
  font-weight: bold;
  transform: scale(1.1);
  font-weight: 300;
  /* Keep the original font weight */
  transition: transform 0.5s ease-in-out;
}

.arrow {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: center;
  margin: 2rem 0 2rem 0;
  gap: 1.5rem;
  align-items: center;
  list-style-type: none;

}

.arrow img {
  width: 9rem;
}

.back img {
  width: 2rem;
  /*display: flex;
  flex-direction: row;
  align-content: center;*/
  background-image: url(assets/back_arrow.svg);
  background-repeat: no-repeat;
  padding-left: 0rem;
}

.back a:hover {
  transform: scale(1.5);
}


footer {
  background-color: #252160;
  color: #FFF6EB;
  line-height: 1.5rem;
  padding: 1.2rem 2rem .4rem 1.4rem;
  /*! padding: 1.25rem; */
  position: fixed;
  bottom:0;
  /*height: 7rem;*/

}
footer p{
  margin-bottom: 0rem;
}

footer a:link {
  color: #FFF6EB;
}

footer a:link {
  text-decoration: underline;
}

footer a:focus {
  font-weight: bold;
}

footer a:visited {
  font-style: italic;
  color: #FFF6EB;
}

footer a:hover {
  /*deleted scale on hover and active
  text-shadow: #252160;
  width: 15rem;*/
  transition: transform 0.5s ease-in-out;
  color: #FFF6EB;
  border: 1px solid;
}

footer a:active {
  font-weight: bold;
}

.back_to_top {
  font-size: .8rem;
  padding: 0rem 1.2rem 0rem 1.2rem;
}

.back_to_top a:hover {
  text-transform: uppercase;
  color: #f7941c;
}
.back_to_top a:visited{
  font-style: italic;
}
.back_to_top a:active{
  font-weight: bold;
}

.back_to_top a:focus {
  text-transform: uppercase;}

/* LARGE SCREEN NAVIGATION */

@media screen and (min-width:35rem) {
  html {
    font-size: 1.2rem;
    line-height: 1.5rem;
  }

  .intro {
    font-style: italic;
    padding-top: .5rem;
  }

  main {
    padding-top: 20rem 5rem;
    /*! width: 62%; */
    margin-left: 36%;
    margin-top: 1rem;
    
  }

.card p{
  font-size: 1.0rem;
}

  .drawer {
    width: 15rem;
    position: relative;
    right: 0;
    background-color: #fff6eb;
    margin: 1rem;
  }

  .drawer a:link {
    color: #252160;
  }

  .drawer a:hover {
    background: #f7941c;
    border-radius: none;
  }

  .drawer a:focus {
    text-transform: uppercase;
  }

  .drawer a:active {
    font-weight: bold;
  }

  .drawer a:visited {
    color: #252160;
  }


  /*breadcrumbs*/
  nav.breadcrumbs {
    padding: 0.8em em;
    color: #252160;
  }

  nav.breadcrumbs ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: inline;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    list-style: none;
    margin: 1rem;
    padding: 0;
  }

  nav.breadcrumbs li {
    font-size: .8rem;

  }

  nav.breadcrumbs li+li:before {
    display: inline-block;
    content: "/\00a0";
  }

  /*breadcrumbs LINK states*/

  nav.breadcrumbs li a {
    color: #252160;
  }

  nav.breadcrumbs li a:hover {
    font-weight: bold;
    color: #f7941c;
  }

  nav.breadcrumbs li a:focus {
    text-decoration: uppercase;
  }

  nav.breadcrumbs li a:active {
    text-shadow: #502566;
  }

  nav.breadcrumbs li a:visited {
    font-style: italic;
    text-decoration: line-through;
  }

  .pageheader {
    position: fixed;
    left: 0;
    width: 13rem;
    z-index: 1000;
    background-color: #fff6eb;
    top: 0;
    left: 0;
    margin: 0;
    width: 35%;
    padding: 2rem 1rem;
    max-width: 23rem;
  }

  button.closeBtn {
    display: none;
  }

  button {
    display: none;
  }

  .article_header ul {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    width: 10rem;
    gap: 1rem;
    flex-wrap: nowrap;
    position: absolute;
    margin-top: 5rem;
    list-style-type: none;
    font-size: .8rem;
    justify-content: left;
    margin: auto;
    padding-top: 1rem;

  }

  .article_header {
    filter: drop-shadow (10rem 10rem 2rem #ad9687);
    margin-top: 0;
  }

  .scout_lets_go {
    display: flex;
    font-size: 1.8rem;
    line-height: 1.5rem;
    margin: 1.5rem auto;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 2rem 0 5rem 0;

  }

  .card {
    border: width 0.5rem;
    border-color: #252160;
    border-style: solid;
    padding-left: 1.5rem;
  }

  .h2_card {
    font-size: 1.2rem;
    line-height: 1.5rem;
  }

  .card h3 {
    font-size: 1.1rem;
    line-height: 1.5rem;
    font-weight: 600;
  }

  /*GTK large screen*/
  .gtk_container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    font-size: 1.2rem;
    line-height: 1.8rem;
    margin: 1.5rem auto;
    justify-content: center;
    align-items: center;
    padding-left: 1.2rem;

    /*! width: 40%; */
  }

  h3 {
    font-size: 1.4rem;
    /*! padding-top: 2.5rem; */
    /*! padding-bottom: 1rem; */
  }

  .mag_glass li {
    list-style-type: none;
  }

  .gtk_content h3 {
    background-size: 2rem;
    background-position: left 1.rem;
    padding-left: 2.4rem;
    font-size: 1.4rem;
    padding-bottom: 1.2rem;
    padding-top: 1.rem;
    padding-left: 2.7rem;
    /*! align-items: center; */
  }

  .gtk_owl_container {
    order: 2;
    /*flips the order of items*/
  }

  .gtk_background {
    background-image: url(assets/gtk_triangle.svg);
    background-repeat: no-repeat;
    background-size: 1.85rem;
    background-position: right 16% bottom 50%;
    width: 70%;
  }

  .gtk_content {
    border-radius: 4rem;
    /*! margin-left: 2rem; */
    /*! margin-top: 2rem; */
    width: 80%;
  }

  .gtk_content p {
    font-size: 1rem;
    line-height: 1.4rem;
  }

  .gtk_owl_container img {
    width: 60%;
  }

  .gtk_content li {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .container {
    max-width: 60rem;
    padding: 1.2rem;
  }

  .story_button {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 1.2rem;
  }

  .bp_list {
    font-size: 1rem;
    padding: .5rem;
  }

  .bp_list li {
    margin-left: 1.5rem;
    list-style-position: outside;
  }
  .tool_box_list{
    font-size: 1rem;
    padding: .5rem;
  }
  .tool_box_list li{
  margin-left: 1.5rem;
  list-style-position: inside;
}

  /*landing page nav blocks*/
  .landing_container img {
    width: 3.5rem;
  }

  .landing_container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    overflow: auto;
    grid-gap: .8rem;
    margin: 1rem;
    max-width: 80%;
    padding-bottom: 1.5rem;

  }

  .img_landing1,
  .img_landing2,
  .img_landing3,
  .img_landing4 {
    border-radius: 2rem;
  }


  .landing_container li:nth-child(2),
  .landing_container li:nth-child(4) {
    flex-direction: row;
  }

  .landing_container li:nth-of-type(2) {
    order: 2;
  }

  .landing_container li:nth-of-type(3) {
    order: 3;
  }

  .landing_container li:nth-of-type(4) {
    order: 4;
  }

  .back_to_top{
  margin-left: 70%;
  }

  footer {
    margin-left: 35%;
    width: 65%;
  }

}

@media screen and (min-width:60rem) {

  main {
    width: 60%;
    margin-left: 35%;
  }

  .text,
  .intro {
    margin-right: 5rem;

  }

  .pageheader {
    position: fixed;
    left: 0;
    width: 10rem;
    z-index: 2000;
    background-color: #fff6eb;
    top: 0;
    left: 0;
    margin: 0;
    width: 25%;
  }

  html {
    font-size: 1.4rem;
    line-height: 1.6rem;
  }

  h2 {
    font-size: 1.4rem;
    /*! line-height: 1.8rem; */
  }


  .h2_card {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }

  .card h3 {
    font-size: 1.3rem;
    line-height: 1.5rem;
    font-weight: 600;
  }

  /*gtk*/
  .gtk_content h3 {
    background-size: 2.7rem;
    background-position-y: center;

  }


  /*landing nav blocks*/
  .img_landing4 {
    order: 4;
  }

  .img_landing2 {
    order: 2;
  }

  .img_landing4 {
    order: 3;
  }

  .landing_container {
    max-width: 100%;
  }

  footer {
    max-width: 60%;
    /*margin-left:37%;*/
  }


}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}