.keywords{
  color: #000000;
  font-size: 0px;
}


p {
 font-family: 'Space Mono', monospace;
  color: white;
}

 a {
  color: white;
  text-decoration: none;
  background-size: cover;
  background-image: url(https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExYjFlODE3OGI1ZDYwNmIwMWMyOGU3ZjYxMjI2Mzk2YmM0ODYxNDlhYSZjdD1n/9xPaJpQEW24Kh3phfN/giphy.gif);
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
      }
.backgroundimage {
 justify-content: center;
}


body
{
background-color: black;
}

.container{
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 
    "hell bandcamp text text"
    "reelloop reelloop foto contact";
  grid-gap: 0.2rem;
  text-align: center;
  border-radius: 10%;
  justify-content: center; 
  }

  &__img {
   
    overflow: hidden;
    object-fit: cover;
    border-radius: 10%;
    cursor: pointer;

}

#hell {
  grid-area: hell;
 border-radius: 10%;
  padding-top: var(--main-padding);
  overflow: hidden;
  justify-content: center; 
  object-position:center;
  
}

#bandcamp {

  grid-area: bandcamp;
  border-radius: 10%;
  padding-top: var(--main-padding);
  overflow: hidden;
}
#text {
  padding: 2vw; 
  color: white;
  text-transform: uppercase;
  position: relative;
  grid-area: text;
  border-radius: 10%;
  padding-top: var(--main-padding);
  font-size: 1rem;
  margin: auto;
  color: white;
  
            
}

#reelloop {
 
  grid-area: reelloop;
 border-radius: 10%;
  padding-top: var(--main-padding);
  overflow: hidden;
  justify-content: center; 
   border-radius: 10%;
  padding-top: var(--main-padding);
  overflow: hidden;
  justify-content: center; 
  object-position:center;
  image-orientation: center;
}
#foto {
  grid-area: foto;
  border-radius: 10%;
  padding-top: var(--main-padding);
  object-fit: cover;
  overflow: hidden;
  justify-content: center; 
  object-position:center;
  min-width: inherit;
  max-width: auto;
  image-orientation: center;
  
  
}
#foto img 
{
 
  object-fit: cover;

  
}
#contact {
  
  text-transform: uppercase;
  font-size: 2rem;
  
  grid-area: contact;
  border-radius: 10%;
  overflow: hidden;
   object-fit: responsive;
  padding-top: var(--main-padding);
  
}

@media only screen and (max-width: 700px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 400px 1fr 480px 400px;
    grid-template-areas:
      "hell"
      "text"
      "bandcamp"
      "contact";
  }
  
  
  

.image {
	position: relative;
	width: 400px;
}

.image__img {
	display: block;
	width: 100%;
}
  
.image__overlay {
    grid-area: hell;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.25s;
    font-family: 'Space Mono', monospace;
    font-size: 4rem;
}

.image__overlay--blur {
	backdrop-filter: blur(5px);
}



.image__overlay>* {
	transform: translateY(20px);
	transition: transform 0.25s;
}

.image__overlay:hover {
	opacity: 1;
}

.image__overlay:hover>* {
	transform: translateY(0);
}

.image__title {
  
 font-family: 'Space Mono', monospace;
  color: white;
  text-transform: uppercase;
  position: center;
  grid-area: hell;
  font-size: 2rem;
  margin: auto;
  color: white;

}

.image__description {
	font-family: 'Space Mono', monospace;
  color: white;
  text-transform: uppercase;
  position: center;
  grid-area: hell;
  font-size: 1rem;
  margin: auto;
  color: white;
  
}