*,
*:before,
*:after {
box-sizing: border-box;
}
body {
margin: 2%;
height: 100%;
font-size: 100%;
font-family: Verdana, Tahoma, sans-serif;
color: #000;
background-color: #324b00;
}

p, #works {font-size:calc(15px + 1vw);
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;

  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;


  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

h1
{
font-size:calc(20px + 1vw);
margin: 0.5% auto;
text-align: center;
}

h2
{
font-size:calc(16px + 1vw);
margin: 0.5% auto;
text-align: center;
}
.ieicons
{
display: flex;
justify-content: center;
}
.ieicons:hover{filter: brightness(1.75)}

h3 {font-size:calc(17px + 1vw); margin:0.4rem 0 0 0; text-align: center; }
h4{font-size:calc(16px + 1vw); margin:0.4rem 0 0 0; text-align: center;}
a
{
outline: none;
color: #324b00;
text-decoration: none;
}

a:active,a:hover { outline: 0; }

a:hover, nav li:first-child a:hover
{
color: #f7fabd;
}
img
{
width: 100%;
height: auto;
}

ul {margin: 0; padding: 0;list-style: none;}
.wrapper {
max-width: 98%;
margin: 0 1%;
display: grid;
grid-gap: 10px;
border-radius: 15px;
padding-bottom: 1rem;
}

.wrapper {
display: flex;
flex-wrap: wrap;
}

.wrapper {
display: grid;
margin: 0 auto;
}

article {
/* needed for the flex layout*/
margin-left: 5px;
margin-right: 5px;
flex: 1;
}

.header,
footer, article,nav{
margin: 2rem 1rem;
flex: 0 1 100%;
grid-column: 1 / -1;background-color: #b6c451;border: 1px solid #fff;border-radius: 10%;
}
footer, nav{background-color: #e6e9af;}
nav{margin-top: 2%;}
nav li {flex-basis: 20%;}
footer li {flex-basis: 16.7%; }

.navlinks li span.linkname, .bottom li span.linkname
{
display: flex;
justify-content: center;font-size:calc(16px + 1vw);
}
.navlinks li{text-align: center;}
.audio{width: 100%;margin-top: 0.5rem;}
img,iframe {margin-top: 0.5rem;
max-width: 100%;
}

.wrapper > * {

color: #000;
border-radius: 5px;
padding: 2%;
font-size:calc(15px + 1vw);
margin-bottom: 10px;
  content-visibility: auto;
 /* contain-intrinsic-size: 1000px; */
}

@media (min-width: 320px) /*320px*/{
.linkname
{
display: none!important;
}
.ieicons .di{width: 10vw;height: 10vh; }
.ieicons .dip{width:5vw; height: 10vh }
}
@media only screen and (min-width: 768px){
.linkname { display: block!important;text-align: center;}
.ieicons .di, .ieicons .dip{width: 4vw;height: 4vh; display: inline-block;}
}
@media (min-width: 1024px)
{
.toomuch { display: inline!important; }
.linkname { display: block!important; }
}
/* We need to set the margin used on flex items to 0 as we have gaps in grid.*/

@supports (display: grid) {
.wrapper > * {
margin: 0;
}
}