Problem with strange zoom in the responsiveness - html

Question

It's the first time I make a responsive website, but my media query didn't work as I imagined, the responsiveness didn't work and it got a weird zoom on cell screens. I left it responsive and everything seems to be fine. However, when I open it on cell phones, it comes with an initial zoom that it shouldn't have, but doing the pinching movement to zoom out is as it should, which is responsive on the device. The responsiveness is apparently not bad, but it has this zoom, which I don't know where it comes from. Can anyone tell me what I did wrong, and what could be improved?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
:root{
/* font-size: 62.5%; */
--color-primary: #1f2241;
--color-secondary: #38b6ff;
--color-font: #ffffffe6;
--color-shadow: #AB433F;
}
body{
height: 100%;
/* background-color: var(--color-primary); */
background-color: rgb(217, 85, 80);
font-size: 1.6rem;
font-family: 'open sans', sans-serif;
}
span,
i,
h1{
color: var(--color-font);
}
h1{
font-family: 'Alegreya Sans', Open Sans;
margin-top: 20px;
font-size: 3.2rem;
}
i {
font-size: 3.2rem;
}
section{
display: flex;
align-items: center;
height: 100%;
}
.container{
width: min(42.5rem);
margin-inline: auto;
padding-inline: 2rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container h1{
margin-bottom: 50px;
}
.painel {
display: grid;
grid-template-columns: 1fr 1fr;
text-align: center;
width: 550px;
/* margin-block: 5rem; */
padding: 1rem;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-box-shadow: 0px 7px 15px 6px var(--color-shadow);
box-shadow: 0px 7px 15px 6px var(--color-shadow);
}
.painel span{
opacity: .8;
transition: 1s ease-in;
font-weight: bolder;
}
.painel span.active{
opacity: 1;
color: var(--color-secondary);
}
.timer {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
width: 550px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-box-shadow: 0px 7px 15px 6px var(--color-shadow);
box-shadow: 0px 7px 15px 6px var(--color-shadow);
font-weight: bolder;
font-size: 60px;
}
.time{
position: relative;
display: flex;
flex-direction: row;
font-size: 60px;
}
.time span{
font-size: 5.6rem;
}
.time span:nth-of-type(2) {
position: relative;
top: -.5rem;
margin-inline: 1rem;
}
.controls {
margin-top: 3rem;
display: flex;
justify-content: space-between;
}
.controls button{
border: none;
background-color: transparent;
cursor: pointer;
}
.controls #stop{
display: none;
margin-right: 15px;
text-decoration: none;
}
.controls #reset{
display: none;
margin-left: 15px;
text-decoration: none;
}
.controls i{
font-size: 25px;
background-color: #48bf91;
background-size: 40px 40px;
border-radius: 50%;
border: 1px solid grey;
padding: 10px;
display: flex;
text-align: center;
}
.controls i:hover{
background-color: #369772;
}
.controls i:active{
background-color: #216e51;
color: rgb(112, 112, 112);
}
.social i{
font-size: 30px;
border: none;
background-color: transparent;
cursor: pointer;
margin: 10px;
}
.social{
margin-top: 8rem;
display: flex;
justify-content: space-between;
}
.content{
background-color: white;
display: flex;
}
.content h1, h2{
color: black;
text-align: center;
/* margin-top: 100px;
margin-bottom: 0; */
}
.content p{
text-align: justify;
margin: 0px 80px;
padding: 40px;
font-size: 20px;
}
.content article{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.content #text1::after{
content: '';
display: flex;
width: 500px;
height: 0.3rem;
background-color: #38b6ff;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 50px;
position: relative;
justify-content: center;
align-items: center;
border-radius: 10px;
}
footer{
/* background-color: #058effd8; */
background-color: #1f2241;
color: white;
text-align: center;
font-size: 20px;
}
/*RESPONSIVIDADE*/
#media (max-width: 614px){
section{
width: 590px;
}
.content{
width: 606px;
}
.content #text1::after{
width: 300px;
}
.social{
margin-top: 12.8rem;
}
footer{
width: 606px;
}
}
#media (max-width: 550px){
.social{
margin-top: 17.5rem;
}
}
#media (max-width: 500px){
.social{
margin-top: 23.4rem;
}
}
#media (max-width: 450px){
.social{
margin-top: 30.3rem;
}
}
#media (max-width: 400px){
.container{
width: min(42.5rem);
margin-inline: auto;
padding-inline: 2rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container h1{
margin-bottom: 140px;
margin-top: 190px;
}
.painel {
width: 550px;
padding: 1rem;
}
.timer {
height: 400px;
width: 550px;
font-size: 60px;
}
.time{
position: relative;
display: flex;
flex-direction: row;
font-size: 200px;
}
.time span{
font-size: 8rem;
}
.time span:nth-of-type(2) {
position: relative;
top: -.5rem;
margin-inline: 1rem;
}
.social{
margin-top: 39.7rem;
}
.controls i{
font-size: 45px;
background-size: 100px 100px;
}
}
#media (max-width: 337px){
.social{
margin-top: 12.5rem;
}
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght#400;700&family=Open+Sans:wght#300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/b41e2a9200.js" crossorigin="anonymous"></script>
<link rel="shortcut icon" href="icons8-whole-apple-16.png" type="image/x-icon">
<title id="titulo">Pomodoro Timer</title>
</head>
<body>
<section>
<div class="container">
<h1>Pomodoro Timer</h1>
<div class="painel">
<span id="work">Work</span>
<span id="break">Break</span>
</div>
<div class="timer">
<div class="box">
<div class="time">
<span id="minutes"></span>
<span>:</span>
<span id="seconds"></span>
</div>
</div>
</div>
<div class="controls">
<button id="start" onclick="start()"><i class="fa-solid fa-play"></i></button>
<a id="stop" href="#" onclick="stop()"><i class="fa-solid fa-stop"></i></a>
<a id="reset" href="#" onclick="reset()"><i class="fa-solid fa-arrow-rotate-left"></i></a>
</div>
<div class="social">
<i class="fab fa-instagram"></i>
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-linkedin"></i>
</div>
</div>
</section>
<section class="content">
<article>
<div id="text1">
<h1>O que é pomodoro?</h1>
<p>A técnica de pomodoro é uma forma de gerenciamento de tempo, de forma a utilizar melhor o seu tempo e se concentrar melhor no que está fazendo de forma que não se sobrecarregue mentalmente. O sistema incentiva a pessoa a focar de maneira intensa e integral em apenas uma tarefa ao longo de exatos 25 minutos. A técnica foi desenvolvida por Francesco Cirillo no final dos anos 1980. A técnica recebeu esse nome pois Francesco utilizava um cronômetro em forma de tomate, que é Pomodoro em italiano. </p>
</div>
<div>
<h2>Como funciona?</h2>
<p>O sistema pomodoro consiste em 25 minutos de concentração em uma tarefa, seguida de 5 minutos de descanso. Os ciclos de 25 minutos são chamados de Pomodoros, e para organizar melhor a realização da sua tarefa é bom calcular quantos pomodoros serão necessários para a tarefa. Também é aconselhável que a cada 4 ciclos, fazer uma pausa mais longa de 15 a 30 minutos. Esses intervalos entres os pomodoros são fundamentais para “oxigenar o seu cérebro” e aumentar a agilidade mental. O site é tem um design minimalista totalmente voltado para a menor distração possivel, aproveite as funcionalidades e bom trabalho/estudo. 😉 </p>
</div>
</article>
</section>
<footer>
<p>Desenvolvido por ©CarlosCurcino</p>
</footer>
<script src="app.js"></script>
</body>
</html>