From 28fe03cfc72fcda450f31f604e91d59d3ade8e54 Mon Sep 17 00:00:00 2001
From: Andreas Gresseth <andretg@stud.ntnu.no>
Date: Tue, 15 Sep 2026 09:21:55 +0200
Subject: [PATCH] =?UTF-8?q?Endringer=20i=20sjermst=C3=B8rrelse=20for=20?=
 =?UTF-8?q?=C3=A5=20tilpasse=20ulike=20enheter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                            | 53 ++++++++++++++--
 src/App.css                          | 49 ++++++++++++---
 src/App.tsx                          | 12 ++--
 src/components/CountryCard.css       | 46 +++++++++++---
 src/components/CountryMenu.css       | 53 +++++++++++++++-
 src/components/CountryMenu.tsx       | 93 ++++++++++++++++++++--------
 src/components/CountryNavigation.css | 21 +++++--
 src/components/FavoriteButton.css    |  5 +-
 src/components/FavoritesFilter.css   |  1 +
 src/components/SortControl.css       |  5 +-
 src/index.css                        | 43 ++++++-------
 11 files changed, 299 insertions(+), 82 deletions(-)

diff --git a/README.md b/README.md
index 9ae84f5..8765485 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,8 @@ Brukeren kan bla med forrige/neste, velge land direkte i en sidemeny og
 sortere landene etter navn eller befolkning. Sorteringsvalget huskes etter
 reload i samme fane. Brukeren kan markere favorittland, og favorittene
 huskes mellom nettleserøkter. Et filter kan vise bare favorittland, og
-filtervalget huskes etter reload i samme fane.
+filtervalget huskes etter reload i samme fane. Layouten tilpasser seg
+desktop, nettbrett og mobil i både stående og liggende format.
 
 ## Krav
 
@@ -254,13 +255,15 @@ og sender valgt land til kortet.
   bildet ikke lastes, vises «Flagg ikke tilgjengelig» i stedet.
 - **Styling:** Vanlig CSS i `CountryCard.css` med fargevariablene fra
   `index.css`, slik at lys og mørk modus fungerer. På smale skjermer
