no carga el css

css/estilo.css

@@ -0,0 +1,306 @@
+:root {
+    --violeta: #372963;
+    --celeste: #36BCF7;
+    --mostaza: #FFA500;
+    --violotro: #25195c;
+}
+
+body {
+    background-color: var(--violeta);
+    margin: 0;
+    padding: 0;
+}
+
+/* Estilos para el encabezado */
+.header-text {
+    font-family: 'Pixelify Sans', sans-serif;
+    font-size: 9vw;
+    color: var(--celeste);
+    }
+
+    @keyframes typeWriter {
+        from {
+            width: 0;
+        }
+        to {
+            width: 100%;
+        }
+
+    }
+    .typewriter-text {
+        overflow: hidden;
+        border-right: 2px solid #000; /* Línea vertical como si se estuviera escribiendo */
+        white-space: nowrap;
+        animation: typeWriter 4s steps(20) infinite;
+    }
+.partidoendos{
+    display: flex;
+
+    width: 88%;
+}
+
+.inicioderecha{
+
+    width: 60%;
+    flex: 1;
+}
+
+.inicioizquierda{
+
+    width: 30%;
+    flex: 1;
+}
+.resaltado {
+    color: var(--mostaza);
+}
+
+h2 {
+    font-family: 'Pixelify Sans', sans-serif;
+    font-size: 3.5vw;
+    color: var(--mostaza);
+}
+
+/* Estilos para la barra lateral (en pantallas grandes) */
+.barra_lateral {
+    font-family: 'Pixelify Sans', sans-serif;
+    font-size: 2vw;
+    width: 18vw;
+    text-align: center;
+    background-color: var(--violotro);
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    height: 100%;
+
+}
+
+.barra_lateral img {
+    max-width: 70%;
+    display: block;
+    margin: 0 auto;
+    margin-top: 1vw; 
+}
+.barra_lateral a {
+    text-decoration: none;
+    color: var(--celeste);
+    transition: color 0.3s;
+}
+
+.barra_lateral a:hover {
+    color: var(--mostaza);
+}
+
+.barra_lateral ul {
+    list-style: none;
+    padding: 0;
+}
+
+.barra_lateral li {
+    padding: 1vw;
+}
+
+/* Estilos para el menú superior en pantallas pequeñas */
+.menu-superior {
+    display: none; 
+
+}
+
+.menu-imagen {
+    max-width: 20%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    padding: 5vw;
+}
+
+.menu-opciones ul {
+    list-style: none;
+    padding: 0;
+}
+
+.menu-opciones li {
+
+    padding: 1vw;
+}
+
+
+
+/* Estilos para el contenido principal */
+.content {
+    margin-left: 18vw; 
+    padding: 20px;
+    }
+
+/* Estilos para las secciones */
+section {
+    font-family: 'Pixelify Sans', sans-serif;
+    font-size: 2vw;
+    border-bottom: 2px solid var(--violotro);
+    padding-bottom: 2%;
+    padding: 2vw;
+    color: var(--celeste);
+}
+.textomovil img{
+    height: 20%;
+    width: 100%;
+
+}
+#educacion a {
+    color: var(--mostaza);
+    text-decoration: none; 
+    transition: color 0.3s;
+}
+
+#educacion a:hover {
+    color: var(--violotro);
+}
+/* Estilos para el formulario de contacto */
+#formulario {
+    margin-top: 6vh;
+    background-color: #f5f5f5;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+#formulario label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+#formulario input[type="text"],
+#formulario input[type="email"],
+#formulario textarea {
+    width: 98%;
+    padding: 8px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    resize: vertical;
+}
+
+#formulario button,#cambiar-estilo {
+    background-color: var(--violeta);
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    font-family: 'Pixelify Sans', sans-serif;
+    font-size: 2vw;
+}
+
+#formulario button:hover,#cambiar-estilo:hover {
+    background-color:var(--mostaza);
+}
+
+/* Estilos para el pie de página */
+.footer {
+    background-color: #373d48;
+    color: #ffffff;
+    text-align: center;
+    position: relative;
+    width: 100%;
+}
+
+/* Estilos para el texto en el pie de página */
+.footer__centro {
+    font-size: 2.5vh;
+}
+.modal {
+    display: none; 
+    position: fixed;
+    z-index: 1;
+    padding-top: 100px;
+    left: 18vw;
+    top: 0;
+    width: 100;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.9);
+  }
+
+
+
+  /* Estilos para el botón "Cerrar" en la esquina del modal */
+  .close {
+    color: #fff;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+    margin-right: 20px;
+  }
+
+  .close:hover {
+    color: #ccc;
+  }
+  .icono-grande {
+    font-size: 8vw; 
+    color: var(--mostaza)
+}
+
+/* Media Query para pantallas pequeñas */
+@media (max-width: 720px) {
+    section{
+        font-size: 4vw;
+    }
+    .barra_lateral {
+        display: none;
+    }
+
+    .menu-superior { /*menu  opciones y menu imagen*/
+    width: 100%;
+    font-family: 'Pixelify Sans', sans-serif;
+    font-size: 4vw;
+    background-color: var(--violotro);
+    display: flex;
+    align-items: flex-start;
+
+    }
+    .menu-opciones{
+        margin-top: 3vw;
+        width:50%;
+    }
+    .menu-opciones ul li::before {
+        content: "\25A0"; /* Código del carácter del cuadradito */
+        padding-right: 10px; /* Espacio entre el cuadradito y el texto */
+        color: var(--mostaza);
+    }
+
+.menu-opciones a{
+
+    text-decoration: none;
+    color: var(--celeste);
+}
+
+    .menu-imagen  {
+        max-width: 40%; 
+
+    }
+    .menu-imagen  img{
+        max-width: 70%; 
+
+    }
+    .content {
+        margin-left: 0; 
+    }
+    .modal {
+
+        display: none; 
+        position: fixed;
+
+        left: 0vw;
+        top: 0;
+        width: 100;
+        height: 100%;
+        background-color: var(--celeste);
+      }
+      .modal img {
+        height: 600vw;
+      }
+
+}

index.html

@@ -13,6 +13,7 @@
 
     <!-- CSS -->
     <link rel="stylesheet" href="css/index.css">
+    <link rel="stylesheet" href="css/estilo.css">
 
     <!-- Iconos -->
     <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>