Html, Css Media Query does not work, im a Beginner

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

.doi_tuong{
  align-items: center;
  border-radius: 5px;
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;
  display: flex;
  height: 200px;
  justify-content: center;
  margin-right: 4rem;
  width: 380px;
        transition: all 0.3s ease;

}

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

<div class="doi_tuong"
<p><font color="white" style="font-size:25px">   PODCAST LAUNCH </font></p>
</body>
    
    </div>

Please someone with know how look over my html & css code and help me that the View is Displayed appropriately on all Devices. Im a complete Beginner and use Codes which i copy pasted from Codepen and put them together. It works but in Tablet or Handphone view it will not fit anymore, i tried Media Query but it doesn´t works or i make mistakes.

Thank you very much in advanced.

Solution

Set width and height to auto and then add some padding. Now it will work on all viewports, on small screens the text may wrap onto a new line but it will still look fine

body {
  align-items: center;
  background-color: black;
  display: flex;
  height: 100vh;
  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: auto;
  justify-content: center;
  margin-right: 4rem;
  padding: 2rem;
  text-align: center;
  width: auto;
  transition: all 0.3s ease;

}

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

<div class="doi_tuong"
<p><font color="white" style="font-size:25px">   PODCAST LAUNCH </font></p>
</body>
    
    </div>