trippy_index_style.css

/**
 * Fancy border
 * ============
*/

body {
    margin: 0;
    padding: 0;
    background: #0B1319;
    font-family: 'Courier New', Courier, monospace;
}

#content {
    text-align: center;
    /* text-decoration:underline; */
    color: aliceblue;
    border: 25px solid #B88846;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75'%3E%3Cg fill='none' stroke='%23B88846' stroke-width='2'%3E%3Cpath d='M1 1h73v73H1z'/%3E%3Cpath d='M8 8h59v59H8z'/%3E%3Cpath d='M8 8h16v16H8zM51 8h16v16H51zM51 51h16v16H51zM8 51h16v16H8z'/%3E%3C/g%3E%3Cg fill='%23B88846'%3E%3Ccircle cx='16' cy='16' r='2'/%3E%3Ccircle cx='59' cy='16' r='2'/%3E%3Ccircle cx='59' cy='59' r='2'/%3E%3Ccircle cx='16' cy='59' r='2'/%3E%3C/g%3E%3C/svg%3E") 25;
    box-sizing: border-box;
    width: 100vw;
    min-height: 100vh;
    padding: 25px;
    box-sizing: border-box;
    z-index: 9999;
}

#center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

h1, h2, h3 {
    font-size: 2em;
    text-decoration: underline;
    color: #00ff00;
    animation: colorChange 5s infinite;
}

@keyframes colorChange {
    0% { color: #f0f; }
    50% { color: #0ff; }
    100% { color: #f0f; }
}

p, a {
    font-size: 1.5em;
    text-align: justify;
    color: #00ff00;
    animation: textColorChange 2s infinite;
}

p:hover, a:hover {
    background-color: rgba(22, 22, 87, 0.5);
    text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
}

@keyframes textColorChange {
    0% { color: #00ff00; }
    50% { color: #ffff00; }
    100% { color: #00ff00; }
}

h1:hover {
    text-shadow: 2px 0.5px 2px #800000;
    /* animation: titleHoverColorChange 1s infinite; */
}

@keyframes titleHoverColorChange {
    0% { color: #921818; }
    50% { color: #ff0000; }
    100% { color: #921818; }
}

a {
    text-decoration: none;
    color: #00ff00;
    animation: linkColorChange 1s infinite;
}

@keyframes linkColorChange {
    0% { color: #00ff00; }
    50% { color: #ffff00; }
    100% { color: #00ff00; }
}


/* BREAK */