/*
VERSION 1.2
*/

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


body{
    font-family: 'Montserrat', sans-serif;
    font-size: 16pt;
    background: rgba(170,96,96,0.11);
    color: #00064d;  
}

div {
/*  border: 1px solid black; */
}


.navlist {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}

.navlist a{
  text-decoration:none;
  color: inherit;
}


.site_container {
  height: 100vh;
}

.body {
  display: grid;
  grid-template-columns: 1fr 5fr;
  gap: 1rem;
}

.grid-item {
  padding: 10px;
}

.rightcontent {
  padding-top: 0px;
}
.grid-topic {
  padding-top: 0px;
}

.supheader {
    font-family: 'Montserrat', sans-serif;
    padding-top: 3px;
    font-weight: bold;
    color: #0216ec3b;
    font-size: 3em;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #34004E;
    -webkit-text-fill-color: #0216ec3b;
}

.subheader{
    font-style: italic;
}

.content_segment img {
    width: 120px;
    border-radius: 5px;
}

.content_segment_emoji {
    font-size: 2em;
}

.teach *  img {
    width: 100px;
    border-radius: 5px;
}

.wordcloud img{
    width: 100%;
}

.content_segment{
  display:inline-block;
  padding-left: 5px;
  padding-bottom: 20px;
}

.item_summary{
  display:none;
}

.item_header{
  font-family: 'Montserrat', sans-serif;
  padding-top: 3px;
  font-weight: bold;
  color: #a202ec3b;
  /*   color: #0216ec3b;*/
  font-size: 3em;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #f6eded;
  -webkit-text-fill-color: #040d74b0;


/*    background-image: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,.75), rgba(255,255,255,0));*/
}

.cv_object {
  height: 90vh;
  width: 91%;
}

.content_segment{
  width: 90%;
}

.content_segment_title{
  font-weight: bold;
}
.content_caption {

}

.youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

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



.navlist li.selected_nav{
  
  animation-name: flip-horizontal;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
    
  /* shorthand
  animation: flip-horizontal 1s linear 0s 1 normal none;*/

}

.navlist li.unselected_nav{

  animation-name: flip-back;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
    
  /* shorthand
  animation: flip-horizontal 1s linear 0s 1 normal none;*/

}

.selected_item{
		
  animation-name: fade-in;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
    
  /* shorthand
  animation: flicker-in 2s linear 0s 1 normal none;*/
}
@keyframes fade-in {
  0% {
    transform:translateY(-50px);
    opacity:0;
  }
  100% {
    transform:translateY(0);
    opacity:1;
  }
}

.unselected_item{
		
  animation-name: fade-out;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
    
  /* shorthand
  animation: flicker-in 2s linear 0s 1 normal none;*/
}
@keyframes fade-out {
  0% {
    transform:translateY(0);
    opacity:1;
  }
  100% {
    transform:translateY(50px);
    opacity:0;
  }
}

@keyframes flip-horizontal {
    
  0% {
    transform:rotateX(0);
  }
  100% {
    transform:rotateX(-180deg);
  }
}

@keyframes flip-back {
    
  0% {
    transform:rotateX(-180deg);
  }
  100% {
    transform:rotateX(0);
  }
}

@media only screen and ( max-width: 760px ) /* 320 <>640px */
{
/*body {background: green;}*/

}


@media only screen and ( max-width: 20em ), only screen and (max-device-width: 500px) /* <320px */
{
/*body {background : yellow;}*/
   

}