-  legges etikett og verdi under hverandre.
+  legges etikett og verdi under hverandre. På lave skjermer i liggende
+  format ligger flagget ved siden av fakta, se
+  [Responsivt design](#responsivt-design).
 
 ### Navigasjon
 
 Brukeren kan bla med forrige/neste over kortet og velge land direkte i en
 sidemeny. Begge komponentene får landlisten, valgt landkode og en
-`onSelect`-funksjon via props, og eier ingen state selv.
+`onSelect`-funksjon via props. Valgt land og utvalget eies av `App`.
 
 - **`CountryMenu`:** En `<aside>` med overskriften «Land». Øverst ligger
   sortering og favorittfilter, som menyen tar imot som `children`. Under
@@ -271,8 +274,8 @@ sidemeny. Begge komponentene får landlisten, valgt landkode og en
 - **`CountryNavigation`:** «Forrige», «Land 3 av 25» og «Neste» over
   kortet.
 - **Oppsett:** Menyen ligger til venstre og valgt land til høyre. Under
-  768 px ligger menyen over kortet, og landlisten får begrenset høyde
-  med egen scrolling.
+  641 px ligger menyen over kortet, og landlisten legges bak knappen
+  «Landliste (25)», se [Responsivt design](#responsivt-design).
 - **Én kilde til valgt land:** `App` lagrer bare landkoden til valgt land
   i `useState`. Valgt land slås opp i utvalget, og det samme landet
   sendes til menyen, navigasjonen og kortet.
@@ -404,6 +407,24 @@ tilleggsfunksjon som gjør det enklere å finne favorittene igjen.
 - Bare `"true"` slår på filteret. Mangler verdien, er den ugyldig, eller
   er lagring blokkert, vises alle land.
 
+### Responsivt design
+
+Layouten bruker vanlig CSS med flexbox og grid.
+
+| Skjerm                       | Oppsett                                                   |
+| ---------------------------- | --------------------------------------------------------- |
+| Bredere enn 640 px           | Sidemeny til venstre (260 px, eller 220 px under 1024 px) |
+| 640 px og smalere            | Én kolonne, og landlisten ligger bak knappen «Landliste»  |
+| Liggende og høyst 500 px høy | Flagget ligger ved siden av fakta                         |
+
+- På mobil ville 25 land skyve landkortet langt ned, så landlisten er
+  lukket som standard. Knappen har `aria-expanded`, og fokus flyttes til
+  knappen når et land velges.
+- CSS-variabler i `index.css` gir kort, meldinger og knapper samme bredde,
+  høyde og hjørner.
+- Lange navn og tall brytes over flere linjer, og flagg beholder
+  proporsjonene med `object-fit: contain`.
+
 ### Implementert og gjenstående
 
 Implementert:
@@ -417,6 +438,8 @@ Implementert:
 - Sortering etter navn eller befolkning, lagret i sessionStorage.
 - Favorittland, lagret i localStorage.
 - Filter som viser bare favorittland, lagret i sessionStorage.
+- Responsiv layout for desktop, nettbrett og mobil i stående og liggende
+  format.
 
 Gjenstår i senere issues:
 
@@ -597,6 +620,24 @@ ikke lagt i repoet.
   ville `App` derfor vist feilsiden. Nå vises dataene videre.
 - Ingen JavaScript-feil eller konsollfeil i noen av kjøringene.
 
+### Kontroller av layout
+
+Testet i nettleserens enhetsemulering:
+
+| Størrelse (px)                    | Tilsvarer       |
+| --------------------------------- | --------------- |
+| 320 × 568                         | Liten mobil     |
+| 375 × 812                         | Mobil, stående  |
+| 667 × 375, 740 × 360 og 812 × 375 | Mobil, liggende |
+| 768 × 1024 og 1024 × 768          | Nettbrett       |
+| 1280 × 800                        | Desktop         |
+
+- Ingen horisontal scrolling i noen av størrelsene.
+- Lange landnavn, mange språk, store tall og manglende flagg ble testet med
+  midlertidige testdata og brøt ikke layouten.
+- Lastetilstand, feilmelding og tomt favorittutvalg passer inn i layouten.
+- Ikke testet på ekte mobil eller i Safari ennå.
+
 Automatiske tester som gjenstår når Vitest er satt opp:
 
 - `fetchCountries`: vellykket henting, HTTP-feil, nettverksfeil, ugyldig
@@ -611,6 +652,8 @@ Automatiske tester som gjenstår når Vitest er satt opp:
   med ett land.
 - `CountryMenu`: klikk på et land velger det, valgt land har
   `aria-current`, favoritter er markert, og tomt utvalg gir melding.
+  «Landliste»-knappen bytter `aria-expanded`, og valg av land lukker
+  listen og flytter fokus til knappen.
 - `App`: kort og navigasjon viser samme land, og ugyldig eller manglende
   valgt kode gir første land.
 - `sortCountries`: navn med norske bokstaver, synkende befolkning,
diff --git a/src/App.css b/src/App.css
index f657f4d..cec10fb 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,7 +2,8 @@
   padding: 0 16px 32px;
 }
 
-/* Meny til venstre og valgt land til høyre. På smale skjermer under hverandre. */
+/* Meny til venstre og valgt land til høyre. Menyen smalner på mellomstore
+   skjermer, og på smale skjermer ligger den over landet. */
 .app__layout {
   display: grid;
   grid-template-columns: 260px minmax(0, 1fr);
@@ -10,26 +11,56 @@
   align-items: start;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
   .app__layout {
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: 220px minmax(0, 1fr);
     gap: 24px;
   }
 }
 
-.country-error button,
-.favorites-empty button {
+@media (max-width: 640px) {
+  .app__layout {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 16px;
+  }
+}
+
+/* Lastetilstand, feilmelding og tomt resultat får samme bredde og ramme
+   som landkortet, så de passer inn i layouten. */
+.app__message {
+  width: 100%;
+  max-width: var(--content-width);
+  margin: 0 auto;
+  padding: 24px;
+  color: var(--text-h);
+  overflow-wrap: anywhere;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-lg);
+}
+
+.app__message button {
+  min-height: var(--control-height);
   margin-top: 12px;
-  padding: 6px 12px;
+  padding: 6px 14px;
   font: inherit;
   color: var(--accent);
   background: var(--accent-bg);
   border: 2px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--radius);
   cursor: pointer;
 }
 
