Tutorial

assets/css/stylesheet.css

@@ -265,18 +265,21 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 /* ================================================================================================================================== */
-/* CSS da pagina Aulas localizada em _content/Pages/index.html  */
+/* CSS da pagina Aulas localizada em _content/Pages/aulas.html  */
 
 .aulas-content{
  width: 100%;
 
  padding: 15px;
 }
+
 .aulas-content .title-content{
     width: 100%;
     display: flex;
     flex-direction: row;
     padding: 15px;
+    /* background-color: #007bff; */
+    text-align: center;
 } 
 
 .aulas-content .title-content > :nth-child(1){
@@ -327,7 +330,7 @@ h1, h2, h3, h4, h5, h6 {
     background-color: var(--background-color);
     box-shadow: -5px 5px 15px var(--primary-color);
 
-    margin: 25px 25px;
+    margin: 10px 15px;
 }
 
 /* ================================================================================================================================== */

assets/css/tutorial.css

@@ -0,0 +1,63 @@
+/* ================================================================================================================================== */
+/* Variables */
+:root {
+    /* Paleta de cors */
+    --midnight-blue: #0B1A33;
+    --cornflower-blue: #4B90F8;
+    --goldenrod: #D6A419;
+    --caribbean-green: #00C6BE;
+    --deep-ruby: #623A40;
+    --ivory: #F1F1E6;
+    --alice-blue: #F4F9FF;
+    --charcoal-blue: #35405D;
+    --slate-gray: #616B8B;
+    --light-slate-gray: #909ABB;
+    --periwinkle: #2d2e31;
+
+    /* Informaçoes da paleta de cores */
+    --primary-color: var(--midnight-blue);
+    --secondary-color: var(--cornflower-blue);
+    --tertiary-color: var(--periwinkle);
+    --gradient-backfround: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(75,144,248,1) 19%, rgba(97,157,246,1) 85%, rgba(241,241,230,0) 100%);
+    --accent-color: var(--goldenrod);
+    --background-color: var(--charcoal-blue);
+    --text-color: var( --alice-blue);
+    --secondary-text-color: var(--slate-gray);
+    --border-color: var(--deep-ruby);
+    --highlight-color: var(--caribbean-green);
+    --error-color: var(--slate-gray);
+    --success-color: var(--light-slate-gray);
+    --warning-color: var(--periwinkle);
+    --info-color: var(--ivory);
+
+    --font-family: 'Roboto', sans-serif;
+    --heading-color: var(--alice-blue);
+    --heading-margin: 0 0 20px;
+}
+
+
+/* assets/css/tutorial.css */
+#tutorial-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.8); /* Escurece a tela */
+    /* display: flex; */
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+#tutorial-box {
+    background: var(--deep-ruby);
+    padding: 20px;
+    border-radius: 8px;
+    max-width: 500px;
+    text-align: center;
+}
+
+.hidden {
+    display: none;
+}