/* @font-face {
  font-family: Hiragino;
  src: url(assets/HiraginoMaruGothicW4.otf)
} */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* background-color: #fffff0; */
  /* font-family: Hiragino, sans-serif; */
}

.header {
  padding: 0 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-family: sans-serif;
  font-size: 20pt;
}

.archive-link {
  text-align: right;
}

.archive-link > a {
  color: black;
  text-decoration: none;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.35s ease-in-out;
}

.archive-link > a:hover {
  opacity: 0.55;
}


.archive-link > i {
  font-size: 12pt;
  transform: translateY(-1px);
}

.chip {
  font-family: Chip, sans-serif;
  font-size: 26pt;
}

.chip > .thesis {
  font-size: 12pt;
  transform: translateY(-15px);
  display: inline-block;  
}

.chip > .livestream {
  font-size: 12pt;
  transform: translateX(-75px);
  display: inline-block;  
}

.chip > .year {
  transform: translateX(-75px);
  display: inline-block;
}

.content-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.content {  
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}

iframe {
  border: 1px solid #121212;
  border-radius: 0 0 40px 0px;
  height: 562px;  
  border-left: 0px solid black;
}

.video-js {
  width: 1000px;
  height: 562px;
  border: 1px solid #121212;
  border-right: 0px solid transparent;
  border-left: 0px solid black;
}

.video-js > button {
  color: #FF5A5A !important;
}

.video-js > .vjs-big-play-button {
  border-color: #FF5A5A !important;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  height: 75px;
  width: 100%;
  /* background-color: #FFFFE4;   */
  border-bottom: 1px solid #121212;
  z-index: 1;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  min-height: 50px;
  width: 100%;
  /* background-color: #FF5A5A;   */
  border-top: 1px solid #121212;
  font-family: sans-serif;
  font-size: 16pt;
  display: flex;
  align-items: center;  
  
}

.footer-content {  
  position: relative;
  padding: 10px 15px;
  width: 100%;
  height: 100%;
  /* font-family: Chip, sans-serif; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18pt;
  letter-spacing: 1px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.visible {
  opacity: 1;
}

.invisible {
  opacity: 0;
}

#text {
  margin: 0;
  margin-top: 4px;
  text-align: center;
  line-height: 1.2;
}

@media all and (max-width: 1400px) {
  .chip {
    font-size: 18pt;
  }
}

@media all and (max-width: 1400px) {

  .title-container {
    width: 100%;
  }

  .footer {
    font-size: 14pt;
  }

  .chip {
    font-size: 26pt;
    text-align: center;
  }

  .chip > .thesis {
    font-size: 26pt;
    transform: none;
  }

  .chip > .livestream {
    font-size: 26pt;
    transform: none;
  }

  .chip > .year {
    font-size: 26pt;
    transform: none;
  }

  .no-mobile {
    display: none;
  }
}

@media all and (max-width: 900px) {
  .content {
    flex-direction: column;
  }
  iframe {
    border-left: 1px solid black;
    width: calc(100% - 0px);
    height: calc(100vh - 100vw - 100px);
    min-height: 250px;
    border-radius: 0;
  }

  .video-js {
    width: 100%;
    height: calc(100vw*9/16);
  }

  #text {
    font-size: 12pt;
  }

  .chip {
    line-height: 1.3;
  }
}

.video-js .vjs-menu-button-inline.vjs-slider-active,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline:hover,.video-js.vjs-no-flex .vjs-menu-button-inline {
  width: 10em
}

.video-js .vjs-controls-disabled .vjs-big-play-button {
  display: none!important
}

.video-js .vjs-control {
  width: 3em
}

.video-js .vjs-menu-button-inline:before {
  width: 1.5em
}

.vjs-menu-button-inline .vjs-menu {
  left: 3em
}

.vjs-paused.vjs-has-started.video-js .vjs-big-play-button,.video-js.vjs-ended .vjs-big-play-button,.video-js.vjs-paused .vjs-big-play-button {
  display: block
}

.video-js .vjs-load-progress div,.vjs-seeking .vjs-big-play-button,.vjs-waiting .vjs-big-play-button {
  display: none!important
}

.video-js .vjs-mouse-display:after,.video-js .vjs-play-progress:after {
  padding: 0 .4em .3em !important
}

.video-js.vjs-ended .vjs-loading-spinner {
  display: none;
}

.video-js.vjs-ended .vjs-big-play-button {
  display: block !important;
}

video-js.vjs-ended .vjs-big-play-button,.video-js.vjs-paused .vjs-big-play-button,.vjs-paused.vjs-has-started.video-js .vjs-big-play-button {
  display: block
}

.video-js .vjs-big-play-button {
  top: 50%;
  left: 50%;
  margin-left: -1.5em;
  margin-top: -1em
}

.video-js .vjs-big-play-button {
  background-color: rgba(255,255,228,0.75);
  font-size: 3em;
  border-radius: 50%;
  height: 2em !important;
  line-height: 2em !important;
  margin-top: -1em !important
}

.video-js:hover .vjs-big-play-button,.video-js .vjs-big-play-button:focus,.video-js .vjs-big-play-button:active {
  background-color: rgba(255,255,228,1)
}

.video-js .vjs-loading-spinner {
  border-color: rgba(255,255, 228,1)
}

.video-js .vjs-control-bar2 {
  background-color: transparent
}

.video-js .vjs-control-bar {
  background-color: rgba(0,0,0,0.5) !important;
  color: #ffffff;
  font-size: 17px
}

.video-js .vjs-play-progress,.video-js  .vjs-volume-level {
  background-color: #2c97de
}

.video-js .vjs-big-play-button {
  height: 2em !important;
  width: 2em !important;
  line-height: 1.7em !important;
  margin-top: -1em !important;
  margin-left: -1em;
  border-width: 4px
}

.video-js .vjs-icon-play:before, .video-js .vjs-big-play-button:before {
  font-size: 40px;
}

.video-js  .vjs-progress-holder {
  font-size: 1.7em;
  /* border-radius: 10px; */
}

.video-js .vjs-progress-holder .vjs-play-progress, .video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-load-progress div, .video-js .vjs-slider,.vjs-volume-level {
  /* border-radius: 10px; */
}

.video-js .vjs-load-progress {
  background: rgba(255,255,255,0.5);
}

.video-js, .video-js video, .vjs-poster, .video-js .vjs-tech {
  /* border-radius: 8px; */
}