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.

```css
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;
}
```

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