/*


  @import url('https://fonts.googleapis.com/css2?family=Flow Block&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Flow Block&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Flow Block&display=swap');
*/




:root{

--link-color: #56682c;
--link-color-hover: #728740;
    
    
--canvas-bg-color: #56682c;
--canvas-text-color: white;
--canvas-text-color-hover: grey;

--header-height: 80px;
--header-img: url();
    
--title-bg-color: #728740;
--title-pic-radius: 5px;
--title-pic-render: pixelated;
    
    
--sidebar-top-color: #9bb55f;
--sidebar-top-text-color: black;
--sidebar-link-bg-color: #deefb7;
--sidebar-link-bg-color-hover: #c8dd96;
--sidebar-link-text-color: black;    
    
--main-bg-color: #faf9ec;  
--main-2-bg-color: #deefb7;
--main-bg-img: url();
    
--quote-side-color: #c8dd96;
--quote-bg-color: #deefb7;

--img-border-radius: 5px;
--div-border-radius: 5px;
 
--main-title-font: "Flow Block";
--header-font: "Flow Block";
--main-font: "Flow Block" ;
}

img{
 image-rendering: pixelated; 
}





/*misc shit*/
body {
margin: 0;
padding: 0;
background:var(--main-2-bg-color);
line-height: 133%;
font-size: 0.98em;
font-family: var(--main-font), "Open Sans", "Droid Sans", "Calibri", sans-serif;

/*deadass what do these vars even do*/
--tfc-dark-mode-text-primary: #e4e4e7;
--tfc-dark-mode-text-secondary: #71717a;
--tfc-dark-mode-bg-primary: #27272a;
--tfc-dark-mode-bg-primary-2: #3f3f46;
--tfc-dark-mode-bg-secondary: #52525b;
}

a {
  color: var(--link-color);
  }

a:hover, a:focus {
  color:  var(--link-color-hover);
  transition: ease-in 0.1s, ease-out 0.1s;
  }


h1:not([class=".title-text"]), h2, h3 {
  font-family: var(--header-font) !important;
  }


/*Sticky navigation links at the top of the page.*/
.quick-nav {
  position:fixed;
  z-index: 999;
  width: 100%;
  background: var(--canvas-bg-color);
  text-align: right;
  color: var(--canvas-text-color);  
  font-size: 0.875em;
  }
  
.navbar {
  padding: 1px 25px;
  
  }
  
.navbar a {
  display: inline-block;
  text-decoration: none;
  color: var(--canvas-text-color);
  padding: 6px 4px;
  margin: 0 2px;
  }
  
  .navbar a img {
   height: 15px; 
  }
  
.navbar a:hover, .footer a:hover, .navbar a:focus, .footer a:focus {
  color: var(--canvas-text-color-hover);
  transition: ease-in 0.1s, ease-out 0.1s;
  }


/*header and header image*/
.header {
  height: var(--header-height);
  background: var(--header-img), var(--canvas-bg-color);
  background-repeat: repeat;
  background-attachment: scroll;
  background-size: contain;
  image-rendering: pixelated;
  
  }

/*title and title img*/
.title {
  background: var(--title-bg-color);
  min-height: 60px;
  margin-bottom: -25px;
  text-align: right;
  }
  
.title-text, .title-pic {
  padding:0;
  margin: 0;
  display: inline-block;
  vertical-align: top;
  }
  
/*Contains the text tagline.*/
.title-text {
  padding-right: 1.5em;
  width: calc(85vw - 110px);
  line-height: 167%;
  margin-top: 0px;
  padding-bottom: 0px;
  }
  
.title-text h1 {
  padding:0;
  font-size: 32px;
  font-family: var(--main-title-font), cursive !important;
  }

.title-pic {
  height: 100px;
  margin-right: 40px;
  margin-top: -12px;
  margin-bottom: -12px;
  position: inherit;
  border: 0px solid var(--title-bg-color);
  border-radius: var(--title-pic-radius);
image-rendering: var(--title-pic-render);
  }
  
.title-pic img {
  height: 100%;
  overflow: hidden;
  }



/*sidebar*/
.sidebar {
  width: 320px;
  margin: 50px 0;
  position: absolute;
  }
  
.sidebar h1 {
  font-size: 1.2rem;
  background: var(--sidebar-top-color);
  color: var(--sidebar-top-text-color);
  padding: 12px 10px 10px 10px;
  margin: auto;
  }
  
