:root{
  --main-bg-color:#d9d9d9;
  --next-bg-color:#a6a6a6;
  --main-tx-color:#0d0d0d;
  --next-tx-color:#595959;
  --hex-height:200px;
  --hex-text-pos-coef:0.8;
  --hex-ico-pos-coef:0.75;
  --hex-spacing:1em;
  --hex-width:calc(calc(var(--hex-spacing)*2)+calc(var(--hex-height)*1.55));
  --screen-width-1_1:300px;
  --screen-width-2_1:445px;
  --screen-width-3_2:650px;
  --screen-width-4_3:850px;
  --screen-width-5_4:1040px;
  --screen-width-6_5:1240px;
}

body{
    background-color: var(--main-bg-color);
    margin:0 auto;
    padding: 0px;
    min-height: 100vh;  
}

.bg_shapre{
  display: fixed;
}

header{
    user-select: none;
    display: flex;
    justify-content: left;
    align-items: center;
    margin: 0px;
    margin-top: 0em;
    animation: fadein 2s ease-out;
    overflow: hidden;
    background: linear-gradient(var(--next-bg-color),var(--main-bg-color));

    .logo_frame{
        margin: min(calc(100vw/50),500px);
        .logo{
            height: min(calc(100vw/10),150px);
        }
    }

    .name{
        font-size: max(1em,min(calc(100vw/16),75px));

        font-family: "Atkinson Hyperlegible Mono","Electrolize";
        font-weight: 350;
        color:var(--main-tx-color);
      }
    .signature{
        font-family: "Atkinson Hyperlegible Mono","Electrolize";
        font-size: max(1em,min(calc(100vw/60),20px));
        font-weight: 500;
        padding: 0px;
        text-align: right;
        color: var(--next-tx-color);
    }
}

@keyframes fadein {
0% {
    opacity: 0;
}

10% {
    opacity: 0;
}

100% {
    opacity: 1;
}
}

main{
  user-select: none;
  margin:0 auto;
  padding: 0px;
}

a {
  text-decoration: none;
}

