/* style tooltips */
.tooltip {
        background: #2d2d2e; /* use different stylizing because this isn't wintr's site */
        color: #fcfcff; /* use different stylizing because this isn't wintr's site */
        /* rest is specified as per wintr's documentation and should NOT be changed */
        position: fixed;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 14px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s ease;
        z-index: 10;
}

/* this makes the magic happen: true center aligned magic! */
.center {
    overflow: auto; /* make content scrollable */
    position: fixed; /* this is required by the below */
    /* next three lines makes the content center */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* a bunch of rules and edge cases that go along with the site */
#history.center  { height: 100%; } /* make a few problematic pages scrollable by manually setting height */
#history.center { width: 100%; } /* make a few problematic pages scrollable by manually setting height */
#history.center img { width: 100%; } /* fix images being too big for the div */
#home, #about, #realabout, #button, #history { display: none; } /* don't display home on ANY other page */
#home:target, #button:target, #about:target, #realabout:target, #history:target { display: block; } /* show the content only when open */
.tooltip.visible { opacity: 1; } /* make tooltips appear only when hovered, i think */

/* color links */
a:link { color: hotpink; }
a:visited { color: green; }
a:hover { color: red; }
a:active { color: blue; } 

/* font & site theme */
body {
    font-family: 'Roboto'; /* set the font */
    font-size: 21px; /* font size for the ENTIRE website. */
    color: #FFFFFF; /* make text white */
    background-color: #0F0F0F; /* make background black, but not pitch black. */
}