/*
  This css file is for individual users to restyle items for their personal site,
  or for the implementation of features specifically for their site. Anything that
  is an official part of the theme (ex. Pull Requests) should be included in main.css
  and follow the formatting and style given.
*/

.photo-gallery-3 {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.photo-gallery-3 figure {
  width: 30%;
  margin: 3px;
}

.photo-gallery-3 figcaption {
  line-height: 1.1;
  margin: 2px;
}

.float-right-image {
  float: right;
  margin: 0 1em 1em 1em;
}

/** The menu for side bar */
ul.side-menu {
  border: none !important;
  margin-top: 1em !important;
  
}

ul.side-menu li {
  color: gray;
  font-size: 75%;
  padding-left: 2em;
  padding-bottom: 3px;
}

ul.side-menu a {
  border-bottom: none;
}
	

/* Share buttons */
.share-btn {
  font-size: 0.8em;
}

#socnet-share a {
  padding:  0.3em;
}

/* a link */
a {
  border-bottom:  1px dotted #2eb8ac;
}

.codepen-padded-border {
  padding:  1em; 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.jnotebook {
  margin: 2em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding:  2em;
}

.jnotebook h1 {
  font-size: 98%
}

.jnotebook h2 {
  font-size: 95%
}

.jnotebook h3 {
  font-size: 85%
}

.jnotebook h4 {
  font-size: 75%
}

/* navigation */
.nav-place {
  font-size: 0.35em;
  padding-left: 1em;
}

/* boxes */
.container-years {
  width: 100%;
  padding: 1em;
  text-align: center;
}

.container-years .box {
  display: inline-table;
  width: 10%;
  border: black thin solid;
  margin: 0.5em;
  padding: 0.5em;
}

.container-years .box a {
  border-bottom: none;
}

.container-years .box:hover {
  background: #FBF8CC;
  border: white thin solid;
  ;
}

.container-years .box:last-child {
  width: unset;
}

.container-topics {
  width: 100%;
  margin: 2em 0;
  display: grid;
  padding: 2em;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}

.container-topics-2 {
  width: 100%;
  margin: 1em 0;
  display: grid;
  padding: 0em 3em;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 4em;
  grid-row-gap: 1em;
}

.col-topic {
  padding: 1.5em 0;
  text-align: center;
  align-items: center;
  font-weight: bolder;  
  opacity: 0.5;
  position: relative;
}

.col-topic img {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.col-topic .middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.col-topic:hover img {
  opacity: 0.3;
}

.col-topic:hover .middle {
  opacity: 1;
}

.col-topic .text {
  color: black;
  font-size: 2.5em;
  padding: 16px 32px;
}

.col-topic:hover {
  opacity: 1;
}

.col-topic a {
  border-bottom: none; 
}

.col-topic a:hover {
  color:  inherit;
}


/* https://coolors.co/palette/fbf8cc-fde4cf-ffcfd2-f1c0e8-cfbaf0-a3c4f3-90dbf4-8eecf5-98f5e1-b9fbc0 */

.box-color-1 {
  background: #B9FBC0;
}

.box-color-2 {
  background: #98F5E1;
}

.box-color-3 {
  background: #8EECF5;
}

.box-color-4 {
  background: #90DBF4;
}

.box-color-5 {
  background: #A3C4F3;
}

.box-color-6 {
  background: #CFBAF0;
}

.box-color-7 {
  background: #F1C0E8;
}

.box-color-8 {
  background: #FFCFD2;
}

.box-color-9 {
  background: #FDE4CF;
}

.box-color-10 {
  background: #FBF8CC;
}

.notice-box {
  float: right; 
  width: 300px; 
  padding: 1.5em; 
  margin: 2em 1em 1em 1.5em;  
  font-size: 75%;
  background: #FFCFD2;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  line-height: 1.5em;
}

.notice-box strong {
  font-size: 125%;
}

.gallery-image {
  text-align: center;
}

.gallery-image a {
  border: none;
}

.gallery-image img {
  transform: scale(0.75);
  transition: transform .2s;
}

.gallery-image img:hover {
  transform: scale(0.80);
}



br.spacing {
  display: block;
  margin-top: 0.5em;
  content: " ";
}

.screenshot {
  width: 75%;
  text-align: center;
}

.sticky-note {
  position: sticky;
  bottom: 20px;
  padding: 1em;
  background: #90DBF4;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* vertical spacing */

.vspace-075em {
  margin-top: 0.75em !important;
}

.vspace-1em {
  margin-top: 1em !important;
}

.vspace-2em {
  margin-top: 2em !important;
}

.vspace-3em {
  margin-top: 3em !important;
}


/* for pdf-embeded */

.pdf-container {
  position: relative;
  width: 90%; 
  padding-bottom: calc(100% * (10 / 17)); /* Example for A4 portrait (height/width * 100) */
  /* Adjust the calculation based on your PDF's aspect ratio */
  overflow: hidden;
  margin: 0 auto; /* Center the container horizontally */
}

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

/* for youtube-embeded */

.video-container {
  position: relative;
  width: 90%; /* Set the width to 90% of its parent */
  padding-bottom: 56.25%; /* Maintain the 16:9 aspect ratio */
  /* For a 4:3 aspect ratio, use padding-bottom: 75%; */
  /* For a 1:1 aspect ratio, use padding-bottom: 100%; */
  overflow: hidden;
  margin: 0 auto; /* Center the video-container horizontally */
}

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