:root{

  --text: #064b7a;
  --background: hsl(135, 30%, 70%);
  --primary: #865e41;
  --secondary: hwb(147 40% 32%);
  --accent: #416986;
  


}



* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

.div-page {
  margin-left:12%;
  margin-right:12%;
  background-color:color-mix(in srgb, var(--secondary) 90%, transparent) ;
  min-height: 100vh;
}


.div-textblock {
  position: relative;
  
  position:relative;
  font-size: 1.4vw;
}

.imagebox-wrapper{
  margin-left:12%;
  margin-right:12%; 
  display: flex;
  justify-content: center;
  position: top;



}
.imagebox {
  margin: 1vw;
  width: auto;
  background-color:color-mix(in srgb, var(--secondary) 30%, transparent);
  text-align: center;
  position: relative;
  font-size: 1.4vw;
}

.imagebox img {

  width: 10vw;
  height: 10vw;

}


/*
html * {
                       
    
}
*/
body {
 font-family: 'Uni Sans Demo', sans-serif !important;
    background-color: var(--background) ;
    background-image: url("leaves.png");
    background-size: 66px 66px;
    background-position: 0 0,15px 15px;
    font-size: 62.5%;
    image-rendering: pixelated;

  }



p {
  white-space:pre-line; 
  font-size: 1.4vw;
  color: var(--text);  
}

h1{
  
  color: var(--text); 

}
h2{

  color: var(--text); 

}
ul.ul-nav {
    margin-left:12%;
    margin-right:12%; 
    list-style-type: none;
    z-index: 10;
    align-content: stretch;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: color-mix(in srgb, var(--primary) 90%, transparent);
    overflow: hidden;
    

  }
li.li-nav a {
  width: 100%;
  box-sizing: border-box;
  color: var(--text);
  text-align: center;
  padding: 2vw 2vw;
  text-decoration: none;
  
  font-size: 2vw;
position: relative;
}
li.li-nav a:hover {
    background-color: var(--primary);
  }
li {
    float: left;
}


ul.ul-contact {
  
  z-index: 5;
  float: none; 
  background-color: color-mix(in srgb, var(--secondary) 30%, transparent);
  color:rgb(242, 255, 249); 
  font-size: 2vw; 
  margin: auto; 
  width: 30%; 
  box-sizing: border-box;
  
}

li.li-contact a {
  position: relative;
  float: none; 
 background-color: color-mix(in srgb, var(--secondary) 30%, transparent);
 color: var(--text);
}
li.li-contact a:hover {
  background-color: #111;

}

dt {

  font-size: 2vw; 
  background-color: color-mix(in srgb, var(--secondary) 30%, transparent);
  
}

dd {

  font-size: 1.4vw; 
  

}

/*
Rest in peace
https://thumbs.gfycat.com/AdorableDapperGallowaycow-max-1mb.gif
you were an awesome flaming background gif...
*/