diff --git a/visualizacion.css b/visualizacion.css
new file mode 100644
index 0000000000000000000000000000000000000000..803d6404b99778990e8674668475951b89cf9a09
--- /dev/null
+++ b/visualizacion.css
@@ -0,0 +1,228 @@
+*{
+    margin: 0px;
+    padding: 0px;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: normal;
+    list-style: none;
+    user-select: none;
+}
+html{
+    height: 100vh;
+    font-size: 16px;
+}
+html,aside, #mode-selector, h2, #legend{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+body{
+    display: grid;
+    grid-template-columns: 1100px 400px;
+    grid-template-rows: 90% 10%;
+    width: 1500px;
+    height: 775px;
+}
+
+h1{
+    text-align: center;
+    font-size: 2em;
+    height: 8%;
+    box-sizing: border-box;
+    position: relative;
+    bottom: 30px;
+}
+svg{
+    border-radius: 0px;
+    position: relative;
+    left: 60px;
+    height: 620px;
+    width: 1000px;
+}
+aside{
+    flex-direction: column;
+}
+#option-panel{
+    justify-content: flex-start;
+    padding-top: 10%;
+}
+section{
+    border: black solid 1px;
+    border-radius: 4px;
+    width: 80%;
+    height: 60%;
+}
+#legend{
+    flex-direction: column;
+    box-sizing: border-box;
+    padding-left: 35px;
+}
+.legend-item{
+    align-self: flex-start;
+    display: flex;
+    align-content: stretch;
+    padding: 10px 0px;
+}
+.item-square{
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+    border: black solid 1px
+}
+.item-text{
+    display: inline-flex;
+    align-content: center;
+    font-size: 20px;
+    margin-left: 20px;
+    cursor: pointer;
+}
+#mode-selector{
+    height: 20%;
+    margin-top: 5%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding-left: 40px;
+    box-sizing: border-box
+}
+article :first-child{
+    margin-bottom: 10px;
+}
+label{
+    position: relative;
+    font-size: 20px;
+}
+label,[type="radio"],#slider{
+    cursor: pointer;
+}
+#date-limiter{
+    flex-direction: row;
+}
+#slider{
+    border: black solid 1px;
+    height: 50%;
+    width: 920px;
+    margin-left: 85px;
+    overflow: visible;
+    background: #ABCBF1;
+    cursor: grab;
+    position: relative;
+}
+#arranger{
+    height: 130%;
+    position: absolute;
+    top: -20%;
+    left: 912px;
+    width: 2%;
+    background: #4C9CF8;
+    border-radius: 3px;
+    cursor: grab;
+    border: inherit;
+    z-index: 2;
+}
+#progress{
+    position: absolute;
+    background: #4C9CF8;
+    height: 100%;
+    width: 912px;
+}
+#current-date{
+    font-size: 20px;
+    font-weight: bold;
+    position: relative;
+    left: 30px;
+    width: 75px 
+}
+
+[type='radio']{
+    display: none;
+}
+
+label::before{
+
+    content: '';
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    background: #4C9CF8;
+    border-radius: 50%;
+    position: relative;
+    top: 5px;
+    margin-right: 20px;
+
+}
+label::after{
+
+    content: '';
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    position: absolute;
+    background: white;
+    transition: background-color 500ms;
+    border: white solid 3px;
+    top: 2px;
+    left: 2px;
+    box-sizing: border-box;
+
+}
+
+.marked::after{
+    
+    background: #4C9CF8;
+    transition: background-color 300ms;
+
+}
+sub{
+    font-size: inherit;
+}
+/* VISUALIZATION */
+
+.tick{
+    font-size: 1.6em;
+}
+.tick:first-of-type{
+    display: none;
+}
+.tick line{
+    stroke: transparent
+}
+svg{
+    position: relative;
+}
+#overlay-info{
+    position: absolute;
+    z-index: 20;
+    top: 0px;
+    left: 0px;
+    background: white;
+    height: max-content;
+    border: 1px solid black;
+    font-size: 14px;
+    display: none;
+}
+#overlay-info header{
+    margin: 0px;
+    height: 35px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom:  1px solid black;
+    background: #f8f8f8;
+}
+#overlay-info h3{
+    text-align: center;
+    width: max-content;
+    height: max-content;
+    font-weight: bolder;
+}
+#year-data{
+    font-weight: inherit;
+}
+#info{
+    padding: 10px;
+}
+#info p{
+    padding: 3px;
+}
+