@font-face {
    font-family: 'VremenaG';
    font-style: normal;
    font-weight: normal;

    font-display: swap;
    src: local('Vremena Grotesk Bold'), url('VremenaGroteskBold.woff') format('woff');
    }

    @font-face {
    font-family: 'Vremena';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: local('Vremena Bold Italic'), url('VremenaBoldItalic.woff') format('woff');
    }
 
html{
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    font-family: 'VremenaG';
    font-size: 16px;
}

header{
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw; 
    /* margin-top: 2em; */
}
.title{
    font-family: 'Vremena';
    font-size: clamp(3.5rem, 8vw, 8rem);
    -webkit-text-stroke-color:#b1b1b4;
	-webkit-text-stroke-width: 0.09em;
    color: #3d3d3d;
    paint-order: stroke fill;
    line-height: 0.85em;
    position: absolute;
    -webkit-font-smoothing: antialiased;
}
.title { 
  animation: orientSpin 4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  transform-origin: center;
    left: 50%;
transform: translateX(-50%);
    z-index: 8;

}
h1,h2,h3,h4 { 
    display: inherit;
    font-size: inherit;
    margin-top: inherit;
    margin-bottom: inherit;
    margin-left: inherit;
    margin-right: inherit;
    font-weight: inherit;
    margin: 0;
}

.title:nth-child(1) {
  animation-duration: 7.8s;
  animation-delay: 0s;
  top: 1vh;
  
}
.title:nth-child(2) {
  animation-duration: 8.2s;
  animation-delay: 0.3s;
    top: 7vh;
}
.title:nth-child(3) {
  animation-duration: 8.6s;
  animation-delay: 0.6s;
    top: 13vh;
}

@keyframes orientSpin {
  0% {
    transform:  translateY(0) translateX(-50%) rotate(0deg);
  }
  20% {
    transform:  translateY(-10px) translateX(-50%) rotate(720deg); 
  }
  40% {
    transform: translateY(8px) translateX(-50%) rotate(1080deg); 
  }
  60% {
    transform: translateY(-4px) translateX(-50%) rotate(1260deg);
  }
  75% {
    transform: translateY(2px) translateX(-50%) rotate(1350deg);
  }
  90% {
    transform: translateY(0) translateX(-50%) rotate(1400deg);
  }
  100% {
    transform: translateY(0) translateX(-50%) rotate(1440deg); 
  }
}
.subt{
    font-family: 'VremenaG';
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    -webkit-text-stroke-color:#3d3d3d;
	-webkit-text-stroke-width: 0.22em;
    color: whitesmoke;
    paint-order: stroke fill;
    position: absolute;
    z-index: 0;
        z-index: 4;

}

.when{
top: 4vh;
left: 3%;}
.where{
top: 4vh;
right: 3%;
}

.menu{
    position: absolute;
    top: 33%;
    left: 50%;
    transform: translateX(-50%);
    /* width: min(90vw, 600px); */
}
.menuitem{
     font-family: 'Vremena';
   font-size: clamp(3.5rem, 8vw, 8rem);
    -webkit-text-stroke-color: #1BF829;
    -webkit-text-stroke-width: 0.12em;
    paint-order: stroke fill;
    line-height: 0.85em;
    color: #016900;
    text-align: center;
    cursor: pointer;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    stroke-linejoin: bevel;
stroke-miterlimit: 2;
}
.menuitem:nth-of-type(1) { transform: rotate(-10.75deg); }
.menuitem:nth-of-type(2) { transform: rotate(18.16deg); margin-top: 0.6em; }
.menuitem:nth-of-type(3) { transform: rotate(-13.67deg); margin-top: 0.8em; }
.menuitem:nth-of-type(4) { transform: rotate(-33.02deg); margin-top: 0.9em; }
.menuitem:nth-of-type(5) { transform: rotate(13.02deg); margin-top: 0.9em; margin-left: 0.2em; }

.twitch-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

#twitch-player {
  width: 100%;
  height: 100%;
}
#streamtext{
    width: 90vw;
        margin: 1em auto;

}

#abouttext,
#contacttext{
    font-family: 'VremenaG';
    font-size: clamp(1rem, 2vw, 1.7rem);
    margin: 1em auto;
    max-width: 45ch;
        line-height: 1.1em;

}
#contacttext{
    text-align: center;
}
.hidden{
    display: none;
}

a{
    color: inherit;
}
a:hover{
    color: #016900;
    font-family: 'Vremena'
}
table {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    width: 100%;
}
th{
    text-align: center;
    background-color: #3d3d3d;
    color: whitesmoke;
    padding-top: 0.2em;
}
.colBreak{
    text-align: center;
    background-color: #b1b1b4;
    color: whitesmoke;
    padding-top: 0.2em;
}
button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

