@media only screen and (min-width: 481px) {
body {
    margin: 0;
    padding: 0;
    background: url('./aiboat2.png') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
}

h1 {
    color: greenyellow;
    text-align: center;
    font-family: 'Fiddums';
    font-size: 200px;
    position: relative;
    
    
}

.draggable {
    position: absolute;
    cursor: grab;
    z-index: 2; 
}
.container img { 
    width: 70px;
    z-index: 2;
}
.wave {
    bottom: 0px;
    width:200%;
    height: 100%;
    left: 0;
    position: absolute;
    z-index: 0;
    height: auto;
    transition: transform 0.5s ease-in-out;
}
.wave.slide-out {
    transform: translateX(100%);
  }
  
  .wave.slide-in {
    transform: translateX(0%);
  }

.container {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 2;
    height: 100vh;
}

/*FONTS*/
@font-face {
    font-family: 'Fuggles';
    src: url(./Fuggles/Fuggles-Regular.ttf);
    
}
@font-face {
    font-family: 'Fiddums';
    src: url(./fiddums-family/Fiddums\ Family.ttf);
  }
  
}
/*IPHONE*/
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {


    body {
        margin: 0;
        padding: 0;
        background: url('./aiboat2.png') no-repeat center center fixed;
        background-size: cover;
        
    
    }
    
    h1 {
        color: greenyellow;
        text-align: center;
        font-family: 'Fuggles';
        font-size: 100px;
        position: relative;
        
    }
    
    @font-face {
        font-family: 'Fuggles';
        src: url(./Fuggles/Fuggles-Regular.ttf);
        
    }
    
    
     .draggable {
        position: absolute;
        cursor: grab;
        z-index: 2; /* Add this line */
    }
    .container img { 
        width: 100vw;
    }
    .wave {
        bottom: 0;
        width: 100vw;
        position: fixed;
        z-index: 0;
    
    }
    .container {
      position: relative;
      width: 100%;
      height: 100vh; /* Set the height of the container to the viewport height */
      overflow: hidden; /* Hide any content that overflows the container */
      z-index: 1; ;
    }
    }