.side_menu_right{
  position: fixed;
  right: 1em;
  width: 1em;
  padding: 1em;
  border-radius: 1em;
  background-color: #d9d9d9c9;
  text-align: center;
  animation: fadein 1s ease-out;

  .bt_lang{
    height: 2em;
    width: 2em;
    margin:0.2em auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: url(/imgs/hex/hex_bg.svg);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    filter: 
    invert(80%) sepia(70%) saturate(1%) hue-rotate(319deg) brightness(96%) contrast(92%)
      drop-shadow(1px 0px 1px #ffffffb6)
      drop-shadow(0px 3px 1px #ffffffb6)
      drop-shadow(-1px 0px 1px #e6e2e2)
      drop-shadow(0px 1px 1px #302f2fe8);

    .lang_text{
      transform: translateZ(1px);
      font-size: 1em;
      filter: 
      invert(80%) sepia(0%) saturate(990%) hue-rotate(187deg) brightness(92%) contrast(88%);
    }
  }
}

.bt_lang:nth-child(2n){
  margin-left: -1em;
}

.bt_lang:hover{
  transform: scale(1.1);
}

.side_menu_left{
  position: fixed;
  left: 1em;
  width: 1em;
  padding: 1em;
  text-align: center;
  display: none;
  animation: fadein 1s ease-out;
    
  .bt_menu{
    height: 5em;
    width: 5em;
    background-image: url(/imgs/hex/hex_bg.svg);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    filter: 
    invert(80%) sepia(70%) saturate(1%) hue-rotate(319deg) brightness(96%) contrast(92%)
      drop-shadow(1px 0px 1px #ffffffb6)
      drop-shadow(0px 3px 1px #ffffffb6)
      drop-shadow(-1px 0px 1px #e6e2e2)
      drop-shadow(0px 1px 1px #302f2fe8);

    .bt_menu_ico{
      padding: 0.75rem;
      size:contain;
      filter: 
      invert(80%) sepia(70%) saturate(1%) hue-rotate(319deg) brightness(96%) contrast(92%)
    }
  }
}

.bt_menu:hover{
  transform: scale(1.1);
}

.honeycomb{
  animation: fadein 2s ease-out;
  margin:0 auto;
  padding: 0px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: block;
  position: inherit;
}

.hex{
  margin: var(--hex-spacing);
  position: relative;
  list-style-type: none;
  float: left;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  margin-bottom: -2.5em;
}

.section{
  animation: fadein 2s ease-out;
  margin: auto;
  width: clamp(300px, 80%,1000px);
  padding: 0px;
  display: none;
  align-content: top;

  .section_banner{
    justify-content: center;
    align-items: center;
    text-align: center;

    margin: auto;
    font-size: 1em;
    .section_banner_ico{
      height: 5em;
      margin: 1em auto;
      display: block;
    }
  }

  .section_content{
    display: block;

    .section_contact_table{
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;

      .section_contact_details{
        position: relative;
        display: inline-block;
        max-width: 40%;
        margin: auto;
        text-align: center;
      }
    }

    .section_text_box_contact{
      border: solid var(--next-bg-color) 3px;
      margin: 1em;
      padding: 1em;
      border-radius: 1em;
      justify-content: center;
      align-items: center;
      text-align: center;
      display: block;
    }

    .section_text_box{
      border: solid var(--next-bg-color) 3px;
      margin: 1em;
      padding: 1em;
      border-radius: 1em;
      justify-content: center;
      align-items: center;
      display: inline-block;

      .section_text_box_paragraph{
        display: block;
        margin: auto;
        padding: 1em;
        background-color: var(--main-bg-color);
        border-radius: 1em;
        text-wrap:balance;
        text-align: justify;

      }

      .section_text_box_paragraph p3{
        font-family: "Atkinson Hyperlegible Mono","Electrolize", serif;
        font-weight: 350;
        font-style:normal;
        font-size: 1.0em;
      }

      .section_text_box_paragraph h7{
        font-family: "Atkinson Hyperlegible Mono","Electrolize", serif;
        font-weight: 900;
        font-style:normal;
        font-size: 1.2em;
        display: block;
        text-align: center;
        padding-bottom:10px;

      }

      .section_picture{
        border: #0d0d0d;
        width: clamp(100px, 90%,400px);
        aspect-ratio: 1/1;
        overflow: hidden;
        border-radius: 1em;
        margin: auto;
        display: block;
        padding: 5px;
      }

    }
  }
}


.hex_content{
  height: var(--hex-height);
}

.hex p3{
  font-size: 18px;
  position: relative;
  bottom: calc(var(--hex-height)*var(--hex-text-pos-coef));
  color: #0d0d0d;
  display: block;
}

.hex_bg{
  height: var(--hex-height);
  display: block;
  filter: 
  invert(80%) sepia(70%) saturate(1%) hue-rotate(319deg) brightness(96%) contrast(92%)
    drop-shadow(3px 0px 3px #ffffffb6)
    drop-shadow(0px 3px 3px #ffffffb6)
    drop-shadow(-3px 0px 3px #e6e2e2)
    drop-shadow(0px 3px 3px #302f2fe8);
}

.hex_ico{
  height: 70px;
  position: relative;
  bottom: calc(var(--hex-height)*var(--hex-ico-pos-coef));
  filter: 
  invert(36%) sepia(0%) saturate(990%) hue-rotate(187deg) brightness(92%) contrast(88%);
}

.hex:hover{
  transform: translateZ(1px);
}

.hex:hover .hex_content{
  transform: scale(1.1);
}

.hex:hover .info_construction{
  transform: scale(1.1);
}

.hex_content:not(:hover){
  transition: 500ms ease;
}

.hex:not(:hover){
  transition: 500ms ease;
}

.hex:focus{
  transform: translateZ(1000px);
}

.hex_content:not(:focus){
  transition: 100ms ease;
}

p3{
  font-family: "Atkinson Hyperlegible Mono","Electrolize", serif;
  font-weight: 350;
  font-style:normal;
  font-size: 1.2em;
}

p4{
  font-family: "Atkinson Hyperlegible Mono","Electrolize", serif;
  font-weight: 200;
  font-style:normal;
  font-size: 1em;
}

h7{
  font-family: "Atkinson Hyperlegible Mono","Electrolize", serif;
  font-weight: 900;
  font-style:normal;
  font-size: 1em;
  display: block;
  text-align: center;
}

footer{
    animation: fadein 2s ease-out;
    text-align: right;
    position:fixed;
    bottom: 1em;
    right: 1em;
    padding: 1em;
    border-radius: 1em;
    display: block;
    background-color: #d9d9d9c9;
    p2{
        font-family: "Atkinson Hyperlegible Mono","Electrolize";
        font-weight: 300;
        color: var(--next-tx-color);
        font-size: max(1em,min(calc(100vw/50),20px));
    }
}

.electrolize-regular {
    font-family: "Electrolize", serif;
    font-weight: 400;
    font-style: normal;
  }

.atkinson-hyperlegible-mono {
  font-family: "Atkinson Hyperlegible Mono", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: light;
}

@media only screen and (max-width: 299px) {
  .honeycomb{display: none;}
  .signature{display: none;}
  .side_menu_right{display: none;}
  .side_menu_lef{display: none;}
  .signeture{display: none;}
  .footer{display: none;}
  .name{display: none;}
  .logo_frame{display: none;}

  .bt_menu{height: 2em; width: 2em;}

}

 /* Extra small devices (phones, 600px and down) 1/1*/
 @media only screen and (min-width: 300px) and (max-width: 454px) {
  .honeycomb{width: var(--screen-width-1_1);}
  .hex:nth-child(even){margin-left: calc(calc(100/2.5)*1%)}
  html{font-size: 70%;}
 }
  
 /* Extra small devices (phones, 600px and down) 2/1*/
 @media only screen and (min-width: 455px) and (max-width: 649px) {
  .honeycomb{width: var(--screen-width-2_1);}
  .hex:nth-child(3n-3){margin-left: calc(calc(100/3.7)*1%)}
  html{font-size: 80%;}

 }

 /* Small devices (portrait tablets and large phones, 600px and up) 2/3/2*/
 @media only screen and (min-width: 650px){
  .honeycomb{width: var(--screen-width-3_2);}
  .hex:nth-child(1){margin-left: calc(calc(100/5.5)*1%)}
  .hex:nth-child(6){margin-left: calc(calc(100/5.5)*1%)}
 }