@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');


/* // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 300 to 800 */

/* $drab-dark-brown: rgba(64, 65, 38, 1);
$fern-green: rgba(95, 125, 67, 1);
$ebony: rgba(94, 96, 81, 1);
$reseda-green: rgba(102, 114, 82, 1);
$black-olive: rgba(44, 48, 28, 1);
$fern-green-2: rgba(96, 117, 59, 1);
$buff: rgba(222, 169, 130, 1);
$battleship-gray: rgba(133, 135, 123, 1);
$bronze: rgba(196, 133, 63, 1);

$ebony: rgba(94, 96, 81, 1);
$fern-green: rgba(95, 125, 67, 1);
$moss-green: rgba(148, 156, 131, 1);
$lion: rgba(189, 149, 97, 1);
$moss-green-2: rgba(129, 147, 89, 1);
$sage: rgba(177, 187, 155, 1);
$black-olive: rgba(65, 69, 54, 1);
$silver: rgba(203, 208, 207, 1);
$buff: rgba(236, 175, 129, 1);

*/

/* $gradient-top: linear-gradient(0deg, #404126ff, #5F7D43ff, #5E6051ff, #667252ff, #2C301Cff, #60753Bff, #DEA982ff, #85877Bff, #C4853Fff);
$gradient-right: linear-gradient(90deg, #404126ff, #5F7D43ff, #5E6051ff, #667252ff, #2C301Cff, #60753Bff, #DEA982ff, #85877Bff, #C4853Fff);
$gradient-bottom: linear-gradient(180deg, #404126ff, #5F7D43ff, #5E6051ff, #667252ff, #2C301Cff, #60753Bff, #DEA982ff, #85877Bff, #C4853Fff);
$gradient-left: linear-gradient(270deg, #404126ff, #5F7D43ff, #5E6051ff, #667252ff, #2C301Cff, #60753Bff, #DEA982ff, #85877Bff, #C4853Fff);
$gradient-top-right: linear-gradient(45deg, #404126ff, #5F7D43ff, #5E6051ff, #667252ff, #2C301Cff, #60753Bff, #DEA982ff, #85877Bff, #C4853Fff);
$gradient-bottom-right: linear-gradient(135deg, #404126ff, #5F7D43ff, #5E6051ff, #667252ff, #2C301Cff, #60753Bff, #DEA982ff, #85877Bff, #C4853Fff);
$gradient-top-left: linear-gradient(225deg, #404126ff, #5F7D43ff, #5E6051ff, #667252ff, #2C301Cff, #60753Bff, #DEA982ff, #85877Bff, #C4853Fff); */




html {
    scroll-behavior: smooth;
    font-family: "Sedan", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    color: rgb(65, 69, 54);
    background-color: rgb(65, 69, 54);
  }


.container{
  display: flex;
  flex-direction: column;
  grid-template-rows: 1fr 1fr;
  grid-column: 2;
  width: 100%;
  
}

