*{
  margin: 0;
  padding: 0;
}

body{
  width: 100svw;
  height: 100svh;
  overflow-x: hidden;
}

.shape a{
  margin: 10px;
  background: rgba(0, 0, 0, 0.404);
  backdrop-filter: blur(10px);
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  width: 230px;
  padding-block: .8rem;
  transform: rotateY(180deg);
  border: 1px solid rgba(159, 159, 159, 0.592);
  cursor: pointer;
  text-align: center;
}

main{
 width: 100%;
 height: 100%;
 display: grid;
 grid-template-columns: repeat(10, 100px);
 grid-template-rows: repeat(10, 100px);
 justify-content: center;
}

.header h1{
  margin: 10px;
  margin-left: 25%;
}

.intro{
  grid-row: 1/3;
  grid-column: 7/11;
}

.intro p{
  font-size: .8rem;
}

.contacts{
  grid-row: 5/8;
  grid-column: 4/7;
}

.contacts p{
  font-size: .8rem;
}


.shape{
  background: url("/bedroom.jpg");
  height: 500px;
  width: 500px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* clip-path: path("M 0,500 L 0,125 L 250,125 L 250, 125 L 250,0 L 500,0 L 500,375 L 250,375 L 250,500 L 0,500 Z"); */
  clip-path: path("M 0,490   Q 0,500 10,500   L 240,500 Q 250,500 250,490   L 250,385 Q 250,375 260,375   L 490,375 Q 500,375 500,365   L 500,10 Q 500,0 490,0   L 260,0 Q 250,0 250,10   L 250,115 Q 250,125 240,125   L 10,125 Q 0,125 0,135   L 0,490   Z");
  transform: rotateY(180deg);
  display: flex;
  justify-content: baseline;
  align-items: end;
  grid-row: 1/6;
  grid-column: 4/8;
}

.copyright{
  grid-row: 6/8;
  grid-column: 4/7;
  font-size: .8rem;
}

@media screen and (max-width: 600px){
  main{
    display: flex;
    flex-direction: column;
  }

  .shape{
    clip-path: unset;
    align-items: end;
    justify-content: center;
    border-radius: 12px;
    width: auto;
    height: 250px;
    margin: 10px;
  }

  .shape a{
    width: 90%;
  }

  .contacts{
    background: black;
    color: white;
  }

  .contacts p, .contacts h1{
    margin: 10px;
  }

  .copyright{
    margin-block: 10px;
  }

  .header{
    margin: 0;
  }

  .header h1{
    margin: 10px;
  }

  .intro{
    margin: 10px;
  }

  main{
    height: auto;
  }
}