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

html {
  height: 100%;
  width: 100%;
}

body {
    min-height: 100vh;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #000;
    font: 18px/1.6;
    font-family: "Garamond";
    word-wrap: break-word;
    line-height: 2.0;

    display: flex;
    flex-direction: column;
}

p {
  line-height: 1.3;
  margin: 20px 20px;
}

.text {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.compactText {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

table {
  /*margin: 20px 20px;*/
  margin: 0px 0px;
}

header{
  top: 0;
  left: 0;
  padding: 10px;
  width: 100%;
  z-index: 99;
  background-color: white;
  display: flex;
  justify-content: center;
}

.container {
    /*opacity: 0;
    transition: opacity 1s;*/  
  
    height: 100%;
    width: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    align-items: center;
    /*border: 3px solid green; */
    min-height: 40px;
    transition: 0.3s;
    /*max-width: 800px;*/
}

h1 {
  font: 17px/1.8;
  color: #f45353ff;
  margin-bottom: 15px;
}

h2 {
  background-color: rgb(255, 255, 255);
  color: rgb(100, 100, 100);
  display: block;
  width: fit-content;
  font-size: 16px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 30px;
  margin-left: 10px;
  margin-bottom: 30px;
  border: rgb(100, 100, 100) 2px solid;
  box-shadow: 5px 10px;
}

/* Add a background color to the top navigation */
.topnav {
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }
  
/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f45353ff;
    text-align: center;
    margin-right: 20px;
    padding: 10px 10px;
    text-decoration: none;
    font-size: 17px;
    /*background-color: white;
    border: 1px solid #c77ac9;
    border-radius: 10px;*/
}

.topnav a:first-child{
    margin-left: 10px;
}
  
/* Change the color of links on hover */
.topnav a:hover {
    background-color: #f45353ff;
    color: white;
}
  
/* Add an active class to highlight the current page */
.topnav a.active {
    background-color: #94478e;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
}
  
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;height: 300px;box-sizing: border-box;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
      margin-left: 10px;
    }
}

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(255,255,255); /* Black fallback color */
  background-color: rgba(255,255,255, 0.95); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 10%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 800;
  color: black;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: red;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}


.dropdown {
  float: left;
  display: block;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;    
  border: none;
  outline: none;
  color: red;
  padding: 19px 14px;
  background-color: inherit;
  font-family: inherit;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  /*min-width: 160px;*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 999;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  margin-right: 0px;
}

.dropdown-content a:first-child {
  margin-left: 0px;
}

.dropdown:hover .dropdown-content {
  display: block;
}


/*-------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

nav.breadcrumb ol { list-style: none; padding-left: 10px; font-size: 14px; }
nav.breadcrumb ol li { display: inline; }
nav.breadcrumb ol li+li:before {
    content: ">";
    padding: 10px;
}
nav.breadcrumb ol li a { text-decoration: underline; text-decoration-style: dotted; color: darkblue; }
nav.breadcrumb ol li a:hover { text-decoration: overline; }

/*-------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

.smallPicture{
    display: inline;
    min-width: 200px;
    width: 20%;
    max-width: 70%;
    z-index: 10;
}

.yuiPic {
  display: inline;
  width:60%;
  max-width: 300px;
  max-height: 270px;
  z-index: 10;
  margin-left: 60px;
}

@media screen and (max-width:400px) {
  .yuiPic {
    margin-left: 20px;
  }
  .talk-bubble {
    margin-left: 0px;
    margin-right: 0px;
  }
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.flex-item {
  background-color: #6CA86C;
  padding: 10px;
  margin: 10px;
  border: 1px dashed #6CA86C;
  flex: 30%;
  color: #fff;
  p {
    color: #fff;
  }
}

.flex-item:hover {
  background-color: #fff;
  color: #6CA86C;
  .containerTitle, p {
    color: #6CA86C;
  }
}

.flex-item > a {
  text-decoration: underline dashed #6CA86C;
  color: #6CA86C;
}

.containerTitle {
  font-size: 20px;
  color:#fff;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 650px) {
  .flex-item {
    flex: 100%;
  }
}


/*===================================================
                     TALK BUBBLE
////////////////////////////////////////////////////*/
.thought {
  position: relative;
  width: 300px;
  height: 75px;
  padding: 1rem 1rem 0;
  text-align: center;
  background-color: #fff;
  border: 8px solid royalblue;
  border-radius: 30px;
  margin-left: 250px;
}

.thought:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 30px;
  top: 91px;
  border: 25px solid;
  border-color: royalblue transparent transparent royalblue;
}

.thought:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 38px;
  top: 91px;
  border: 15px solid;
  border-color: #fff transparent transparent #fff;
}



/*==================================================*/
/*            LESSON POST RELATED ITEMS             */
/*==================================================*/
.mainBody > table {
  margin: 20px 20px;
}

.smallText{
  font-size: 14px;
}

.tag {
  background: #588fe5;
  display: inline-block;
  color: #fff;
  font-size: 12px;
  position: relative;
  padding: 0 10px 0 10px;
  border-radius: 4px;
  margin: 0 10px 0 0;
  text-decoration: none;
}

.tag:hover {
  background-color: #739fe4;
}

.tag:before {
  background: #fff;
  width: 10px;
  height: 10px;
  content: "";
  display: inline-block;
  border-radius: 20px;
  margin: 0 5px 0 0;
}

.tag:hover:after {
  border-color: transparent transparent transparent #739fe4;
}


/*==================================================*/
/*                     FORM CSS                     */
/*==================================================*/
.formTable {
  margin: 0px auto;
  text-align:left;
  padding:0px;
  border: 0px;
  align-items: center;
  border-spacing: 10px;
}

.formInput {
  height:30px;
  padding:10px;
}


/*=================================================*/
/*                      FOOTER                     */
/*=================================================*/
.footer {
  display: block;
  background-color: #a1719c;
  color: white;
  font-size: 12px;
  padding: 40px;
  width: 100%;
  align-items: center;
  text-align: center;
  justify-content: center;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
}
/*=================================================*/
/*=================================================*/
/*=================================================*/

.content {
  padding: 20px;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

/*=================================================*/
/*                   LESSON BOXES                  */
/*=================================================*/

.boxContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.smallBox {
  background-color: #fff;
  padding: 10px;
  margin: 10px;
  border: 1px solid grey;
  flex: 20%;
  min-height: 200px;
  max-width: 200px;
  color: #6CA86C;
  p {
    color: #6CA86C;
    font-size: 10px;
  }
}

.smallBox:hover {
  background-color: #fff;
  color: #6CA86C;
  border: 1px dashed #6CA86C;
  .boxTitle, p {
    color: #6CA86C;
  }
}

.smallBox > a {
  text-decoration: underline dashed #6CA86C;
  color: black;
}

.boxImage {
  margin-top: 10px;
}

.boxTitle {
  font-size: 12px;
  color:#6CA86C;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 650px) {
  .smallBox {
    flex: 100%;
  }
}


/*=================================================*/
/*                     CALENDAR                    */
/*=================================================*/
.calendar > table, tr, td {
  margin: 0px 0px;
}

.calendar {
  line-height: 1.0;
}

.fc-event-main {
  margin: 5px;
}