urejeni borderji okoli fieldstov

rezervacija.html

@@ -7,7 +7,7 @@
     <title>Rezervacija | Za prste obliznit</title>
 </head>
 <body>
-<header class="site_header">
+    <header class="site_header">
         <nav class="nav_bar">
             <a class="logo" href="index.html">
                 <img src="logo.png" alt="Logotip restavracije" width="150"><br>
@@ -21,7 +21,8 @@
                 <li><a href="o_nas.html">O nas</a></li>
             </ul>
         </nav>
-</header>
+    </header>
+    <main class="rezervacija_page">
         <h1>Vaša miza vas že čaka</h1>
             <p>Dobra hrana je boljša v dobri družbi. Rezervirajte svojo mizo in si privoščite kulinarično popotovanje po spletu.</p>
             <h2>Nekaj informaciji pred rezervacijo:</h2>
@@ -43,8 +44,9 @@
         <h2>Rezervacija</h2>
         <p>Izpolnite podatke in pošljite zahtevo za restavracijo.</p>
         <form method="get">
-        <fieldset>
+            <fieldset class="field_rezervacija">
                 <legend>Podrobnosti rezervacije:</legend>
+                
                 Datum obiska
                 <br>
                 <input type="date" id="datum-obiska" name="datum-obiska" required>
@@ -69,7 +71,7 @@
             </fieldset>
             <br>
             <br>
-        <fieldset>
+            <fieldset  class="field_rezervacija">
                 <legend>Osebni podatki:</legend>
                 Ime in priimek
                 <br>
@@ -87,7 +89,7 @@
             </fieldset>
             <br>
             <br>
-        <fieldset>
+            <fieldset class="field_rezervacija">
                 <legend>Dodatne želje:</legend>
                 Priložnost
                 <br>
@@ -117,6 +119,7 @@
             <input type="reset" value="Ponastavi">
         </form>
         <br><br>
+    </main>
     <footer>
     <address>
         Za prste obliznit<br>

stylesheet.css

@@ -609,3 +609,31 @@ footer p {
     transition: 0.2s;
     font-weight: 500;
 }
+
+/*rezervacija- fieldseti */
+
+.field_rezervacija {
+    background-color: var(--barva-kartice);
+    box-shadow: var(--senca-kartice);
+    border-radius: var(--zaobljenost);
+    border:none;
+    border-top:0.3rem solid var(--barva-poudarek);
+}
+
+.field_rezervacija legend {
+    background-color: var(--barva-poudarek);
+    color: var(--barva-besedilo-na-temnem);
+    font-weight: 600;
+    font-family: "Fraunces", sans-serif;
+    border-radius: var(--zaobljenost);
+    padding: 0.5rem;
+}
+
+.field_rezervacija:focus-within {
+    border-top:0.3rem solid var(--barva-dodatna);
+}
+
+.field_rezervacija:focus-within legend {
+    background-color: var(--barva-dodatna);
+    color: var(--barva-besedilo);
+}