Polishing of Uni quizes, and some styling

posts.json

@@ -1,19 +1,19 @@
 [
     {
         "slug": "my-first-post",
-        "title": "My First Post Ever",
+        "title": "Just an empty template",
-        "content": "This is the content of my first post. It's an exciting moment to share my thoughts with the world!",
+        "content": "This pages only purpose is to hold place for a reuseable template!",
         "date": "2025-01-12",
         "image_location": "images/posts/post1.jpg",
-        "topics": ["Introduction", "Technology", "Personal"]
+        "topics": ["html", "CSS", "Flask"]
     },
     {
         "slug": "platformer-game-developement-in-godot",
         "title": "Platformer game in Godot 4",
         "content": "The content of thi spost is generated, and its only purpose is to test the site.",
         "date": "2025-01-13",
-        "image_location": "images/posts/godot_wide_logo.png",
+        "image_location": "images/posts/platformer-game-developement-in-godot/godot_wide_logo.png",
-        "topics": ["Technology", "Science"]
+        "topics": ["Godot", "Game developement"]
     },
     {
         "slug": "third-post-title",

static/css/main.css

@@ -91,6 +91,9 @@ body {
         margin-right: -15px;
         margin-bottom: 5px;
     }
+    .container{
+        width: 100%;
+    }
 }
 
 /* Main Section */

static/css/post.css

@@ -0,0 +1,130 @@
+.main {
+    margin: 50px auto;
+    display: flex;
+    flex-direction: column;
+    width: 90%;
+    max-width: 1200px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+    padding: 20px;
+}
+
+h1, h2, h3 {
+    color: #ffd700;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
+    margin-bottom: 20px;
+}
+
+p, li {
+    font-size: 1rem;
+    margin-bottom: 1em;
+}
+
+ul {
+    list-style-type: square;
+    padding-left: 1.5em;
+    text-align: left;
+    margin: auto;
+    width: fit-content;
+}
+
+a {
+    color: #00ffcc;
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+a:hover {
+    color: #ff5733;
+}
+
+img {
+    width: 30%;
+    min-height: 30%;
+    height: auto;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    margin-bottom: 20px;
+    float: right;
+    margin-left: 20px;
+}
+
+.step {
+    margin-bottom: 2em;
+    padding: 20px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.step img {
+    max-width: 40%;
+    margin: 0;
+}
+
+.step-content {
+    flex: 1;
+}
+
+.step pre {
+    background: rgba(30, 30, 30, 1);
+    color: #cfcfcf;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 0.9rem;
+    padding: 15px;
+    border: 1px solid #444;
+    border-radius: 10px;
+    overflow-x: auto;
+}
+
+.button {
+    display: inline-block;
+    padding: 10px 20px;
+    margin-top: 10px;
+    background: linear-gradient(to right, #5a0fb8, #1f65d6);
+    color: white;
+    border-radius: 5px;
+    font-weight: bold;
+    text-decoration: none;
+    text-shadow: none;
+    transition: background 0.3s;
+}
+
+.button:hover {
+    background: linear-gradient(to right, #1f65d6, #5a0fb8);
+    color: white;
+}
+
+pre{
+    max-width: 100%;
+    width: fit-content;
+    align-content: left;
+    text-align: left;
+    margin: auto;
+    overflow-x: auto;
+}
+
+@media (max-width: 768px) {
+    img {
+        float: none;
+        min-width: 100%;
+        margin: 0 auto 20px auto;
+        display: block;
+    }
+
+    .step {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    pre, code {
+        margin: 10px auto;
+
+        max-width: 90%;
+    }
+}

static/css/quizes.css

@@ -0,0 +1,139 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(to right, #5a0fb8, #1f65d6);
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    overflow-x: hidden;
+    margin: 0;
+}
+
+.container {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    max-width: 600px;
+    width: 90%;
+    transform: scale(1);
+    transition: transform 0.3s ease-in-out;
+}
+
+h1 {
+    text-align: center;
+    font-size: 2em;
+    margin-bottom: 20px;
+}
+
+.question {
+    margin-bottom: 20px;
+    font-size: 1.2em;
+    font-weight: 600;
+    text-align: center;
+}
+
+.answer-options {
+    margin-top: 15px;
+}
+
+.answer-options label {
+    display: block;
+    position: relative;
+    background: linear-gradient(to right, #5a0fb8, #1f65d6);
+    padding: 10px 15px;
+    margin-bottom: 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.answer-options label:hover {
+    background: linear-gradient(to right, #1f65d6, #5a0fb8);
+    color: white;
+    transform: translateX(5px);
+}
+
+.answer-options input {
+    display: none;
+}
+
+.answer-options input:checked + label {
+    background: linear-gradient(to right, #5a0fb8, #2ecc71);
+    color: white;
+    border: 2px solid #27ae60;
+}
+
+.submit-button, .quit-button {
+    display: block;
+    width: 100%;
+    padding: 12px;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 1em;
+    cursor: pointer;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    margin-top: 15px;
+    text-align: center;
+}
+
+.submit-button {
+    background: linear-gradient(to right, #80e27e, #66c466);
+}
+
+.quit-button {
+    background: linear-gradient(to right, #ff8a80, #ff5252); 
+}
+
+.submit-button:hover, .quit-button:hover {
+    transform: scale(1.05);
+}
+
+.submit-button:active, .quit-button:active {
+    transform: scale(0.98);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    h1 {
+        font-size: 1.8em;
+    }
+
+    .question {
+        font-size: 1.1em;
+    }
+
+    .answer-options label {
+        font-size: 0.9em;
+        padding: 8px 12px;
+    }
+
+    .submit-button, .quit-button {
+        font-size: 0.9em;
+        padding: 10px;
+    }
+}
+
+@media (max-width: 480px) {
+    h1 {
+        font-size: 1.5em;
+    }
+
+    .question {
+        font-size: 1em;
+    }
+
+    .answer-options label {
+        font-size: 0.8em;
+        padding: 6px 10px;
+    }
+
+    .submit-button, .quit-button {
+        font-size: 0.8em;
+        padding: 8px;
+    }
+}

templates/posts/my-fIrst-post.html

@@ -1,5 +1,105 @@
 {% extends "main.html" %}
 
 {% block content %}
-    <h1>THIS IS FINALY MY FIRST FREAKING POST!!!!</h1>
+<link rel="stylesheet" href="{{ url_for('static', filename='css/post.css') }}">
+<main class="main">
+    <section class="intro">
+        <h1></h1>
+        <p></p>
+        <p></p>
+    </section>
+
+    <section class="features">
+        <h2></h2>
+        <div class="step">
+            <img src="" alt="">
+            <div class="step-content">
+                <ul>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                </ul>
+            </div>
+        </div>
+    </section>
+
+    <section class="steps">
+        <h2></h2>
+
+        <article class="step">
+            <img src="" alt="">
+            <div class="step-content">
+                <h3></h3>
+                <p></p>
+                <blockquote></blockquote>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="" alt="">
+            <div class="step-content">
+                <h3></h3>
+                <p></p>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="" alt="">
+            <div class="step-content">
+                <h3></h3>
+                <p></p>
+                <pre><code class="language-gdscript"></code></pre>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="" alt="">
+            <div class="step-content">
+                <h3></h3>
+                <p></p>
+                <pre><code class="language-gdscript"></code></pre>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="" alt="">
+            <div class="step-content">
+                <h3></h3>
+                <p></p>
+                <a href="#" class="button"></a>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="" alt="">
+            <div class="step-content">
+                <h3></h3>
+                <p></p>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="" alt="">
+            <div class="step-content">
+                <h3></h3>
+                <p></p>
+                <blockquote></blockquote>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="" alt="">
+            <div class="step-content">
+                <h3></h3>
+                <p></p>
+                <blockquote></blockquote>
+            </div>
+        </article>
+    </section>
+
+    <footer>
+        <p></p>
+    </footer>
+</main>
 {% endblock %}

templates/posts/platformer-game-developement-in-godot.html

@@ -1,130 +1,8 @@
 {% extends "main.html" %}
 
 {% block content %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/post.css') }}">
 <main class="main">
-    <style>
-        .main {
-            margin: 50px auto;
-            display: flex;
-            flex-direction: column;
-            width: 90%;
-            max-width: 1200px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 16px;
-            overflow: hidden;
-            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
-            padding: 20px;
-        }
-
-        h1, h2, h3 {
-            color: #ffd700;
-            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
-            margin-bottom: 20px;
-        }
-
-        p, li {
-            font-size: 1rem;
-            margin-bottom: 1em;
-        }
-
-        ul {
-            list-style-type: square;
-            padding-left: 1.5em;
-        }
-
-        a {
-            color: #00ffcc;
-            text-decoration: none;
-            transition: color 0.3s;
-        }
-
-        a:hover {
-            color: #ff5733;
-        }
-
-        img {
-            max-width: 40%;
-            height: auto;
-            border-radius: 10px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-            margin-bottom: 20px;
-            float: right;
-            margin-left: 20px;
-        }
-
-        .step {
-            margin-bottom: 2em;
-            padding: 20px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 10px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-            display: flex;
-            align-items: center;
-            gap: 20px;
-        }
-
-        .step img {
-            max-width: 40%;
-            margin: 0;
-        }
-
-        .step-content {
-            flex: 1;
-        }
-
-        .step pre {
-            background: rgba(30, 30, 30, 1);
-            color: #cfcfcf;
-            font-family: 'Courier New', Courier, monospace;
-            font-size: 0.9rem;
-            padding: 15px;
-            border: 1px solid #444;
-            border-radius: 10px;
-            overflow-x: auto;
-        }
-
-        .button {
-            display: inline-block;
-            padding: 10px 20px;
-            margin-top: 10px;
-            background: linear-gradient(to right, #ff5733, #ffcc33);
-            color: #000;
-            border-radius: 5px;
-            font-weight: bold;
-            text-decoration: none;
-            text-shadow: none;
-            transition: background 0.3s;
-        }
-
-        .button:hover {
-            background: linear-gradient(to right, #ffcc33, #ff5733);
-        }
-
-        @media (max-width: 768px) {
-            img {
-                float: none;
-                max-width: 100%;
-                margin: 0 auto 20px auto;
-                display: block;
-            }
-
-            .step {
-                flex-direction: column;
-                text-align: center;
-            }
-
-            .button {
-                margin: 10px auto;
-            }
-        }
-        pre{
-            width: fit-content;
-            align-content: left;
-            text-align: left;
-            margin: auto;
-        }
-    </style>
-
     <section class="intro">
         <h1>Game Development from Scratch: A Comprehensive Guide</h1>
         <p>
@@ -138,7 +16,7 @@
     <section class="features">
         <h2>Why Choose Godot 4?</h2>
         <div class="step">
-            <img src="{{ url_for('static', filename='images/posts/godot_logo.png') }}" alt="Godot Logo">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/godot_logo.png') }}" alt="Godot Logo">
             <div class="step-content">
                 <ul>
                     <li><strong>Open Source:</strong> Completely free to use with no royalties.</li>
@@ -154,7 +32,7 @@
         <h2>Step-by-Step Game Development Process</h2>
 
         <article class="step">
-            <img src="{{ url_for('static', filename='images/posts/plan_game.png') }}" alt="Game Planning">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/game_plan.png') }}" alt="Game Planning">
             <div class="step-content">
                 <h3>Step 1: Plan Your Game</h3>
                 <p>
@@ -165,7 +43,7 @@
         </article>
 
         <article class="step">
-            <img src="{{ url_for('static', filename='images/posts/godot_editor.png') }}" alt="Godot Editor Screenshot">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/installation.jpg') }}" alt="Godot Editor Screenshot">
             <div class="step-content">
                 <h3>Step 2: Install Godot 4</h3>
                 <p>
@@ -175,7 +53,7 @@
         </article>
 
         <article class="step">
-            <img src="{{ url_for('static', filename='images/posts/first_scene.png') }}" alt="Creating Your First Scene">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/first_scene.png') }}" alt="Creating Your First Scene">
             <div class="step-content">
                 <h3>Step 3: Create Your First Scene</h3>
                 <p>
@@ -189,7 +67,7 @@ func _ready():
         </article>
 
         <article class="step">
-            <img src="{{ url_for('static', filename='images/posts/player_character.png') }}" alt="Player Character Design">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/player_character.png') }}" alt="Player Character Design">
             <div class="step-content">
                 <h3>Step 4: Design the Player Character</h3>
                 <p>
@@ -210,7 +88,7 @@ func _physics_process(delta):
         </article>
 
         <article class="step">
-            <img src="{{ url_for('static', filename='images/posts/environment_design.png') }}" alt="Game Environment">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/game_environment.png') }}" alt="Game Environment">
             <div class="step-content">
                 <h3>Step 5: Build the Game Environment</h3>
                 <p>
@@ -221,7 +99,7 @@ func _physics_process(delta):
         </article>
 
         <article class="step">
-            <img src="{{ url_for('static', filename='images/posts/game_mechanics.png') }}" alt="Game Mechanics">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/game_mechanics.png') }}" alt="Game Mechanics">
             <div class="step-content">
                 <h3>Step 6: Implement Gameplay Mechanics</h3>
                 <p>
@@ -231,7 +109,7 @@ func _physics_process(delta):
         </article>
 
         <article class="step">
-            <img src="{{ url_for('static', filename='images/posts/polish_game.png') }}" alt="Polishing the Game">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/godot_testing.png') }}" alt="Polishing the Game">
             <div class="step-content">
                 <h3>Step 7: Test and Polish</h3>
                 <p>
@@ -242,7 +120,7 @@ func _physics_process(delta):
         </article>
 
         <article class="step">
-            <img src="{{ url_for('static', filename='images/posts/export_game.png') }}" alt="Exporting the Game">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/export_game.png') }}" alt="Exporting the Game">
             <div class="step-content">
                 <h3>Step 8: Export and Share</h3>
                 <p>

templates/uni/subjects/halozatok/templates/halozatok_quiz.html

@@ -5,112 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hálózatok Quiz</title>
     <link rel="shortcut icon" href="{{ url_for('static', filename='images/home/logo.jpg') }}" type="image/x-icon">
-    <style>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/quizes.css') }}">
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(to right, #5a0fb8, #1f65d6);
-            color: #fff;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            overflow-x: hidden;
-        }
-
-        .container {
-            background: rgba(255, 255, 255, 0.2);
-            padding: 20px;
-            border-radius: 12px;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-            flex: 1 1 calc(33.333% - 20px);
-            max-width: calc(33.333% - 20px);
-            transform: scale(1);
-            transition: transform 0.3s ease-in-out;
-        }
-
-        h1 {
-            text-align: center;
-            font-size: 2.2em;
-            margin-bottom: 20px;
-        }
-
-        .question {
-            margin-bottom: 20px;
-            font-size: 1.3em;
-            font-weight: 600;
-        }
-
-        .answer-options {
-            margin-top: 15px;
-        }
-
-        .answer-options label {
-            display: block;
-            position: relative;
-            background: linear-gradient(to right, #5a0fb8, #1f65d6);
-            padding: 10px 15px;
-            margin-bottom: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .answer-options label:hover {
-            background: linear-gradient(to right, #1f65d6, #5a0fb8);
-            color: white;
-            transform: translateX(5px);
-        }
-
-        .answer-options input {
-            display: none;
-        }
-
-        .answer-options input:checked + label {
-            background: linear-gradient(to right, #5a0fb8, #2ecc71);
-            color: white;
-            border: 2px solid #27ae60;
-        }
-
-        .submit-button, .quit-button {
-            display: block;
-            width: 100%;
-            padding: 12px;
-            color: white;
-            border: none;
-            border-radius: 8px;
-            font-size: 1.2em;
-            cursor: pointer;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            transition: background-color 0.3s ease, transform 0.2s ease;
-            margin-top: 15px;
-            text-align: center;
-        }
-
-        .submit-button {
-            background: linear-gradient(to right, #80e27e, #66c466);
-        }
-
-        .quit-button {
-            background: linear-gradient(to right, #ff8a80, #ff5252); 
-        }
-
-        .submit-button:hover, .quit-button:hover {
-            transform: scale(1.05);
-        }
-
-        .submit-button:active, .quit-button:active {
-            transform: scale(0.98);
-        }
-
-        .submit-button:hover, .quit-button:hover {
-            transform: scale(1.05);
-        }
-
-        .submit-button:active, .quit-button:active {
-            transform: scale(0.98);
-        }
-    </style>
 </head>
 <body>
     <div class="container">

templates/uni/subjects/portalfejlesztes_net_ben/templates/quiz.html

@@ -5,113 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Portalfejlesztes .Net ben Quiz</title>
     <link rel="shortcut icon" href="{{ url_for('static', filename='images/home/logo.jpg') }}" type="image/x-icon">
-    <style>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/quizes.css') }}">
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(to right, #5a0fb8, #1f65d6);
-            color: #fff;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            overflow-x: hidden;
-        }
-
-        .container {
-            background: rgba(255, 255, 255, 0.2);
-            padding: 20px;
-            border-radius: 12px;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-            flex: 1 1 calc(33.333% - 20px);
-            max-width: calc(33.333% - 20px);
-            transform: scale(1);
-            transition: transform 0.3s ease-in-out;
-        }
-
-        h1 {
-            text-align: center;
-            font-size: 2.2em;
-            margin-bottom: 20px;
-        }
-
-        .question {
-            margin-bottom: 20px;
-            font-size: 1.3em;
-            font-weight: 600;
-        }
-
-        .answer-options {
-            margin-top: 15px;
-        }
-
-        .answer-options label {
-            display: block;
-            position: relative;
-            background: linear-gradient(to right, #5a0fb8, #1f65d6);
-            padding: 10px 15px;
-            margin-bottom: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .answer-options label:hover {
-            background: linear-gradient(to right, #1f65d6, #5a0fb8);
-            color: white;
-            transform: translateX(5px);
-        }
-
-        .answer-options input {
-            display: none;
-        }
-
-        .answer-options input:checked + label {
-            background: linear-gradient(to right, #5a0fb8, #2ecc71);
-            color: white;
-            border: 2px solid #27ae60;
-        }
-
-        .submit-button, .quit-button {
-            display: block;
-            width: 100%;
-            padding: 12px;
-            color: white;
-            border: none;
-            border-radius: 8px;
-            font-size: 1.2em;
-            cursor: pointer;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            transition: background-color 0.3s ease, transform 0.2s ease;
-            margin-top: 15px;
-            text-align: center;
-        }
-
-        .submit-button {
-            background: linear-gradient(to right, #80e27e, #66c466);
-        }
-
-        .quit-button {
-            background: linear-gradient(to right, #ff8a80, #ff5252); 
-        }
-
-        .submit-button:hover, .quit-button:hover {
-            transform: scale(1.05);
-        }
-
-        .submit-button:active, .quit-button:active {
-            transform: scale(0.98);
-        }
-
-        .submit-button:hover, .quit-button:hover {
-            transform: scale(1.05);
-        }
-
-        .submit-button:active, .quit-button:active {
-            transform: scale(0.98);
-        }
-
-    </style>
 </head>
 <body>
     <div class="container">

templates/uni/subjects/szamitogepek_mukodese/templates/szgm_quiz.html

@@ -5,112 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hálózatok Quiz</title>
     <link rel="shortcut icon" href="{{ url_for('static', filename='images/home/logo.jpg') }}" type="image/x-icon">
-    <style>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/quizes.css') }}">
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(to right, #5a0fb8, #1f65d6);
-            color: #fff;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            overflow-x: hidden;
-        }
-
-        .container {
-            background: rgba(255, 255, 255, 0.2);
-            padding: 20px;
-            border-radius: 12px;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-            flex: 1 1 calc(33.333% - 20px);
-            max-width: calc(33.333% - 20px);
-            transform: scale(1);
-            transition: transform 0.3s ease-in-out;
-        }
-
-        h1 {
-            text-align: center;
-            font-size: 2.2em;
-            margin-bottom: 20px;
-        }
-
-        .question {
-            margin-bottom: 20px;
-            font-size: 1.3em;
-            font-weight: 600;
-        }
-
-        .answer-options {
-            margin-top: 15px;
-        }
-
-        .answer-options label {
-            display: block;
-            position: relative;
-            background: linear-gradient(to right, #5a0fb8, #1f65d6);
-            padding: 10px 15px;
-            margin-bottom: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .answer-options label:hover {
-            background: linear-gradient(to right, #1f65d6, #5a0fb8);
-            color: white;
-            transform: translateX(5px);
-        }
-
-        .answer-options input {
-            display: none;
-        }
-
-        .answer-options input:checked + label {
-            background: linear-gradient(to right, #5a0fb8, #2ecc71);
-            color: white;
-            border: 2px solid #27ae60;
-        }
-
-        .submit-button, .quit-button {
-            display: block;
-            width: 100%;
-            padding: 12px;
-            color: white;
-            border: none;
-            border-radius: 8px;
-            font-size: 1.2em;
-            cursor: pointer;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            transition: background-color 0.3s ease, transform 0.2s ease;
-            margin-top: 15px;
-            text-align: center;
-        }
-
-        .submit-button {
-            background: linear-gradient(to right, #80e27e, #66c466);
-        }
-
-        .quit-button {
-            background: linear-gradient(to right, #ff8a80, #ff5252); 
-        }
-
-        .submit-button:hover, .quit-button:hover {
-            transform: scale(1.05);
-        }
-
-        .submit-button:active, .quit-button:active {
-            transform: scale(0.98);
-        }
-
-        .submit-button:hover, .quit-button:hover {
-            transform: scale(1.05);
-        }
-
-        .submit-button:active, .quit-button:active {
-            transform: scale(0.98);
-        }
-    </style>
 </head>
 <body>
     <div class="container">

templates/uni/subjects/vallalati_informacios_rendszerek/templates/vir_quiz.html

@@ -5,112 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hálózatok Quiz</title>
     <link rel="shortcut icon" href="{{ url_for('static', filename='images/home/logo.jpg') }}" type="image/x-icon">
-    <style>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/quizes.css') }}">
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(to right, #5a0fb8, #1f65d6);
-            color: #fff;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            overflow-x: hidden;
-        }
-
-        .container {
-            background: rgba(255, 255, 255, 0.2);
-            padding: 20px;
-            border-radius: 12px;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-            flex: 1 1 calc(33.333% - 20px);
-            max-width: calc(33.333% - 20px);
-            transform: scale(1);
-            transition: transform 0.3s ease-in-out;
-        }
-
-        h1 {
-            text-align: center;
-            font-size: 2.2em;
-            margin-bottom: 20px;
-        }
-
-        .question {
-            margin-bottom: 20px;
-            font-size: 1.3em;
-            font-weight: 600;
-        }
-
-        .answer-options {
-            margin-top: 15px;
-        }
-
-        .answer-options label {
-            display: block;
-            position: relative;
-            background: linear-gradient(to right, #5a0fb8, #1f65d6);
-            padding: 10px 15px;
-            margin-bottom: 10px;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .answer-options label:hover {
-            background: linear-gradient(to right, #1f65d6, #5a0fb8);
-            color: white;
-            transform: translateX(5px);
-        }
-
-        .answer-options input {
-            display: none;
-        }
-
-        .answer-options input:checked + label {
-            background: linear-gradient(to right, #5a0fb8, #2ecc71);
-            color: white;
-            border: 2px solid #27ae60;
-        }
-
-        .submit-button, .quit-button {
-            display: block;
-            width: 100%;
-            padding: 12px;
-            color: white;
-            border: none;
-            border-radius: 8px;
-            font-size: 1.2em;
-            cursor: pointer;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            transition: background-color 0.3s ease, transform 0.2s ease;
-            margin-top: 15px;
-            text-align: center;
-        }
-
-        .submit-button {
-            background: linear-gradient(to right, #80e27e, #66c466);
-        }
-
-        .quit-button {
-            background: linear-gradient(to right, #ff8a80, #ff5252); 
-        }
-
-        .submit-button:hover, .quit-button:hover {
-            transform: scale(1.05);
-        }
-
-        .submit-button:active, .quit-button:active {
-            transform: scale(0.98);
-        }
-
-        .submit-button:hover, .quit-button:hover {
-            transform: scale(1.05);
-        }
-
-        .submit-button:active, .quit-button:active {
-            transform: scale(0.98);
-        }
-    </style>
 </head>
 <body>
     <div class="container">

templates/uni/uni.html

@@ -32,6 +32,7 @@
         background: linear-gradient(to right, #1f65d6, #5a0fb8);
         transform: scale(1.05);
     }
+
 </style>
 <main class="main">
     <div class="card-container">