-.country-error button:hover,
-.favorites-empty button:hover {
+.app__message button:hover {
   border-color: var(--accent-border);
 }
+
+.app__message button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+@media (max-width: 480px) {
+  .app__message {
+    padding: 16px;
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
index 1a5e14a..007897f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -61,13 +61,17 @@ function App() {
 
   // Ved «Prøv igjen» går queryen tilbake til pending, så lastetilstanden vises igjen.
   if (isPending) {
-    content = <p role="status">Laster land …</p>;
+    content = (
+      <p role="status" className="app__message">
+        Laster land …
+      </p>
+    );
   } else if (!data) {
     // Feilsiden vises bare når det ikke finnes data. Feiler en senere henting
     // i bakgrunnen, beholder TanStack Query de gamle dataene, og appen
     // fortsetter å vise dem i stedet for å bytte til feilsiden.
     content = (
-      <div role="alert" className="country-error">
+      <div role="alert" className="app__message">
         <p>Kunne ikke hente landdata. {error?.message}</p>
         <button type="button" onClick={() => refetch()}>
           Prøv igjen
@@ -75,7 +79,7 @@ function App() {
       </div>
     );
   } else if (sortedCountries.length === 0) {
-    content = <p>Fant ingen land.</p>;
+    content = <p className="app__message">Fant ingen land.</p>;
   } else {
     // Menyen, navigasjonen og kortet bruker samme utvalg og samme land.
     content = (
@@ -114,7 +118,7 @@ function App() {
           ) : (
             // Tomt utvalg er bare mulig når favorittfilteret er på, for eksempel
             // uten favoritter eller etter at siste favoritt er fjernet.
-            <div role="status" className="favorites-empty">
+            <div role="status" className="app__message">
               <p>Du har ingen favorittland å vise.</p>
               <button
                 type="button"
diff --git a/src/components/CountryCard.css b/src/components/CountryCard.css
index b57bf30..3951d77 100644
--- a/src/components/CountryCard.css
+++ b/src/components/CountryCard.css
@@ -1,23 +1,24 @@
 .country-card {
   width: 100%;
-  max-width: 520px;
+  max-width: var(--content-width);
   margin: 0 auto;
   padding: 24px;
-  box-sizing: border-box;
   text-align: left;
   background: var(--bg);
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   box-shadow: var(--shadow);
 }
 
+/* Boksen har fast forhold 3:2, og object-fit: contain gjør at flagg med
+   andre proporsjoner beholder formen sin i stedet for å strekkes. */
 .country-card__flag {
   display: block;
   width: 100%;
   aspect-ratio: 3 / 2;
   object-fit: contain;
   margin-bottom: 20px;
-  border-radius: 6px;
+  border-radius: var(--radius);
   background: var(--code-bg);
 }
 
@@ -25,7 +26,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
+  padding: 8px;
+  text-align: center;
   border: 2px dashed var(--border);
   color: var(--text);
 }
@@ -39,8 +41,11 @@
   margin-bottom: 16px;
 }
 
+/* Lange landnavn brytes i stedet for å gjøre kortet bredere. */
 .country-card__name {
+  min-width: 0;
   margin: 0;
+  overflow-wrap: anywhere;
 }
 
 .country-card__facts {
@@ -49,7 +54,7 @@
 
 .country-card__facts div {
   display: grid;
-  grid-template-columns: 7rem 1fr;
+  grid-template-columns: 7rem minmax(0, 1fr);
   gap: 12px;
   padding: 8px 0;
   border-top: 1px solid var(--border);
@@ -76,7 +81,34 @@
   }
 
   .country-card__facts div {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0;
+  }
+}
+
+/* Lav skjerm i liggende format, for eksempel mobil på tvers. Flagget legges
+   ved siden av fakta, slik at landnavn og fakta synes uten mye scrolling. */
+@media (orientation: landscape) and (max-height: 500px) {
+  .country-card {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    grid-template-rows: auto 1fr;
+    gap: 0 16px;
+    padding: 16px;
+  }
+
+  .country-card__flag {
+    grid-row: 1 / 3;
+    margin-bottom: 0;
+  }
+
+  .country-card__header {
+    margin-bottom: 8px;
+  }
+
+  .country-card__facts div {
+    grid-template-columns: minmax(0, 1fr);
     gap: 0;
+    padding: 4px 0;
   }
 }
diff --git a/src/components/CountryMenu.css b/src/components/CountryMenu.css
index 9e909dc..8a6f963 100644
--- a/src/components/CountryMenu.css
+++ b/src/components/CountryMenu.css
@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  min-width: 0;
   text-align: left;
 }
 
@@ -17,6 +18,36 @@
   border-bottom: 1px solid var(--border);
 }
 
+/* Knappen for å åpne landlisten vises bare på smale skjermer. */
+.country-menu__toggle {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-height: var(--control-height);
+  padding: 6px 14px;
+  font: inherit;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  border-radius: var(--radius);
+  cursor: pointer;
+}
+
+.country-menu__toggle:hover {
+  border-color: var(--accent-border);
+}
+
+.country-menu__toggle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.country-menu__toggle-icon {
+  line-height: 1;
+}
+
 .country-menu__list {
   max-height: 70vh;
   margin: 0;
@@ -31,13 +62,14 @@
   justify-content: space-between;
   gap: 8px;
   width: 100%;
+  min-height: var(--control-height);
   padding: 6px 10px;
   font: inherit;
   text-align: left;
   color: var(--text-h);
   background: transparent;
   border: 2px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--radius);
   cursor: pointer;
 }
 
@@ -56,7 +88,14 @@
   font-weight: 600;
 }
 
+/* Lange landnavn brytes over flere linjer i stedet for å gjøre menyen bredere. */
+.country-menu__name {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .country-menu__favorite {
+  flex-shrink: 0;
   color: var(--accent);
 }
 
@@ -74,8 +113,16 @@
   white-space: nowrap;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 640px) {
+  .country-menu__toggle {
+    display: flex;
+  }
+
   .country-menu__list {
-    max-height: 40vh;
+    max-height: 50vh;
+  }
+
+  .country-menu__list--collapsed {
+    display: none;
   }
 }
diff --git a/src/components/CountryMenu.tsx b/src/components/CountryMenu.tsx
index c1a1b44..fe2d2d4 100644
--- a/src/components/CountryMenu.tsx
+++ b/src/components/CountryMenu.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { useRef, useState, type ReactNode } from 'react';
 import type { Country } from '../types/country';
 import './CountryMenu.css';
 
@@ -13,7 +13,7 @@ type CountryMenuProps = {
 };
 
 // Sidemeny med kontroller for utvalget og en liste over landene i utvalget.
-// Et klikk på et land velger det. Komponenten eier ingen state selv.
+// Et klikk på et land velger det. Valgt land og utvalget eies av App.
 function CountryMenu({
   countries,
   selectedCode,
@@ -21,6 +21,21 @@ function CountryMenu({
   isFavorite,
   children,
 }: CountryMenuProps) {
+  // Om landlisten er åpen på smale skjermer. Der er listen lukket som
+  // standard, slik at landkortet synes uten å scrolle forbi alle landene.
+  // På bredere skjermer skjuler CSS knappen og viser alltid listen.
+  const [isListOpen, setIsListOpen] = useState(false);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+
+  function handleSelect(code: string) {
+    onSelect(code);
+    // Lukk listen etter valg, så det valgte landet synes på smale skjermer.
+    // Knappen i listen forsvinner da, så fokus flyttes til knappen som åpner
+    // listen. På brede skjermer er den skjult, og fokus blir i listen.
+    setIsListOpen(false);
+    toggleRef.current?.focus();
+  }
+
   return (
     <aside className="country-menu" aria-labelledby="country-menu-heading">
       <h2 id="country-menu-heading" className="country-menu__heading">
@@ -30,30 +45,56 @@ function CountryMenu({
       <div className="country-menu__controls">{children}</div>
 
       {countries.length > 0 ? (
-        <ul className="country-menu__list">
-          {countries.map((country) => (
-            <li key={country.code}>
-              <button
-                type="button"
-                className="country-menu__item"
-                aria-current={
-                  country.code === selectedCode ? 'true' : undefined
-                }
-                onClick={() => onSelect(country.code)}
-              >
-                {country.name}
-                {isFavorite(country.code) && (
-                  <>
-                    <span className="country-menu__favorite" aria-hidden="true">
-                      ★
-                    </span>
-                    <span className="country-menu__sr-only"> (favoritt)</span>
-                  </>
-                )}
-              </button>
-            </li>
-          ))}
-        </ul>
+        <>
+          <button
+            ref={toggleRef}
+            type="button"
+            className="country-menu__toggle"
+            aria-expanded={isListOpen}
+            aria-controls="country-menu-list"
+            onClick={() => setIsListOpen((open) => !open)}
+          >
+            Landliste ({countries.length})
+            <span className="country-menu__toggle-icon" aria-hidden="true">
+              {isListOpen ? '▴' : '▾'}
+            </span>
+          </button>
+
+          <ul
+            id="country-menu-list"
+            className={
+              isListOpen
+                ? 'country-menu__list'
+                : 'country-menu__list country-menu__list--collapsed'
+            }
+          >
+            {countries.map((country) => (
+              <li key={country.code}>
+                <button
+                  type="button"
+                  className="country-menu__item"
+                  aria-current={
+                    country.code === selectedCode ? 'true' : undefined
+                  }
+                  onClick={() => handleSelect(country.code)}
+                >
+                  <span className="country-menu__name">{country.name}</span>
+                  {isFavorite(country.code) && (
+                    <>
+                      <span
+                        className="country-menu__favorite"
+                        aria-hidden="true"
+                      >
+                        ★
+                      </span>
+                      <span className="country-menu__sr-only"> (favoritt)</span>
+                    </>
+                  )}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </>
       ) : (
         <p className="country-menu__empty">Ingen land i utvalget.</p>
       )}
diff --git a/src/components/CountryNavigation.css b/src/components/CountryNavigation.css
index d6da982..b66153f 100644
--- a/src/components/CountryNavigation.css
+++ b/src/components/CountryNavigation.css
@@ -2,23 +2,30 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  max-width: 520px;
-  margin: 0 auto 24px;
+  gap: 8px;
+  max-width: var(--content-width);
+  margin: 0 auto 16px;
 }
 
+/* Posisjonen tar plassen mellom knappene og brytes over to linjer på
+   svært smale skjermer, i stedet for å presse knappene ut av skjermen. */
 .country-navigation__position {
+  flex: 1;
+  min-width: 0;
+  text-align: center;
   color: var(--text-h);
   font-variant-numeric: tabular-nums;
 }
 
 .country-navigation__button {
+  flex-shrink: 0;
+  min-height: var(--control-height);
   padding: 6px 14px;
   font: inherit;
   color: var(--accent);
   background: var(--accent-bg);
   border: 2px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--radius);
   cursor: pointer;
 }
 
@@ -35,3 +42,9 @@
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
+
+@media (min-width: 641px) {
+  .country-navigation {
+    margin-bottom: 24px;
+  }
+}
diff --git a/src/components/FavoriteButton.css b/src/components/FavoriteButton.css
index a6b4671..bef782b 100644
--- a/src/components/FavoriteButton.css
+++ b/src/components/FavoriteButton.css
@@ -1,9 +1,12 @@
 .favorite-button {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   gap: 6px;
-  padding: 6px 12px;
+  min-height: var(--control-height);
+  padding: 6px 14px;
   font: inherit;
+  white-space: nowrap;
   color: var(--text-h);
   background: transparent;
   border: 2px solid var(--border);
diff --git a/src/components/FavoritesFilter.css b/src/components/FavoritesFilter.css
index 0e8a807..ee1eeef 100644
--- a/src/components/FavoritesFilter.css
+++ b/src/components/FavoritesFilter.css
@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  min-height: var(--control-height);
   width: fit-content;
   max-width: 100%;
   cursor: pointer;
diff --git a/src/components/SortControl.css b/src/components/SortControl.css
index 4a1c280..fe7a3a9 100644
--- a/src/components/SortControl.css
+++ b/src/components/SortControl.css
@@ -5,13 +5,14 @@
 }
 
 .sort-control select {
-  max-width: 100%;
+  width: 100%;
+  min-height: var(--control-height);
   padding: 6px 8px;
   font: inherit;
   color: var(--text-h);
   background: var(--bg);
   border: 1px solid var(--border);
-  border-radius: 5px;
+  border-radius: var(--radius);
 }
 
 .sort-control select:focus-visible {
diff --git a/src/index.css b/src/index.css
index 5fb3313..e50c1b9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,7 +7,6 @@
   --accent: #aa3bff;
   --accent-bg: rgba(170, 59, 255, 0.1);
   --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
   --shadow:
     rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
 
@@ -15,6 +14,12 @@
   --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
   --mono: ui-monospace, Consolas, monospace;
 
+  /* Felles mål, slik at kontroller, kort og meldinger ser likt ut. */
+  --content-width: 520px;
+  --control-height: 2.5rem;
+  --radius: 6px;
+  --radius-lg: 12px;
+
   font: 18px/145% var(--sans);
   letter-spacing: 0.18px;
   color-scheme: light dark;
@@ -40,14 +45,17 @@
     --accent: #c084fc;
     --accent-bg: rgba(192, 132, 252, 0.15);
     --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
     --shadow:
       rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
   }
+}
 
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
+/* Padding og kantlinjer regnes med i bredden, så elementer med
+   width: 100% ikke blir bredere enn forelderen. */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
 }
 
 #root {
@@ -59,7 +67,6 @@
   min-height: 100svh;
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
 }
 
 body {
@@ -81,6 +88,15 @@ h1 {
     font-size: 36px;
     margin: 20px 0;
   }
+  @media (max-width: 480px) {
+    font-size: 30px;
+    margin: 16px 0;
+  }
+  /* Lav skjerm, for eksempel mobil i liggende format. */
+  @media (max-height: 500px) {
+    font-size: 28px;
+    margin: 12px 0;
+  }
 }
 h2 {
   font-size: 24px;
@@ -94,18 +110,3 @@ h2 {
 p {
   margin: 0;
 }
-
-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
-  border-radius: 4px;
-  color: var(--text-h);
-}
-
-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
-  background: var(--code-bg);
-}