@import url('https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Bungee+Tint&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Jersey+15&family=Tilt+Neon&display=swap');

        body { padding: 0;margin: 0;background-color: whitesmoke; }
        .d1 { height: 10%; width: 100%;display: flex;flex-direction: column;}
        .d1 p { font-family: 'Bungee Spice', sans-serif;font-size: 40px;text-align: center;
            text-shadow: -1px -1px 0 #333,
                          1px -1px 0 #333,
                         -1px  1px 0 #333,
                          1px  1px 0 #333; }
        .d1 p span { color: #222;font-size: 30px;font-family: 'Tilt Neon', sans-serif; 
            text-shadow: -0px -0px 0  transparent,
                          0px -0px 0  transparent,
                         -0px  0px 0  transparent,
                          0px  0px 0  transparent;}
        .Bd { width: 100%;display: flex;flex-direction: row; }
        .Liste { display: flex;flex-direction: column;height: 100%;width: 20%;}
        .Liste form { height: 100%;width: 100%;display: flex;flex-direction: column; }
        .Liste input { height: 50px;width: 70%;border: none;border-radius: 10px;margin-top: 6%;background-color: whitesmoke;box-shadow: 1px 1px 1px 2px #888;margin-left: 17%;
                        font-family: 'Tilt Neon', sans-serif;color: #222;font-size: 21px;cursor: pointer; }
        .Liste input:nth-child(1) { margin-top: 20%;}

        @media screen and (max-device-width: 1250px)
        {    .Liste input { width: 90%; }  }

        @media screen and (max-device-width: 1050px)
        {  
            .d1 { height: 130px;}
            .Bd {flex-direction: column; }
            .Liste {flex-direction: row;height: 12%;width: 100%; }
            .Liste form {  flex-direction: row; }
            .Liste input:nth-child(1) { margin-left: 5%;margin-top: 1%; }
            .Liste input { margin-left: 3%;height: 45px;margin-top: 1%;font-size: 20px;width: 15%; }
        }

        @media screen and (max-device-width: 1000px)
        {
            .Bd { margin-top: 5%;}
            .Liste { height: 100%; }
            .Liste input { height: 50px;width: 17%;margin-top: 0%;margin-left: 1%; }
            .Liste input:nth-child(1) { margin-top: 0%; }
        }

        @media screen and (max-device-width: 775px)
        {
            .Liste input { font-size: 22px; }
            .Liste {height: 80px; }
        }

        @media screen and (max-device-width: 700px)
        {
            .Liste { }
            .Liste input { height: 60px; }
            .Bd { margin-top: 20px;}
        }

        @media screen and (max-device-width: 575px)
        {
            .Bd { margin-top: 20px;}
            .d1 { margin-bottom: 40px;}
            .d1 p { font-size: 60px;margin-top: 5%; }
            .Liste input { font-size: 25px; }
        }