.sidebar a {
  display: block;
  border-left: 3px solid var(--sidebar-top-color);
  background: var(--sidebar-link-bg-color);
  padding: 5px;
  margin: 10px 0;
  color: var(--sidebar-link-text-color);
  text-decoration: none;
  }
  
.sidebar a:hover, .sidebar a:focus {
  background: var(--sidebar-link-bg-color-hover);
  transition-duration: .1s;
  }
  
.sidebar, .main {
  display: inline-block;
  }

/*Contains main content boxes.*/
.main {
  margin: 50px 100px 50px 350px;
  width: auto;
  width: calc(100vw - 550px);
  }
  




/*main content and bg*/
.page-wrapper {
  padding: 0 100px;
  margin: 0 auto;
  background: var(--main-bg-color);
  background: var(--main-bg-img);
    /*Gradient makes tiles "fade in".*/
background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    image-rendering: pixelated;
}


/*Basic container type for subsections of main and sidebar divs*/
.box {
  margin-bottom: 15px;
  }
  
/*Inner content div for boxes. Padding goes here so sidebar headers etc can keep their no-margin look.*/
.inner {
  background:  var(--main-bg-color);
  padding: 10px 25px;
  }
  
  .innernav {
      overflow: scroll;
  height: 200px;
  }
  

.inner img {
  max-width: 100%; /*Prevent image overflow.*/
  height: auto;
  border-radius: var(--img-border-radius); /*Give images in content rounded corners.*/
  }
  
.box, .title-pic img {
  border-radius: var(--div-border-radius);
  overflow: hidden; /*Force inner divs to conform to rounded corners.*/
  }


blockquote {
  border-left: var(--quote-side-color) 3px solid;
  background: var(--quote-bg-color);
  padding: 0.1px 0.75rem;
  margin: 0 1.5rem;
  }

hr {
  width: 75%;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  }



.footer {
  background: var(--canvas-bg-color);
  color: var(--canvas-text-color);
  padding: 5px 20px;
  font-size: 0.75em;
  padding-bottom: 10px;
  }
  
.footer a {
  color: var(--canvas-text-color);
  }


.footer-column {
  width: 30%;
  margin: 5px 10px;
  display: inline-block;
  vertical-align: top;
  }
.footer-column img{
 margin-left: 10px; 
}



/*Adapt to narrower screens.*/
@media(max-width: 900px) {
  .page-wrapper {
    padding: 0 50px;
    }
  
  .sidebar {
    width: 25vw;
    }
    
  .main {
    margin: 50px 0 50px calc(25vw + 30px);
    width: calc(75vw - 150px);
    }
    
  .title-pic {
    margin-right: 7vw;
    }
    
  .title-text {
    padding-left: 1vw;
    padding-right: 2vw;
    }
  
  }
  
/*Mobile layout.*/
@media(orientation: portrait) {  
  .page-wrapper {
    padding-top: 0.1px;
    padding-bottom: 0.1px;
    }
  
  .sidebar, .main {
    display: block;
    margin: 0 auto;
    position: static;
    width: 100%;    
    }
    
  .sidebar {
    margin-top: 50px;
    }
    
  .main {
    margin-top: 30px;
    margin-bottom: 30px;
    }
    
    
  }
  
/***
For really narrow screens which cause the title text to wrap. 
You may need to adjust the width at which this kicks in to fit 
your own title.
***/
@media(max-width: 500px) {
  .header {
    height: 60vw;
    }
  
  .title {
    padding-right: 0;
    }
  
  .title-text {
    margin-top: -5px;
    }
    
  .title-text h1 {
    font-size: 6vw;
    line-height: 75%;
    }
    
  .title {
    height: calc(auto - 25px);
    }
    
  .page-wrapper {
    padding: 0.1px 7vw;
    }
    
  /*For extra narrow screens where the columns would get too skinny.*/
  .footer-column {
    display: block;
    width: 100%;
    margin: 0 auto;
    }
  }









.rdp {
  --rdp-cell-size: 40px;
  --rdp-accent-color: #0000ff;
  --rdp-background-color: #e7edff;
  --rdp-accent-color-dark: #3003e1;
  --rdp-background-color-dark: #180270;
  --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
  --rdp-outline-selected: 2px solid rgba(0, 0, 0, 0.75); /* Outline border for focused _and_ selected elements */

  margin: 1em;
}

/* Hide elements for devices that are not screen readers */
.rdp-vhidden {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  position: absolute !important;
  top: 0;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  border: 0 !important;
}

