accessibility-comms/site/css/main.css

add accessibility to your website

.wrapper {
    max-width: 1280px;
}

.center-me {
    margin: auto;
    display: block;
}

.material-icons, .icon.material-icons {
    font-family: 'Material Icons';
}

h1.ui.header {
    padding-top: 20px; 
}

h3.ui.header {
    text-transform: uppercase;
}

.ui.list .list>.item .description, .ui.list>.item .description {
    text-transform: capitalize;
}

.ui.ordered.list .list>.item, .ui.ordered.list>.item, ol.ui.list li {
    overflow: auto;
}

.b-space-1 {
    text-indent: 25px;
}

.b-space-2 {
    text-indent: 50px;
}

.b-space-3 {
    text-indent: 75px;
}

.b-space-4 {
    text-indent: 100px;
}

.i-color {
    background-color: rgb(64, 84, 178);
    color: #fff;
}

.i-circular {
    border-radius: 50%;
}

.spin {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    border:dashed 5px red;
    animation-name: spin;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

table thead{
    font-weight: bold;
    color: rgba(0,0,0,.6);
    border-bottom: 1px solid rgba(0,0,0,.1)
}
table thead td{
    padding: 2px 7px;
}
table{
    width: 330px;
}
table td:last-child{
    text-align: center;
}
table tbody td{
    padding: 10px 20px;
}
table tbody tr:not(:last-child){
    border-bottom: 1px solid rgba(0,0,0,.4)
}

code, code * {
    background-color: rgba(200,200,200,0.2);
}

.svg-wrap {
    position: relative;
}