@import "fonts_styles.css";

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: url(../PHOTOS/index.jpeg) no-repeat center center/cover;
}


* { color: #dedede; text-decoration: none;}

.name{
    font-family: peach;
    font-size: 12px; 
  position: absolute; 
  top: 42%; 
  right: 22.5%; 
  transform: translate(0,-50%);
}

.welcomeText{
    position: absolute;
    top: 60%;
    left:11.5%;
    font-family: cheri;
  font-size: 25px;
}

.zoom-in-out-box {
  cursor: pointer;
  height: 120px;
  width: 200px;
}



.clickMe{
    position: absolute; 
    top: 72%; 
    left: 40%;
}

.WelcomeAudio{
  position: absolute;
  top: 0;
}


@media only screen and (max-width: 320px) and (max-height: 568px) {
    
    body{
        background: url(../PHOTOS/indexmobile.jpeg) no-repeat center center/cover;       
    }
    .welcomeText{
        top: 70%;
        font-size: 7px;
        left: 5%;
        
    }

    .zoom-in-out-box{
        height: 20px;
        width: 20x;
    }
    
    .name{
        visibility: hidden;
    }

}

@media only screen and (max-width: 414px) and (max-height: 736px) {
    
    body{           
        background: url(../PHOTOS/indexmobile.jpeg) no-repeat center center/cover;
    }

    .welcomeText{
        top: 70%;
        font-size: 7px;
        left: 5%;
    }

    .zoom-in-out-box{
        height: 60px;
        width: 90px;
    }

  
    .clickMe{
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute; 
        top: 75%; 
        left: 36%;
    }

    .name{
        visibility: hidden;
    }
    
}