input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; 
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
background: transparent; 
  border-color: transparent;
  color: transparent;
}

@font-face {
  font-family: Dmsans Regular;
  src: url(dmsans-regular.ttf);
}



body {
  font-family: Dmsans Regular;
  font-size: 14px;
  line-height: 1;
	background-color: #000000;
  color: #ffffff;
}

canvas {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
height: 100%;
z-index:-1 ; 
}
 
.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 15px;
  padding: 15px;
  z-index: 2;
}

.item1 {
  grid-column: 1 / span 3;
}

.item2 {
  grid-column: 4 / span 1;
}

.item3 {
  grid-column: 5 / span 1;
  text-align: center;
}

.item4 {
  grid-column: 6 / span 1;
  text-align: right;
}

header {
 position: sticky;
 top: 0;
 height: 30px;
}

a {
  text-decoration: none;
  color: #ffffff;

}

a:hover {
  color: rgba(255, 255, 255, .25);
  transition: 0.6s ease;
}

.interference{
position: absolute;
bottom: 0px;
left: 0px;
width: 30%;
background-color:transparent;
display: grid;
grid-template-columns: repeat(3, 1fr) ;
grid-gap: 5px;
grid-column-gap: 15px; 
padding: 15px;
z-index: 4;  
}

div.layer1 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background-image: radial-gradient(ellipse at top, red, green);   */
 z-index:-2 ; 
}

div.layer2{
mix-blend-mode: screen;
/* background-image: radial-gradient(ellipse at bottom, yellow, blue);  */
}

h2 {
  font-size: 28px;
  line-height: 30px;
  font-weight: 400;
}

section {
  width: 100%;
  overflow: hidden;
}

.paragraph-1 {
  position: fixed;
  float: left;
  width: 50%;
  padding: 130px 15px 0px;
  text-align: left;
}

.paragraph-1 h2 {
  max-width: 75%;
}

.poster_image {
  float: right;
  width: 50%;
  padding-top: 130px;
  padding-bottom: 15px;
}

.poster_image img {
  border: 1.5px solid white;
  max-width: 64%;
}

.instagram-image{
 float: right;
  width: 50%;
  padding-top: 130px;
  padding-bottom: 15px;
  padding-right: 15px;
}

.instagram-image img{
border: 1.5px solid white;
max-width : 87% ; 
align-content: center;  
padding: 60px ;  
}

@media (max-width: 1024px) {
  h2 {
    font-size: 25px;
    line-height: 27px;
    font-weight: 400;
  }

  .paragraph-1 {
    position: fixed;
    float: left;
    width: 50%;
    padding: 130px 15px 0px;
    text-align: left;
  }

  .paragraph-1 h2 {
    max-width: 100%;
  }

  .poster_image {
    float: right;
    width: 50%;
    padding: 130px 15px 15px;
  }

  .poster_image img {
    max-width: 82%;
  }
  
  .instagram-image{
 float: right;
  width: 50%;
  padding-top: 130px;
  padding-bottom: 15px;
  padding-right: 15px;
}

.instagram-image img{
max-width : 100% ;  
}
  
.interference{
width: 50%;
}      
  
}

@media (max-width: 768px) {
  .paragraph-1 h2 {
    max-width: 93%;
    font-size: 23px;
    line-height: 1.15;
    font-weight: 400;
  }

 

  .poster_image img {
    max-width: 100%;
  }
  
.instagram-image img{
max-width: 100% ; 
padding: 30px ;   
}
 
.interference{
width: 50%;
}    
  
}

@media (max-width: 600px) {
  .paragraph-1 h2 {
    max-width: 100%;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 400;
  }

  .paragraph-1{
    position: static;
    float: none;
    width: 100%;
    padding: 130px 15px 60px;
    text-align: left;
  }

  .poster_image {
    float: none;
    width: 100%;
    padding-top: 0;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
  }

  .poster_image img {
    max-width: 100%;
  }

 
.instagram-image{
float: none;
width: 100%;
padding: 15px;
}

.interference{
width: 100%;
}  

}

button{
-webkit-appearance: none;  
background-color: rgb(0, 0, 0,0);
height: 20px;
border: 3px solid #fff;
border-radius: 100px;
margin: 2px;
width: 100%;
outline:0 ;  
z-index: 6;
}


input[type='range'] {
  -webkit-appearance: none;
background-color: rgb(0, 0, 0,0);
height: 20px;
border: 3px solid #fff;
padding-left:3px ; 
padding-right:3px ;   
border-radius: 100px;
/* width:60% ;  */
}

input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background-color:#fff;
border-radius: 100%;
width: 10px;
height: 10px;
}