.container-outer{
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: 1fr 15fr 1fr;
  width: 100%



  
}

  .about_colleen {
    display: flex;
    flex-direction: row;
    justify-content:center;
    justify-items: center;
    flex-wrap: wrap;
    background-color: rgba(223, 152, 102, 0.925);
    border-radius: 25px;
    height: 100%;
    margin: 18px;
    
    padding-left: 18px;
    padding-right: 18px;
  }
  

  .sedan-regular {
    font-family: "Sedan", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .sedan-regular-italic {
    font-family: "Sedan", serif;
    font-weight: 400;
    font-style: italic;
  }

  nav{
    display: flex;
    align-items: center;
    justify-content:flex-end;
    width: 100%;

  }

  .button-box{
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .flower{
    border-radius: 25px;
    /* border: rgb(65, 69, 54) 25px; */
    margin: 18px;
    margin-bottom: 0px;
    margin-top: 0px;
    height: 350px;
    /* box-shadow: 10px 5px 5px rgba(2, 1, 1, 0.295); */
  }

  .title{
    display: flex;
    flex-direction: row;
    align-items: center;
    /* border: solid rgb(65, 69, 54) 5px; */
    background: rgba(248, 252, 240, 0.712);
    padding: 8px;
    margin: 25px;
    color: rgb(65, 69, 54);
    border-radius: 25px;
    text-decoration: none;
    /* box-shadow: 10px 5px 5px rgba(2, 1, 1, 0.295); */
    width: 100%;
    height: auto;
    margin: 0px
  }

  .partial-border {
    display: flex;
    justify-content:flex-start;
    align-items: center;
    border-top: solid rgb(65, 69, 54);
    border-bottom: solid rgb(65, 69, 54);;
    width: 100%;
  }

  .inner-title{
    display: flex;
    flex-direction: column;
    
    
  }

  .org-name {
    font-family: "Tinos", "serif";
    font-style: normal;
    font-size: 4vw;
    color: rgb(92, 102, 64);
  }

  .slogan{
    font-family: "Tinos", "serif";
    font-style: italic;
    font-size: 2vw;
    color: rgb(92, 102, 64);
  }
  
  .nav-button{
    background: rgb(132, 160, 113);
    padding: 8px;
    margin: 25px;
    color: rgb(65, 69, 54);
    border-radius: 25px;
    text-decoration: none;
    box-shadow: 10px 5px 5px rgba(2, 1, 1, 0.295);
    font-size: 22px;
  }

  .nav-button:hover{
    background: rgba(175, 131, 99, 0.925);
    padding: 8px;
    margin: 25px;
    color: rgb(65, 69, 54);
    border-radius: 25px;
    text-decoration: none;
    box-shadow: 10px 5px 5px rgba(2, 1, 1, 0.295);
  }


 

  .mission-box {
    display: flex;
    border: solid rgb(65, 69, 54) 5px;
    border-radius: 25px;
    padding: 0px;
    margin: 18px;
    margin-left: 0px;
    margin-right: 0px;
    height: auto;
    width: 100%;

  }

  .mission-slide{
    position:relative;
    animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}
  }

  .headshot {
    display: flex;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-left: solid rgb(65, 69, 54) 5px;;
    margin: 0px;
    height:auto;
    width: 350px;
    /* box-shadow: 10px 5px 5px rgba(2, 1, 1, 0.295); */
  }


  .leen_blurb{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: rgb(65, 69, 54);
    /* border: 4mm ridge rgba(68, 70, 30, 0.6); */
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    background-color: rgb(132, 160, 113);
    padding: 0px;
    padding-left: 18px;
    padding-right: 18px;
    margin: 0px;
    margin-right: 0px;
    /* box-shadow: 10px 5px 5px rgba(2, 1, 1, 0.295); */
    width: auto;
    height:auto;
  }

  .leen-blurb-head {
    font-size: 2em;
  }
  
  .leen-blurb-contents {
    font-size: 22px;
  }

  .leen_blurb_about{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    color: rgb(65, 69, 54);
    border-radius: 25px;
    background-color: rgb(132, 160, 113);
    padding: 18px;
    margin: 18px;
    margin-left: 0px;
    margin-right: 0px;
    height: auto;
    width: auto;
    height:auto;
    border: solid rgb(65, 69, 54) 5px;
  }

  .about_head{
    display: flex;
    flex-direction: row;
    justify-content: end;
    width: 100%;
  }

  .logo{
    display: flex;
    border-radius: 25px;
    /* border: rgb(65, 69, 54) 25px; */
    margin: 18px;
    width: 450px;
    height: auto;
    /* box-shadow: 10px 5px 5px rgba(2, 1, 1, 0.295); */
  }

  .about {
    display: flex;
    flex-direction: row;
    justify-content:center;
    flex-wrap: wrap;
    background-color: rgba(223, 152, 102, 0.925);
    border-radius: 25px;
    height: 100%;
    margin: 18px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .seven-dimensions{
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
    border: solid rgb(65, 69, 54) 5px;
    background: rgb(132, 160, 113) ;
    border-radius: 25px;
    padding: 18px;
    margin: 18px;
    margin-left: 0px;
    margin-right: 0px;
    height: 83%;
  }

  .domension-container {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    justify-items: stretch;
    height: auto;
    width: 100%;
  }

  .card-box-outer{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    
  }

  .card-box-inner{
    display: flex;
    flex-flow: row wrap;
    padding: 18px;
    width:fit-content;
    height: auto;
  }

  .card {
    display: flex;
    flex-direction: column;
    color: rgb(65, 69, 54);
    border-radius: 25px;
    background-color: rgb(132, 160, 113);
    padding: 18px;
    margin: 18px;
    font-size: 22px;
    height: max-content;
    
  }

  .button-left {
    background: rgb(132, 160, 113);
    padding: 8px;
    margin: 25px;
    height: 14px;
    color: rgb(65, 69, 54);
    border-radius: 25px;
    border: rgb(65, 69, 54);
    text-decoration: none;
    /* box-shadow: 10px 5px 5px rgba(2, 1, 1, 0.295); */
    font-size: 22px;
  }
  .button-left:hover {
    /* background: rgba(175, 131, 99, 0.925); */
    padding: 8px;
    margin: 25px;
    height: 14px;
    color: rgb(127, 131, 115);
    border: rgb(65, 69, 54);
    border-radius: 25px;
    text-decoration: none;
    /* box-shadow: 10px 5px 5px rgba(2, 1, 1, 0.295); */
  }
  .button-right {
    background: rgb(132, 160, 113);
    padding: 8px;
    margin: 25px;
    height: 14px;
    color: rgb(65, 69, 54);
    border-radius: 25px;
    border: rgb(65, 69, 54);
    text-decoration: none;
    /* box-shadow: 10px 5px 5px rgba(2, 1, 1, 0.295); */
    font-size: 22px;
  }
  .button-right:hover {
    /* background: rgba(175, 131, 99, 0.925); */
    padding: 8px;
    margin: 25px;
    height: 14px;
    color: rgb(127, 131, 115);
    border: rgb(65, 69, 54);
    border-radius: 25px;
    text-decoration: none;
    /* box-shadow: 10px 5px 5px rgba(2, 1, 1, 0.295); */
  }

  footer{
    display: flex;
    flex-direction: row;
    justify-content: center; 
    color: #414536;;
    background-color: rgb(65, 69, 54);  
    height: 20px;
    box-shadow: 0 50vh 0 50vh rgb(65, 69, 54);
    width: 100%;
    position: fixed;
    bottom: 20px;
    margin-top: 15px;
    padding: 18px;
    
}

.icon-box{
  display: flex;
  justify-content: space-around;
  width: 65%;
}
/* rgba(203, 208, 207, 1);rgba(131, 121, 94, 1); */