#speakertext button{
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
        width: 100%;

}
.disclaimer{
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    -webkit-text-stroke-color:#3d3d3d;
	-webkit-text-stroke-width: 0.22em;
    color: whitesmoke;
    paint-order: stroke fill;
}
#speakertext button:hover{
    color: #016900;
}

table, th, td {
  border-bottom: 1px solid #3d3d3d;
  border-collapse: collapse;
  padding-top: 0.3em;
}

#Side {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  background-color: #b1b1b4;
  overflow-x: hidden;
  transition: 0.5s;
}
.speakerIMG{
    width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
/* .snWrap {
    
} */
.speakerName{
    /* position: absolute; */
    color: #016900;
   font-size: clamp(6rem, 13vw, 13rem);
    -webkit-text-stroke-color: #1BF829;
    -webkit-text-stroke-width: 0.12em;
    paint-order: stroke fill;
    text-align: center;
    font-family: 'Vremena';
    overflow: hidden;
    display: block;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
        transform-origin: 50% 50%;
    will-change: transform;
    backface-visibility: hidden;
    padding-left: 1em;
    padding-right: 1em;
}
.sn1Wrap{
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
        position: absolute;

}

.sn1{
    animation: compass-rotate-slow 13s linear infinite;
    animation-delay: 0.05s;

}
.sn2Wrap{
    top: 50%;
    left: 50%;
    transform: translateX(-50%);   
        position: absolute;

}
.sn2{
     
    animation: compass-rotate-fast 8s linear infinite;
    animation-delay: 0.05s;

}
.sn3{
    top: 70%;
    left: 50%;
    transform: translateX(-50%);        
    animation:
        sn3-start 0.6s ease-out forwards,
        sn3-loop 2s ease-in-out infinite;
    animation-delay: 0.2s, 0.8s;
    
}

@keyframes compass-rotate-slow {
    0%   { transform: rotate(0deg); }
    5%   { transform:  rotate(-10deg); }
    10%  { transform:  rotate(6deg); }
    15%  { transform:  rotate(-8deg); }
    20%  { transform:  rotate(3deg); }
    30%  { transform:  rotate(20deg); }
    60%  { transform:  rotate(160deg); }
    100% { transform: rotate(360deg); }
}

@keyframes compass-rotate-fast {
    0%   { transform:  rotate(0deg); }
    2%   { transform: rotate(20deg); }  
    5%  { transform: rotate(-15deg); } 
    7%  { transform: rotate(10deg); } 
    9%  { transform: rotate(-5deg); }
    10%  { transform: rotate(-10deg); }
    40% { transform: rotate(-170deg); }
    70%  { transform: rotate(-330deg); }
    100% { transform: rotate(-360deg); }
}
@keyframes sn3-start {
    0%   { transform: rotate(20deg); }
    20%  { transform: rotate(-18deg); }
    40%  { transform: rotate(14deg); }
    60%  { transform: rotate(-10deg); }
    80%  { transform: rotate(6deg); }
    100% { transform: rotate(-15deg); }
}

@keyframes sn3-loop {
    0%   { transform: rotate(-15deg); }
    30%  { transform: rotate(10deg); }
    60%  { transform: rotate(25deg); }
    100% { transform: rotate(-15deg); }
}

.talkTitle,
.talkTime{
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    -webkit-text-stroke-color:#3d3d3d;
	-webkit-text-stroke-width: 0.22em;
    color: whitesmoke;
    paint-order: stroke fill;
}
.talkTitle{
    top: 3%;
}
.talkTime{
    bottom: 3%;

}
.side-content {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;


}
.content-box {
  opacity: 0;
  transform: translateY(20px);
  transition: 0.3s ease;
  padding: 1em;  
    max-width: 45ch;
  height: 75%;
  top: 7%;
  left: 10%;
background-color: #b1b1b4;
overflow-y: scroll;
overflow-x: hidden;
line-height: 1.1em;
    font-size: clamp(1rem, 2vw, 1.7rem);


}

.side-content:not(.hidden) .content-box {
  opacity: 1;
  transform: translateY(0);
}
.close-btn{
    width: 100%;
    text-align: center;
    padding: 1em;
}
details{
    margin-top: 1em;
}
.photocredits{
    color: #515151;
}

@media (max-width: 600px) {
    .menu {
        top: 25%;
    }
    .menuitem{
    font-size: 4.5rem;
    }
    /* .speakerName{
    font-size: 5rem;
    } */
    #contacttext{
    margin-top: 4em;
    }
    .speakerIMG{
    width: 120%;
      object-position: center center;
}
.when{
top: 5vh;
left: 2%;}
.where{
top: 5vh;
right: 2%;
}
#contacttext{
    margin-top: 2em;
}

.content-box{
    width: 80%;
}

}