html body{
   margin: 0;
   padding: 0;
   overflow-x: hidden;
}
html{scrollbar-width: none;}
body{
  background-image: url("./static.jpg");
}

@font-face {
  font-family: 'Gunturkce';
  src: url('./Gunturkce.otf') format('opentype');
  font-weight: 250; /*normal*/
  font-style: normal;
}

.rtl{
  font-variant-ligatures: common-ligatures, discretionary-ligatures;
  font-feature-settings: "liga" on, "dlig" on;
  font-family: Gunturkce;
  direction: rtl;
  unicode-bidi: bidi-override;
  display: inline-block;
}

a{
  font-size: 3vmin;
  text-decoration: none;
  color: black;
}
a:hover{
  color:  red;
  transition: 0.2s color;
}

p{
  margin-top: 0;
  font-size: 2vmin;
}

.page{
  position: relative;
}

.box{
  position: relative;
  width: auto;
  background-color: white;
  border: 5px solid black;
  margin: 2vmin;
}
.headerText{
  margin-bottom: 0;
  width: 100%;
}

.characters{
  position: relative;
  width: 20vmin;
}

#headerLinks{
  display: flex;
  flex-direction: horizontal;
  gap: 5vmin;
}

#container{
  display: flex;
  flex-direction: horizontal;
  height: 190vh;
  
  #navigation{
    width: 10vw;
    height: 190vw;
  }
  #content{
    width: 90vw;
    height: 190vw;
  }
}

      .words{
        position: absolute;
        top: 0px;
        left: 0px;
        width: fit-content;
        height: fit-content;
        z-Index: 0;
        h1{
          font-size: 5vmin;
          text-align: center;
          pointer-events: none;
          padding-left: 2vmin;
          padding-right: 2vmin;
          }
        border-radius: 5px;
        -webkit-user-select: none;
        user-select: none;
      }
      
      .pronounDiv{
        background-color: lightblue;
        display: flex;
        flex-direction: horizontal;
      }
      .verbDiv{
        background-color: pink;
        display: flex;
        flex-direction: horizontal;
      }