/*
CSS for 2Mbyte.com, not copywrite; feel free to steal!
Styling guide:
    0.3em blur
    0.5 transparency
    mint coloring where possible
    it should not be painful to look at
    Trebuchet MS is the main font cuz i kinda like it
*/
.sidenav { /* sidebar styling */
    height: 100vh;
    width: 10em;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(15, 15, 15, 0.5);
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 1.375em;
    padding-left: 1.375em;
    padding-inline-end: 1.375em;
    text-align: center;
    color: white;
    font-size: 1.25em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    border: 0.75em solid rgba(163, 253, 187, 0.063);
    border-radius: 0.75em;
    backdrop-filter: contrast(110%) blur(0.3em);
}
.links h4 { /* for stars */
    margin: 0;
    text-align: left;
    font-size: 1.125em !important;
}
.links h2 { /* for link group titles */
    text-align: left;
    font-weight: 900;
    border-radius: 0.5em;
    background: rgba(39, 159, 105, 0.2);
    background: linear-gradient(to right, rgba(255, 255, 0, 0.3), rgba(0, 255, 166, 0.2), rgba(0, 255, 255, 0.1), rgba(0, 0, 0, 0));
    text-shadow: 0.4375em 0.4375em 0.625em rgba(0, 0, 0, 0.8);
}
a:link { /* make listed links mint colored */
    color: rgb(194, 255, 210);
    text-decoration: none !important;
}
a:visited { /* keep same color even if visited */
    color: rgb(194, 255, 210);
}
a:hover { /* darken the mint color on hover */
    color: rgb(163, 253, 187);
    text-decoration: underline;
}
.links a { /* make links more compact and uniform */
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 1em !important;
    font-weight: lighter;
}
.links p { /* ensure spacers don't mess up the grid */
    margin: 0;
    padding: 0;
}
.links {
    grid-template-columns: 1fr auto;
    margin-bottom: 6.25em;
}
.starred { /* add yellow bg to starred links */
    /*background-color: rgba(255, 179, 0, 0.08);*/
    background: rgb(255, 179, 0, 0.2);
    background: linear-gradient(to left, rgba(255, 179, 0, 0.2), rgba(0, 0, 0, 0));
    border-radius: 0.75em;
    font-weight: bold !important;
}
.disclaimer { /* disclaimer in bottom right */
    position: absolute;
    bottom: 0;
    left: 1;
    right: 0;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    z-index: 0;
    text-shadow: 0.4375em 0.4375em 0.625em rgba(0, 0, 0, 0.8);
}
.copywrite { /* copywrite in top right */
    position: absolute;
    top: 0;
    bottom: 1;
    left: 1;
    right: 0;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    z-index: 0;
    text-shadow: 0.4375em 0.4375em 0.625em rgba(0, 0, 0, 0.8);
}
#mintGradient { /* gradient for branding */
    background: rgb(0, 255, 166);
    background: linear-gradient(to right, yellow, rgb(0, 255, 166), cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hideNavbar {
    padding: 1.125em 1.25em;
    font-size: 1.125em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    border: 0.3125em solid rgb(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    color: rgb(255, 255, 255);
    width: 1.875em;
    font-weight: 900;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
}
.hideNavbarDiv {
    top: 0;
    left: 0;
}
body { /* add starry bg (and bg color incase bg image doesnt load) */
    background-color: rgb(10, 10, 10, 0.5);
    background-image: url(./bg.gif);
    background-repeat: repeat;
    background-size: 10%;
}
h1 { /* h1 styling */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    text-align: center;
    font-size: 2em;
}
h2 { /* h2 styling */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    text-align: center;
    font-size: 1em;
}
h3 { /* you get the idea */
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    text-align: center;
    font-size: 0.7em;
}
h4 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    text-align: center;
    font-size: 0.4em;
}
h5 { /* we done with the 'h's */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    text-align: center;
    font-size: 0.2em;
}
a { /* links */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    text-align: center;
    font-size: 1em;
}
.searchDiv { /* searchDiv alignment */
    text-align: center;
    top: 0;
}
.searchDiv2 { /* align the other one too */
    text-align: center;
    top: 0;
}
.searchBoxDDG { /* DuckDuckGo searchBox styling, orange themed */
    padding: 1.125em 1.25em;
    font-size: 1.125em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    border: 0.3125em solid rgb(65, 38, 0, 0.5);
    background-color: rgba(80, 38, 0, 0.5);
    color: rgb(255, 255, 255);
    width: 21.875em;
    backdrop-filter: contrast(110%) blur(0.3em);
    border-radius: 0.75em;
    font-weight: 900;
}
.searchBoxStartpage { /* Startpage searchBox styling, blue themed */
    padding: 1.125em 1.25em;
    font-size: 1.125em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    border: 0.3125em solid rgb(0, 41, 65, 0.5);
    background-color: rgba(0, 41, 80, 0.5);
    color: rgb(255, 255, 255);
    width: 21.875em;
    backdrop-filter: contrast(110%) blur(0.3em);
    border-radius: 0.75em;
    font-weight: 900;
}