* {
 padding: 0;
 margin: 0;
 -webkit-box-sizing: border-box;
         box-sizing: border-box;
}

:root {
 font-size: 14px;
 font-family: "Roboto Mono", Arial, Helvetica, sans-serif;
 --color1: #F7E474;
 --color2: #F774CC;
 --color3: #787563;
 --color4: #A28298;
 --color5: #637879;
 --color6: #000;
 --color7: rgba(99, 120, 121, 0.4);
}

body {
 background-image: url('ai-generated-8702594_640.jpg');
 background-size: cover;
}

.clearfix::after {
 content: "";
 display: block;
 clear: both;
}

.container {
 margin: 0 auto;
 min-height: 80vh;
 max-width: 800px;
}

.container.active {
 -webkit-filter: blur(2px);
         filter: blur(2px)
}

.title {
 margin: 10px;
 padding: 5px;
 text-align: left;
 background-color: rgba(255, 255, 255, 0.5);
}

.totoNumbers {
 display: grid;
 width: 300px;
 margin: -30px auto 10px auto;
 grid-template-columns: repeat(7, 40px);
 grid-template-rows: repeat(7, 40px);
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -ms-flex-line-pack: center;
     align-content: center;
 gap: 2px;
 padding: 2px;
 border: 1px solid var(--color6);
 -webkit-box-shadow: 0px 6px 4px 6px var(--color5);
         box-shadow: 0px 6px 4px 6px var(--color5);
 background-color: var(--color4)
}

.number,
.results {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 border: 1px solid var(--color1);
 font-size: 1.2rem;
}

.results {
 border: none;
 margin-bottom: 20px;
}

.btns {
 margin-top: 20px;
 padding-bottom: 20px;
}

button {
 display: block;
 width: 250px;
 padding: 8px 5px;
 margin: 10px auto;
 border-radius: 5px;
 font-size: 1.2rem;
 font-family: "Roboto Mono", Arial, Helvetica, sans-serif;
 background-color: var(--color4);
 cursor: pointer;
 color: var(--color6);
 -webkit-box-shadow: 0px 5px 2px 2px var(--color5);
         box-shadow: 0px 5px 2px 2px var(--color5)
}

.containerInfo {
 display: none;
 position: fixed;
 left: 0;
 top: 0;
 margin-top: 30px;
 width: 100%;
 height: 100%;
}

.containerInfo.active {
 display: block;
}

section {
 background-color: var(--color7);
 min-height: 400px;
 margin-top: 50px;
}

.alarmInfo {
 position: fixed;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
 width: 320px;
 height: 200px;
 border-radius: 5px;
 -webkit-box-shadow: 0px 3px 4px 2px var(--color6);
         box-shadow: 0px 3px 4px 2px var(--color6);
 background-color: var(--color3);
}

.alarmInfo__info {
 margin: 40px auto;
 padding: 5px;
 text-align: center;
 font-size: 1.2rem;
}

.alarmInfo__btn {
 background-color: rgb(210, 96, 96);
}

.happyNumber {
 width: 40px;
 height: 40px;
 margin: 5px;
 text-align: center;
 line-height: 34px;
 border-radius: 50%;
 background-color: var(--color1);
 border: 2px solid var(--color5);
 -webkit-box-shadow: 0 30px 1px 1px var(--color5);
         box-shadow: 0 30px 1px 1px var(--color5);
}

.returnToMainA {
 line-height: 22px;
}

@media(min-width:1024px) {
 body {
  background-image: url('ai-generated-8702594_1920.jpg');
 }

 section {
  margin-top: 50px;
 }

 .totoNumbers,
 .btns {
  float: left;
  margin-left: 90px;
 }

 .btns {
  margin-top: 50px;
 }

 .results {
  margin-top: 80px;
 }

 .title {
  margin-top: 80px;
 }

 .happyNumber {
  width: 60px;
  height: 60px;
  margin: 5px;
  text-align: center;
  line-height: 54px;
 }
}