html {
  scroll-behavior: smooth;
}
body{
  font-family:"Arial";
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: min(160px,16dvh);
  margin: 0;
  background-color: black;
  z-index:100;
}
.leftheader {
  display: flex;
}
.logo {
  padding: min(20px,2dvh);
}
.logoimage {
  width: min(120px,12dvh);
  height: min(120px,12dvh);
}
.logoname {
  padding: min(8px,0.8dvh);
  margin-top: min(44px,4.4dvh);
  height: min(40px,4dvh);
}
.logonameword {
  color:white;
  height: min(48px,4.8dvh);
  margin:0px;
  font-size: min(48px,4.8dvh);
}
.rightheader {
  position: absolute;
  top:0;
  right: min(30px,3dvh);
  padding: min(20px,2dvh);
}
.menusymbol {
  height: min(100px,10dvh);
  margin:0px;
  font-size: min(100px,10dvh);
  color: white;
  cursor:pointer;
}
.menusymbol:hover {
  color: yellow;
}
.rightlang{
  position:absolute;
  top:min(44px,4.4dvh);
  right:min(200px,20dvh);
  padding:min(8px,0.8dvh);
}
.rightlangword{
  height:min(48px,4.8dvh);
  margin:0px;
  font-size: min(38.4px,3.84dvh);
  color:white;
  cursor:pointer;
  display:block;
}
.rightlangword:hover{
  color:yellow;
}
.inactive {
  color:white;
  right: 0px;
}
.inactive:hover {
  background-color:mediumblue;
}
.active {
  background-color:red;
  color:white;
  width: calc(500px - min(42px,6dvh));
  right:100px;
  border-left: 100px solid red;
  box-shadow: 0px 0px 10px 0px black;
}
main{
  position:absolute;
  top: min(160px,16dvh);
  left: 0px;
  width:100%;
  min-height:calc(100dvh - min(160px,16dvh));
  display:inline-block;
}
.overlay{
  position:absolute;
  top: 0;
  left: 0px;
  width:100%;
  height:100%;
  z-index:98;
  background:rgba(0,0,0,0.5);
  display:none;
}
@media only screen and (orientation: portrait){
  .content {
    position:relative;
    left: 0px;
    font-size: 50px;
    width:100%;
    min-height:100%;
    color:black;
    margin-bottom:min(104svh, 104dvw);
  }
  .tail{
    position:absolute;
    left:0px;
    bottom:0px;
    width:100%;
    height:min(70svh,70dvw);
    margin:0px;
    padding:0px;
    background-color: black;
    color: gold;
    box-shadow: 0px 0px 20px black;
  }
  .mobileblock{
    display: block;
  }
  .mobiledisappear{
    display: none;
  }
  h1{
    margin-top:0;
  }
}
@media only screen and (orientation:landscape){
  .content{
    position:relative;
    left: 0px;
    font-size: 40px;
    width:100%;
    min-height:100%;
    color:black;
    margin-bottom:84svh;
  }
  .tail{
    position:absolute;
    left:0px;
    bottom:0px;
    width:100%;
    height:60svh;
    margin:0px;
    padding:0px;
    background-color: black;
    color: gold;
    box-shadow: 0px 0px 20px black;
  }
}
.tailcontent{
  position:relative;
  width:95dvw;
  font-size:min(3.5svh,3.5dvw);
  text-align:center;
}
.tailcontact{
  margin-top:min(12svh,12dvw);
  margin-bottom:min(4svh,4dvw);
}
.tailaddress{
  margin-top:min(4svh,4dvw);
  margin-bottom:min(4svh,4dvw);
}
.copyright{
  margin-top:min(20px,2svh);
  margin-bottom:min(20px,2svh);
  display:inline-block;
}
a {
  text-decoration: none;
}
nav ul{
  position: fixed;
  top: min(160px,16dvh);
  right:0px;
  width:500px;
  height: 100%;
  padding:0px;
  margin:0px;
  border-left:0px solid grey;
  z-index:99;
  background-color:darkblue;
  list-style:none;
  box-shadow: 0px 0px 10px 0px black;
}
nav ul li{
  position: relative;
  font-size: min(63px,9dvh);
  padding: min(21px,3dvh);
  margin: 0px;
  height: min(70px,10dvh);
}
.tailend{
  margin-top:min(12svh,12dvw);
  margin-bottom:min(4svh,4dvw);
  color:grey;
}
.taillink{
  color: gold;
}
.taillinkuse{
  color: grey;
  margin-left:min(8svh,8dvw);
}
.taillinkprivacy{
  color: grey;
  margin-right:min(8svh,8dvw);
}