@font-face{
  font-family: mondwest;
  src:url(/fonts/PPMondwest-Regular.otf);
}
@font-face {
  font-family: montreal-medium;
  src: url(/fonts/PPNeueMontreal-Medium.otf);
}
@font-face {
  font-family: montreal-book;
  src: url(/fonts/PPNeueMontreal-Book.otf);
}

@font-face {
  font-family: wide-regular;
  src: url(/fonts/PPMonumentExtended-Regular.otf);
}

@font-face {
  font-family: wide-light;
  src: url(/fonts/PPMonumentExtended-Light.otf);
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

p,a, h3,h4,button{
  font-family: wide-light;
}


h1,h2, p
{
  font-family: wide-regular;
}

#c {
  width: 100%;
  height: 100%;
  display: block;
}

.header{
  position: absolute;
  top: 16px;
  left: 16px;

  display: flex;
  gap:8px;

  flex-direction: column;
}

button{
  border-radius: none;
  background-color: black;
  color: white;
  border: none;
  padding: 4px 8px;

  cursor: pointer;

  transition: all .2s ease;
}
button:hover{
  background-color: rgb(255, 255, 255);
  color: black;
  outline: 1px solid black;
}

.active{
  background-color: rgb(255, 255, 255);
    color: black;
    outline: 1px solid black;
}


.focusMode{
  display: flex;
  gap: 16px;
  
}

.UI-section-1{
  margin-top: 32px;
  position:absolute;
  display: flex;
  gap: 32px;
  align-items: center;
  flex-direction: column;

  top:0;
  left:0;
  width: 100vw;

  opacity: 1;

  transition: opacity 1s ease;
}

.subTitle{
  opacity: 0;

  transition: opacity 1s ease;
  font-size: 24px;
}

.UI-section-2{
  position:absolute;
  padding: 32px;
  top:0;
  left:0;
  width: calc(100vw - 64px);
  height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.infoField{
  display: flex;
  width: 50%;
  justify-content: space-between;
  padding: 6px 0px;

  font-size: 12px;
  font-family: wide-regular;
}

.gametitle{
  font-size: 16px;
  background-color: black;
  color: white;
  padding: 3px 6px;
  width: 50%;
}

.infos-left{
  width: 50%;
  opacity: 0;

  transition: opacity 1s ease;

}

.stateTitle{
  font-size: 16pt;
  font-family: wide-light;
  transition: opacity .5s ease;
  background-color: rgba(0, 0, 0, 0.79);
  color: white;
  padding: 6px 9px;
  opacity: 0;

}


.noOpacity{
  opacity: 0;
}

.gameInfoTitle{
  font-family: wide-light;
}

.sentenceWidth{
  width: 30%;
}

.sentencesContainer{
  position: absolute;

  top: 0;
  left:0;
  width: 100vw;
  height: 80vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

.sentences{
  color: white;
  background-color: black;
  width:auto;
  padding: 4px 8px;
  font-size: 19px;
  line-height: 125%;
}
.sourceTitle{
  margin-bottom: 32px;
  background-color: black;
  color: white;
  padding: 4px 8px;
}
.sourcesSection{
  position: absolute;
  padding: 32px;
  top:0;
  right:0;
  width: 30%;
  transition: opacity 1s ease;
}

.hidden{
  opacity: 0;
}



.controls-container{
  display:flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100vw - 64px);
  margin: 32px;

  transition: opacity 1s ease;
  opacity: 0;
}

 .controls {
    padding: 12px;
    width: calc(100% - 64px - 24px - 20vw);
   display: flex;
   gap: 16px;
    background: linear-gradient(#5e5e5e, #1a1a1a);
    border: 1px solid rgb(124, 124, 124);
 }

 .gridSection {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;

 }

 button {
   border: 0;
   color: #1f1f1f;
   font-size: 18px;
   text-align: left;
   cursor: pointer;

   border-radius: none;
   background-color: rgb(0, 0, 0);
   border: none;

   cursor: pointer;

   transition: all .2s ease;
 }

 button p{
    color: white;
    font-family: wide-light;
    font-size: 10px;
 }

 .active p{
  color: black;
 }

 .control-button {
   font-size: 12px;
   height: 32px;
 }

 .section {
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: calc(100%/3);
   max-width: calc(100% / 3);
 }

 h2 {
   font-size: 14px;
   font-family: wide-regular;
 }

 h1 {
   font-size: 12px;
   font-family: wide-regular;
   padding: 6px 6px;
   background-color: rgb(0, 0, 0);
   color: white;
 }

 .sectionTitle{
  color: rgb(255, 255, 255);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-size: 12px;
 }

 .control-button:hover {
   background: #efefef;
 }
  .control-button:hover p{
    color: black;
  }

 .buttonActive {
   background: #efefef;
   color: black;
 }

 .disabled {
   background: #4b4b4b;
   color: rgb(88, 88, 88);
   border: none;
 }

 .disabled p{
  color: rgb(88, 88, 88);
 }

 .stacksButtonContainer {
   width: 50%;
   display: flex;
 }

 .buttonContainer {
   display: flex;
   align-items: center;
   gap: 4px;

   background-color: black;

 }

 .buttonContainer button {
   width: 100%;
   height: 100%;
 }

 .focusModeContainer{
  flex-direction: row;
 }

 .focusNav {
   display: flex;
   gap: 16px;
 }

 .focusButtonContainer {
   display: flex;
   justify-content: center;
 }

 .focusButton {
   width: 40%;
   font-size: 12px;
   align-items: center;
 }

 .arrowsContainer {
   display: flex;
   align-items: center;
   width: 100%;
   justify-content: space-between;
   gap: 16px;
 }

 .arrowsButtonContainer {
   display: flex;
   align-items: center;
   gap: 16px;
   height: 40px;
 }

 .arrowButton {
    font-size: 12px;
    color: white;
 }

 

 .focusButton {
   height: 32px;
   display: flex;
   justify-content: center;
 }

 .sourcesContainer {
   display: flex;
   justify-content: center;
 }

 .focusText{
  font-size: 12px;
  font-family: wide-light;
  color: white;
 }

@media (max-width: 1100px) {
  .controls {

      width: calc(100% - 24px);
      height: 90px;
      
    }
}