/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(Montserrat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}

body {
    margin: 0px;
}

html
{
  /*font-family: 'Montserrat', sans-serif;*/
  font-family: 'Josefin Sans', sans-serif;
  
  background: #123;
    
}

.navBar{
    display: flex;
    justify-content: center;
    background-color: #fffffff5;
    font-size: 1.5em;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 50px;
    margin-bottom: 50px;
    color: #4E89C4;
}
.navBar a {
  padding: 1%;
  margin-left:2%;
  margin-right:2%;
}
a{
   color: #C4894E; 
}

.navBar a:hover {
 color: #4E89C4;
 background-color: #efefef;
}
.titleBlock{
    font-size: 2.5em;
    text-shadow: 0 0 30px #ffff;
    letter-spacing: 0.2em;
    background: linear-gradient(to right, #00000073, #ffffff73, #00000073);
    color: white;
    padding-top: 3px;
    padding-bottom: 3px;

}
.bioOutter{
     background: linear-gradient(to right, #00000073, #ffffff73, #00000073);
     padding: 3px;
	 height: fit-content;
}
.bioPhoto{
    display: flex;
    justify-content: center;
    align-items: center;
    background:#00000073;
    width: 300px;
    height: 400px;
    padding: 20px;
}

.titleBlockInner{
    display: flex;
    justify-content: center;
    background:#00000073;
    width: 100%;
    height: 100%;
}
.titleBlockInner h1{
    margin: 2%;
    opacity: 1;
    animation: comein 1.5s 1 ease-in-out forwards;
}
.mainPage{
   width: 94%;
   margin: 3%;
   display: flex;
  
}
.flexBox{
    display: flex;
}

.mainPageContent{
       padding: 3%;
       background-color: #fffffff5;
       border-radius: 25px;
       width: 94%;
       margin: 10px;
       color: #4E89C4;
       line-height: 1.8;
       font-size: 1.2em;
}
 .elementWithimg{
       text-align: center;
}
.mainPageContent input, .mainPageContent textarea, .mainPageContent select{
    width: 100%;
}
.mainPageContent form{
    padding-right: 20%;
    padding-left: 20%;
}
.hexFloat{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    margin-left: 46px;
}
.hexContainer{
    
    letter-spacing: 0em; 
    font-size: 135px;
    display: inline-block;
}
.hex{
    /*height: 80px;
    width: 80px;*/
    line-height: 100px;
    text-shadow: 0 0 20px #ffff;
    color: #aebdcc99;
    animation: hexFades 5s 1 ease-in-out forwards;
    animation-iteration-count: infinite;
}

.hexOdd{
    margin-left: -46px;
    
}


/*Unesseary animations*/
@keyframes comein {
  0% {
    letter-spacing: 80px;
  }
  70% {
    letter-spacing: 20px;
  }
  100% {
    letter-spacing: 25px;

  }
}
@keyframes hexFades {
  0% {
     color: #aebdcc99;
  }
  50% {
     color: #3e434899;
  }
  100% {
     color: #aebdcc99;

  }
}