body {
    font-family: "roboto mono";
    letter-spacing: -0.075rem;
}

.\? {
    border: 1px solid red;
}

article p {
    margin-bottom: 1.25rem ;
    letter-spacing: 0;
}
article hr {
    border-top-color: #666;
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
article a {
    text-decoration: underline;
}

article h4 {
    font-size: 1.25rem;
    font-weight: bold;
}
article h2 {
    font-size: 1.75rem;
    font-weight: bold;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.teeth:after {
    content: "";
    position: absolute;
    display: block;

    height: 50px;
    bottom: -25px;
    /* -height */

    left: 0;
    right: 0;

    background:
        linear-gradient(135deg,
            #000 33.333%,
            transparent 33.333%,
            transparent 66.667%,
            #000 66.667%),
        linear-gradient(45deg,
            #000 33.333%,
            transparent 33.333%,
            transparent 66.667%,
            #000 66.667%);

    background-repeat: repeat-x;
    background-size: 50px 100px;
    /* doubleWidth toothSize  */
    background-position: 0px -50px;
    /* horizontalOffset -height */
}

.whiteteeth:before {
    content: "";
    position: absolute;
    display: block;

    height: 50px;
    top: -25px;
    /* -height */

    left: 0;
    right: 0;

    background:
        linear-gradient(135deg,
            #fff 33.333%,
            transparent 33.333%,
            transparent 66.667%,
            #fff 66.667%),
        linear-gradient(45deg,
            #fff 33.333%,
            transparent 33.333%,
            transparent 66.667%,
            #fff 66.667%);

    background-repeat: repeat-x;
    background-size: 50px 100px;
    /* doubleWidth toothSize  */
    background-position: 0px -50px;
    /* horizontalOffset -height */
}

.whiteteethline:after {
    content: "";
    position: absolute;
    display: block;
    height: 50px;
    top: -23px;
    /* -height */

    left: 0;
    right: 0;

    background:
        linear-gradient(135deg,
            #000 33.333%,
            transparent 33.333%,
            transparent 66.667%,
            #000 66.667%),
        linear-gradient(45deg,
            #000 33.333%,
            transparent 33.333%,
            transparent 66.667%,
            #000 66.667%);

    background-repeat: repeat-x;
    background-size: 50px 100px;
    /* doubleWidth toothSize  */
    background-position: 0px -50px;
    /* horizontalOffset -height */
}

.scanlines {
    background-color: black;
    opacity: 0.4;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAECAYAAABGM/VAAAAAGUlEQVQYV2NkYGD4z4AGGHEJoitkAKnEAACLmwID82i1VgAAAABJRU5ErkJggg==) repeat;
}

.purple {
    background-color: #6666ff;
}

.nunito {
    font-family: 'Nunito';
    letter-spacing: 0rem;
}

.hero {
    font-size: 5rem;
    font-family: 'Nunito';
    font-weight: 600;
    filter: drop-shadow(5px 2px 2px #6666ff) drop-shadow(-3px 1px 2px #ff6666);
}

.logo {
    width: 234px;
    height: 108px;
    transform: scale(0.8);

}

.glow {
    filter: drop-shadow(5px 2px 2px #6666ff) drop-shadow(-3px 1px 2px #ff6666);
}

.dropshadow {
    filter: drop-shadow(2px 2px 1px #000) drop-shadow(0px 0px 1px #666);
}

video {
    transform: scale(1.2);
}

.graylogo {
    filter: grayscale(100%) brightness(60%) contrast(10000000%) invert(1);
    opacity: .8;
}