@font-face {
  font-family: LucymarSansRegular;
  src:url("/assets/fonts/Lucymar/LucymarSans-Regular.ttf");
}

@font-face {
  font-family: redkostComic;
  src:url("/assets/fonts/Redkost-Comic/Redkost Comic.otf");
}

@font-face {
  font-family: beon;
  src:url("/assets/fonts/Beon/Beon-Regular.otf");
}



body,h1,h2,h3,h4,h5,h6 {
  font-family: LucymarSansRegular;
}
h3 {
  font-family: beon;
  font-weight: bold;
}

html {
  overflow-y: hidden;
}

body {
  /* overflow-x: auto; */
  overflow-y: auto;  
}


body, html {
  height: 100%;
  line-height: 1.8;
  font-size: 18px;
  scroll-padding-top: 60px;
  background-color: var(--courseBackground);
}


a[target="_blank"]::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}

#loading {
  display: none; 
  text-align: center; 
  margin: -23px 0 -28px;
  color: var(--courseColor);
}

/* HOMEPAGE */
#home {
  color: var(--courseColor);
  max-width: 800px;
  margin: auto;
}

#home img {
  background: antiquewhite;
  border-radius: 40px;
  width: 140px;

}
#home img:hover {
  cursor: pointer;
  background: #CCC;
}

#home p {
  margin-top: -27px;
  color: rgba(0,0,0,0.5);
  text-align: center;
}

#homeText {
  max-width: 800px;
  margin: auto;
}
#homeText h3 {
  margin-top: 48px;
  border-bottom: 2px dashed var(--courseColor);
  width: 35%;
  color: var(--courseColor);
}
#homeText h4 {
  margin-top: 48px;
}

/* CALENDAR */

#toTop {
  position: fixed;
  top: 92%;
  right: 40px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(0,0,0,0.1);
  text-decoration: none;
  color: var(--courseColor);
}
#toTop:hover {
  background: rgba(255,255,255,0.3);
  text-decoration: none;
  color: var(--courseColor);
}

#monthsContainer {
  margin: 24px auto 48px;
  width: 412px;
  height: 300px;
  overflow-y: scroll;
  background: var(--courseColor);
  border-radius: 24px;
  border: 2px solid var(--courseColor);
  color: var(--courseColor);
}


.monthTitleCalendar {
  text-align: left;
  padding: 8px 0 0 6px;
  width: 350px;
  height: 36px;
  float: left;
  color: white;
}

.calendarDay {
  width: 50px;
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)), var(--courseBackground);
  height: 36px;
  float: left;
  text-align: center;
}
.calendarDay:hover {
cursor: pointer;
background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), var(--courseBackground);
}

.weekend {
  color: rgba(0,0,0,0.4);
}
.today {
  box-shadow: 0 0 0 3px var(--courseColor) inset;
  border-color: var(--courseColor) !important;
}

.dayCard {
  border: 2px solid;
  border-color: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 0 12px;
  margin: 0 16px;
  height: 240px;
  overflow-y: auto;
  overflow-wrap: break-word;
  color: rgba(0,0,0,0.8);
}
.dayCard:target {
  box-shadow: 0 0 0 3px var(--courseHighlight) inset;
  border-color: var(--courseHighlight) !important;
}

.dayCardTitle {
  font-size: 16pt;
  color: var(--courseColor);
}

#dayCardsDiv {
  display: none;  
}
#dayCardsDiv a {
  color: var(--courseLink);
  text-decoration: none;
}
#dayCardsDiv a:hover {  
  text-decoration: underline;
}

/* new flow page */
.na {
  background-color: #AAA;;
}



footer {
  background-color: var(--footerColor);
  color: white;
  /* margin-top: 180px; */
}
footer a {
  color: white;
}

.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}

/* pages not homepage */
.mainContent {
max-width:1200px;
margin-top:18px;
}
.mainContent h1 {
text-align: center;
}

.toTop {
  text-align: right;
  float: right;
}
.toTop:hover {
  cursor: pointer;
}