Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jet Around Earth</title>

<style>
    * {
                box-sizing: border-box;
    }

        body {
                    margin: 0;
                            font-family: Arial, sans-serif;
                                    background: #07111f;
                                            color: white;
                                                    overflow: hidden;
        }

            #game {
                        width: 100vw;
                                height: 100vh;
                                        position: relative;
                                                overflow: hidden;
            }

                #sky {
                            position: absolute;
                                    inset: 0;
                                            background:
                                                        radial-gradient(circle at 50% 20%, #397eb5, #123b61 55%, #06111d);
                }

                    .cloud {
                                position: absolute;
                                        width: 180px;
                                                height: 50px;
                                                        background: rgba(255,255,255,.75);
                                                                border-radius: 50px;
                                                                        filter: blur(2px);
                                                                                animation: cloudMove linear infinite;
                    }

                        .cloud:before,
                            .cloud:after {
                                        content: "";
                                                position: absolute;
                                                        background: inherit;
                                                                border-radius: 50%;
                            }

                                .cloud:before {
                                            width: 75px;
                                                    height: 75px;
                                                            left: 25px;
                                                                    top: -35px;
                                }

                                    .cloud:after {
                                                width: 90px;
                                                        height: 90px;
                                                                right: 20px;
                                                                        top: -45px;
                                    }

                                        @keyframes cloudMove {
                                                    from { transform: translateX(110vw); }
                                                            to { transform: translateX(-300px); }
                                        }

                                            #hud {
                                                        position: absolute;
                                                                top: 15px;
                                                                        left: 15px;
                                                                                right: 15px;
                                                                                        display: flex;
                                                                                                justify-content: space-between;
                                                                                                        gap: 10px;
                                                                                                                z-index: 5;
                                            }

                                                .panel {
                                                            background: rgba(5,15,27,.82);
                                                                    border: 1px solid rgba(255,255,255,.2);
                                                                            border-radius: 14px;
                                                                                    padding: 12px 16px;
                                                                                            backdrop-filter: blur(8px);
                                                }

                                                    #flightInfo {
                                                                line-height: 1.6;
                                                    }

                                                        #destination {
                                                                    position: absolute;
                                                                            top: 120px;
                                                                                    left: 50%;
                                                                                            transform: translateX(-50%);
                                                                                                    text-align: center;
                                                                                                            z-index: 5;
                                                        }

                                                            #destination h1 {
                                                                        margin: 0;
                                                                                font-size: 28px;
                                                            }

                                                                #destination p {
                                                                            margin: 5px 0;
                                                                                    opacity: .8;
                                                                }

                                                                    #jet {
                                                                                position: absolute;
                                                                                        left: 50%;
                                                                                                top: 47%;
                                                                                                        transform: translate(-50%, -50%);
                                                                                                                font-size: 80px;
                                                                                                                        z-index: 4;
                                                                                                                                transition: transform .15s;
                                                                                                                                        filter: drop-shadow(0 10px 8px rgba(0,0,0,.4));
                                                                    }

                                                                        #jet.flipped {
                                                                                    transform: translate(-50%, -50%) scaleX(-1);
                                                                        }

                                                                            #controls {
                                                                                        position: absolute;
                                                                                                bottom: 20px;
                                                                                                        left: 50%;
                                                                                                                transform: translateX(-50%);
                                                                                                                        width: min(700px, 94vw);
                                                                                                                                background: rgba(5,15,27,.9);
                                                                                                                                        border-radius: 18px;
                                                                                                                                                padding: 15px;
                                                                                                                                                        z-index: 10;
                                                                            }

                                                                                .row {
                                                                                            display: flex;
                                                                                                    gap: 10px;
                                                                                                            flex-wrap: wrap;
                                                                                                                    justify-content: center;
                                                                                                                            margin-bottom: 10px;
                                                                                }

                                                                                    button, select {
                                                                                                min-height: 45px;
                                                                                                        border: none;
                                                                                                                border-radius:
                                                                                    }
                                                                                }
                                                                            }
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                    }
                }
            }
        }
    }