.

index.html

@@ -57,7 +57,7 @@
                 <h1>Sobre a técnica Pomodoro</h1>
                 <hr>
                 <div class="faq">
-                    <button type="button" class="collapsible">Como funciona?<img class="expand" src="assets/SVG/expand-down.svg" alt="expand" width="32px"></button>
+                    <button type="button" class="collapsible">Como funciona?<img class="expand" src="assets/SVG/expand-down.svg" alt="expand"></button>
                     <div class="content">
                         <p>
                             A técnica Pomodoro é um método de gestão de tempo projetada para melhorar a produtividade e a concentração ao dividir o trabalho em períodos cronometrados, geralmente de 25 minutos, separados por breves pausas.<br>
@@ -68,11 +68,11 @@ <h1>Sobre a técnica Pomodoro</h1>
                             <br><mark class="red">5. Repita o ciclo:</mark> Após cada pausa curta, reinicie o cronômetro para outro pomodoro de 25 minutos e continue trabalhando na tarefa. A cada quatro pomodoros (ou seja, após cerca de duas horas), faça uma pausa mais longa de 15 a 30 minutos.<br>
                         </p>
                     </div>
-                    <button class="collapsible">Quem a desenvolveu?<img class="expand" src="assets/SVG/expand-down.svg" alt="expand" width="32px"></button>
+                    <button class="collapsible">Quem a desenvolveu?<img class="expand" src="assets/SVG/expand-down.svg" alt="expand"></button>
                     <div class="content">
                         <p>A técnica Pomodoro foi desenvolvida por <mark class="red">Francesco Cirillo</mark> no final da década de 1980. Francesco Cirillo era um estudante universitário na época e criou essa técnica de gestão de tempo enquanto buscava maneiras de melhorar seu próprio foco e produtividade nos estudos.</p>
                     </div>
-                    <button class="collapsible">Quais são os benefícios?<img class="expand" src="assets/SVG/expand-down.svg" alt="expand" width="32px"></button>
+                    <button class="collapsible">Quais são os benefícios?<img class="expand" src="assets/SVG/expand-down.svg" alt="expand"></button>
                     <div class="content">
                         <p>
                             A técnica Pomodoro oferece vários benefícios que podem ajudar na gestão do tempo e no aumento da produtividade. Aqui estão alguns dos principais benefícios:<br>
@@ -83,7 +83,7 @@ <h1>Sobre a técnica Pomodoro</h1>
                             <br><mark class="red">5. Melhora na qualidade de vida:</mark> Com intervalos regulares de descanso (geralmente 5 minutos após cada pomodoro e pausas mais longas após quatro pomodoros), a técnica Pomodoro promove uma abordagem sustentável ao trabalho. Esses intervalos permitem que você descanse, recupere a energia e evite o esgotamento mental.<br>
                         </p>
                     </div>
-                    <button class="collapsible">Por que o símbolo é um tomate?<img class="expand" src="assets/SVG/expand-down.svg" alt="expand" width="32px"></button>
+                    <button class="collapsible">Por que o símbolo é um tomate?<img class="expand" src="assets/SVG/expand-down.svg" alt="expand"></button>
                     <div class="content">
                         <p>O nome "Pomodoro" vem da palavra italiana para "tomate", pois Francesco Cirillo, criador da técnica, utilizava um timer de cozinha em formato de tomate para controlar seus períodos de trabalho, o tomate então se tornou o símbolo da técnica.</p>
                     </div>

style.css

@@ -11,6 +11,8 @@
     color: white;
 }
 
+/* Smooth scroll behavior */
+
 html {
     scroll-behavior: smooth;
 }
@@ -248,6 +250,9 @@ footer {
 }
 
 .collapsible {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     width: 90%;
     background: none;
     border: none;
@@ -257,6 +262,14 @@ footer {
     text-align: left;
     cursor: pointer;
     margin: 1% 0% 1%;
+    flex-wrap: wrap;
+}
+
+.collapsible .expand {
+    width: 32px;
+    height: auto;
+    margin-left: auto;
+    margin-top: 50px;
 }
 
 .content {
@@ -265,12 +278,6 @@ footer {
     overflow: hidden;
 }
 
-.expand {
-    padding: 0;
-    margin: 0;
-    margin-left: 95%;
-}
-
 .faq {
     text-align: left;
     margin-left: 10%;
@@ -287,3 +294,119 @@ mark.red {
     background: none;
     font-weight: bold;
 }
+
+/* Media queries */
+
+@media screen and (max-width: 610px) {
+
+    /* Body, font-size, footer and other elements*/
+
+    body {
+        font-size: 1rem;
+    }
+
+    h1 {
+        font-size: 2rem;
+    }
+
+    h2 {
+        font-size: 1.5rem;
+    }
+
+    p {
+        font-size: 1rem;
+    }
+
+    footer {
+        p {
+            font-size: 0.7rem;
+        }
+    }
+
+    /* Top navigator */
+
+    .nav-bar {
+        padding: 8px 10px;
+    }
+
+    #logo {
+        width: 45px;
+    }
+
+    .site-name {
+        font-size: 1rem;
+    }
+
+    .menu {
+        display: none;
+        margin-left: auto;
+    }
+
+    /* Timer, buttons and other elements */
+
+    .timer-container {
+        width: 80%;
+        margin-top: 40%;
+        margin-bottom: 25%;
+    }
+
+    .circle-container {
+        width: 100%;
+        height: auto;
+    }
+
+    .app-counter-box {
+        top: 80px;
+        p {
+            font-size: 3rem;
+        }
+    }
+
+    .timer-select {
+        font-size: 3rem;
+    }
+
+    .timer-button {
+        margin-bottom: 15%;
+        font-size: 120%;
+    }
+
+    .pause-button {
+        font-size: 110%;
+        width: 35%;
+        height: auto;
+        margin: 10% 0 0 2%;
+    }
+
+    .about-container {
+        margin-top: 10%;
+        padding-bottom: 2%;
+    }
+
+    .collapsible {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        width: 90%;
+        background: none;
+        border: none;
+        color: var(--color2);
+        font-size: 1rem;
+        font-weight: 600;
+        text-align: left;
+        cursor: pointer;
+        margin: 10% 0% 1%;
+    }
+
+    .expand {
+        display: none;
+    }
+
+    .content {
+        max-width: 100%;
+        margin: 5% 0;
+        padding: 0;
+        display: none;
+        overflow: hidden;
+    }
+}