/* Buttons */
.rdp-button_reset {
  appearance: none;
  position: relative;
  margin: 0;
  padding: 0;
  cursor: default;
  color: inherit;
  outline: none;
  background: none;
  font: inherit;

  -moz-appearance: none;
  -webkit-appearance: none;
}

.rdp-button {
  border: 2px solid transparent;
}

.rdp-button[disabled] {
  opacity: 0.25;
}

.rdp-button:not([disabled]) {
  cursor: pointer;
}

.rdp-button:focus:not([disabled]),
.rdp-button:active:not([disabled]) {
  color: inherit;
  border: var(--rdp-outline);
  background-color: var(--rdp-background-color);
}

.rdp-button:hover:not([disabled]) {
  background-color: var(--rdp-background-color);
}

.rdp-months {
  display: flex;
}

.rdp-month {
  margin: 0 1em;
}

.rdp-month:first-child {
  margin-left: 0;
}

.rdp-month:last-child {
  margin-right: 0;
}

.rdp-table {
  margin: 0;
  max-width: calc(var(--rdp-cell-size) * 7);
  border-collapse: collapse;
}

.rdp-with_weeknumber .rdp-table {
  max-width: calc(var(--rdp-cell-size) * 8);
  border-collapse: collapse;
}

.rdp-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  text-align: left;
}

.rdp-multiple_months .rdp-caption {
  position: relative;
  display: block;
  text-align: center;
}

.rdp-caption_dropdowns {
  position: relative;
  display: inline-flex;
}

.rdp-caption_label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 0.25em;
  white-space: nowrap;
  color: currentColor;
  border: 0;
  border: 2px solid transparent;
  font-family: inherit;
  font-size: 140%;
  font-weight: bold;
}

.rdp-nav {
  white-space: nowrap;
}

.rdp-multiple_months .rdp-caption_start .rdp-nav {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.rdp-multiple_months .rdp-caption_end .rdp-nav {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.rdp-nav_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rdp-cell-size);
  height: var(--rdp-cell-size);
  padding: 0.25em;
  border-radius: 100%;
}

/* ---------- */
/* Dropdowns  */
/* ---------- */

.rdp-dropdown_year,
.rdp-dropdown_month {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.rdp-dropdown {
  appearance: none;
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  cursor: inherit;
  opacity: 0;
  border: none;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.rdp-dropdown[disabled] {
  opacity: unset;
  color: unset;
}

.rdp-dropdown:focus:not([disabled]) + .rdp-caption_label,
.rdp-dropdown:active:not([disabled]) + .rdp-caption_label {
  border: var(--rdp-outline);
  border-radius: 6px;
  background-color: var(--rdp-background-color);
}

.rdp-dropdown_icon {
  margin: 0 0 0 5px;
}

.rdp-head {
  border: 0;
}

.rdp-head_row,
.rdp-row {
  height: 100%;
}

.rdp-head_cell {
  vertical-align: middle;
  text-transform: uppercase;
  font-size: 0.75em;
  font-weight: 700;
  text-align: center;
  height: 100%;
  height: var(--rdp-cell-size);
  padding: 0;
}

.rdp-tbody {
  border: 0;
}

.rdp-tfoot {
  margin: 0.5em;
}

.rdp-cell {
  width: var(--rdp-cell-size);
  height: 100%;
  height: var(--rdp-cell-size);
  padding: 0;
  text-align: center;
}

.rdp-weeknumber {
  font-size: 0.75em;
}

.rdp-weeknumber,
.rdp-day {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--rdp-cell-size);
  max-width: var(--rdp-cell-size);
  height: var(--rdp-cell-size);
  margin: 0;
  border: 2px solid transparent;
  border-radius: 100%;
}

.rdp-day_today:not(.rdp-day_outside) {
  font-weight: bold;
}

.rdp-day_selected:not([disabled]),
.rdp-day_selected:focus:not([disabled]),
.rdp-day_selected:active:not([disabled]),
.rdp-day_selected:hover:not([disabled]) {
  color: white;
  background-color: var(--rdp-accent-color);
}

.rdp-day_selected:focus:not([disabled]) {
  border: var(--rdp-outline-selected);
}

.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rdp-day_range_end.rdp-day_range_start {
  border-radius: 100%;
}

.rdp-day_range_middle {
  border-radius: 0;
}

.hidden-sidebar .Sidebar__TodoListContainer {
  display: none;
}

.hidden-sidebar .todo-list-header {
  display: none;
}

.hidden-sidebar .to-do-list {
  display: none;
}

#tfc-wall-rose {
  position: relative;
}