[SOLVED] Text overlays the box in mobile view, how can i implement Media Query in my Code?

Text overlays the box in mobile view, how can i implement Media Query in my Code?

I tried different Ways to implement Media Query or other Options to to adjust the Size of the Font to fit the View to different Devices but I'm an absolute Beginner who threw together a few Codesnippets. Please help me to adjust the Code so that it works.

body {
  align-items: center;
  background-color: black;
  display: flex;
  height: 00vh;
  justify-content: center;
   margin: 0;
}

.doi_tuong{
  align-items: center;
  border-radius: 25px;
  background: #121212;
  box-shadow: 12px 12px 16px 0 rgba(255, 255, 255, 0.3) inset, -10px -10px 20px 0 rgba(255, 255, 255, 0.3) inset, -8px -8px 12px 0 rgba(255, 255, 255, 0.3) inset;
  cursor: pointer;
  display: flex;
  height: 70px;
  justify-content: center;
  margin-right: 0rem;
  padding: 3rem;
  text-align: center;
  width: auto;
  transition: all 0.3s ease;
}


.doi_tuong:hover {
    transition: all 0.3s ease;
    transform: scale(1.05, 1.05);
}

.text-doi_ {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

<div class="doi_tuong"
             <p><font color="white" style="font-size:25px">   Lorem et ipsum Lorem et ipsum</font></p>
         </body>
    </div>
</div>

Solution

Remove height: 00vh; from <body> tag to fix your issue. Replace the below code with yours.

body {
  align-items: center;
  background-color: black;
  display: flex;
  justify-content: center;
  margin: 0;
}