.id_selector {
color: #29A006;
}
.class_selector {
color: #06A07D;
}
.property {
color: #2C81CD;
margin-left: 50px;
}
#flex-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#styled-css {
display:inline-block;
float:right;
font-family: courier;
color: white;
background: #0E3702;
width: 600px;
height: 600px;
overflow: hidden;
}
@keyframes dash {
0%{
stroke-dasharray: 200;
stroke-dashoffset: 200;
fill:white;
}
40%{
stroke-dasharray: 80;
stroke-dashoffset: 200;
stroke-width: 1;
fill:white;
}
65%{
stroke-dasharray: .001;
stroke-dashoffset: 0;
stroke-width: 2;
}
100%{
fill: black;
}
}
.title__name {
stroke: black;
font-family: 'times-new-roman', sans-serif;
stroke-dasharray: 200;
stroke-dashoffset: 800;
stroke-width: 0;
animation: dash 7s linear forwards;
}
/* Sorry for locking the scroll for this container
/* I used some JS to make the style container auto scroll to bottom to always show the most recent styles
/* But that makes scrolling with the mouse weird so I just disabled it till the styles were all typed out
#styled-css {
overflow: scroll;
}
/* You can now scroll through the styles if you'd like :D