html{background-color: black;
background-image: url('pede.png');
background-size: 800px;
background-position: center;
background-repeat: no-repeat;}

.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 8px;
   
}

.div1 {
    grid-column: span 4 / span 4;
    grid-row: span 7 / span 7;
    grid-column-start: 4;
    grid-row-start: 4;

    border: 2px solid rgb(95, 91, 91);
    bordeer-radius: 50px;
    background-image: url('yacht.gif');
    background-size: 600px;
    background-position: center;
    background-repeat: no-repeat;
    width: 600px;
    height: 800px;
    transfdorm: rotate3d(7, 1.5, 2.5, 3.142rad);
    font-family: 'Streetwear';
    color: red;
    font-size: 60px;
    text-shadow: 2px 2px 2px black;
    line-height: 75px;
    
}


#iapp{padding: 20px;
 }
.div2 {
    grid-column: span 3 / span 3;
    grid-row: span 5 / span 5;
    grid-column-start: 1;
    grid-row-start: 4;
    bordekr: 2px ridge blue;
    background-image: url('mkt.gif');
    width: 600px;
    margin-left: -100px;
    background-repeat: no-repeat;
}
#bell{transform: translate(350px, 300px);}

.div3 {
    grid-column: span 3 / span 3;
    grid-row: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 1;
    boreder: 2px ridge blue;
    font-family: 'Smothy Bubble';
    font-size: 180px;
    text-sha1dow: 2px 2px 1px rgb(255, 0, 0), -2px -2px 1px rgb(255, 1, 1);
    color: rgb(235, 235, 10);
    line-height: 130px;
    margin-top: 20px;
    background: -webkit-linear-gradient(90deg,rgba(0, 0, 0, 0.81) 0%, rgba(255, 0, 0, 0.6) 50%, rgba(251, 255, 0, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
}
#divi{transform: translate(0px, -100px);}
        @media  (max-width: 600px) {
       
      .div1{width:400px;
    height: 500px;
background-size: 500px;
font-size: 40px;
line-height:45px;}
      .div2{width:550px;}
      #bell{transform: translate(350px, 450px);
    }
    
    @media  (max-width: 1200px) {
       
        .div1{width:400px;
      height: 500px;
  background-size: 500px;
  font-size: 40px;
  line-height:45px;}
        .div2{width:550px;}
        #bell{transform: translate(150px, 350px);}
      }
  

  
    
