#svg{
    position:fixed;
    top:0px;
    width:12%;
}
#hexa{
    position: absolute;
    top:0px;
    right:0px;
}


body{
   background-color: #fafafa;
  /*
    background: linear-gradient(45deg, rgb(250, 121, 0) 50%, rgb(53, 52, 48) 50%); 
    */
}
h1{
    font-family:futura;
    
}

h1:hover{
    text-decoration-line: line-through;
}
h2{
    font-family: Monaco, monospace;
    line-height: 1.6;
    letter-spacing: 8pt;
    font-size:10pt;
    text-align: left;

}
a{
	cursor: url('/img/Slash.png'), auto;
    color:black;
    text-decoration-line: none;
}

#container{
   z-index:-1;
   //border: 1px solid #000;
   /* padding:30px;*/
    cursor: url('/img/Slash.png'), auto;
    display:grid;
    grid-template-columns:auto auto auto;
    grid-template-rows: auto auto auto auto;
    margin-top:10%;
    margin-left:15%;
    margin-right:15%;
    box-sizing:border-box;
    height:auto;
    
   
}
iframe{
    border:none;
    width:600px;
}


#container > div{
	
    text-align:center;
    animation: anim ease-out 1.2s  1;
}
.item{
	
    font-family: Arial, Helvetica, sans-serif;
   /* background-color: rgb(17, 183, 212);*/
    z-index:0;
    /*padding-left:5%;
    padding-top:5%;*/
    //max-width:200px;
    object-fit: cover;
    
}
.item img{
    z-index:-1;
    opacity: 1;
    mix-blend-mode: exclusion;
}
.item img:hover{
    
    /*transition: filter ease-in-out 2s;*/
    animation: trans 1s ease-out forwards;
    mix-blend-mode: normal;
    z-index:3;
}


#item1{
   
    grid-area: 1/ 1/ span 1/ span 2;
}

#item1 img{
    opacity:0.8;
    width:600px;
}

#item2{
    margin-top: 10%;
    grid-area: 3/4;
   
}
#item2 img{
    width:300px;
}

#item3{
    grid-area: 2/1/3/span 2;
   
}
#item3 img{
    margin-top:50%;
    width:500px;
}
#item4{
    grid-area: 4/1/4/span 2;
    margin-top:0%;
}

#item5{
    grid-area: 3/3/2/span 2 ;
    margin-top:10%;
    /*width:600px;*/
}
#item5 img{
    width:550px;

}
#item6{
   background:url('/img/VIERKANT.svg') no-repeat -471px -209px;
    grid-column: 4 / span 2;
    width: 255px;
    height: 255px;
    overflow: hidden;
    
}
#item6:hover{
    animation: dissolve ease-out 1.2s  1;

}
#item6 canvas{
    margin-top: -29px;
    width: 284px !important;
    height: 284px !important;
    opacity:0;
    animation: dissolve ease-out 1.2s forwards;

}
#item6 canvas:hover{
    animation: anim ease-out 1.2s  forwards;
}



@keyframes dissolve{
    0%      {opacity:1;}
    100%    {opaciyt:0;}
}

@keyframes anim{
    0%      {opacity:0; }
    100%    {opacity:1; }

}
@keyframes trans{
    0%      {opacity:1;}
    100%    {opacity:0.5;z-index:100; }
}