@import url("all.min.css");

:root {
    --color-primary: #e600e6;
    --color-bg: #201020f3;
    /* Checkerboard background */
    --chess-size: 80px;
    --chess-color1: black;
    --chess-color2: var(--color-primary);
    font-size: 18pt;
}

body {
    height: 80vh;
    width: max(250px, 60vw);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    color: antiquewhite;

    background-color: var(--color-bg);

    /* border */
    border-color: antiquewhite;
    border-radius: 5vmin !important;
    border-style: dashed;
    border-width: 0.5vmin;
    padding: 5%;
}



.text-decoration-underline {
    text-decoration-color: var(--color-primary) !important;
}


/* Chessboard background */
:root {
    background: repeating-conic-gradient(
        var(--chess-color1) 0deg 25%,
        var(--chess-color2) 25% 50%,
        var(--chess-color1) 50% 75%,
        var(--chess-color2) 75% 100%);
    background-size: var(--chess-size) var(--chess-size);
    animation: scroll 4s linear infinite;
}

@keyframes scroll {
    from { background-position: 0 0;}
    to { background-position: calc(-4*var(--chess-size)) calc(-3*var(--chess-size)); }
  }