styles.css

/* Colors
#d9dcd6 - white (gainsboro)
#181a1b - black (eerie black)
#a515b5 - purple (purple munsell)
#d2263d - red (crimson)
#0085b9 - blue (blue ncs)
#979797 - grey (spanish grey)
#e54980 - pink (french rose)
#f3adc6 - light pink (lavender pink)
#C41BAE - purple (steel pink)
#5e5e5e - medium grey (davy's gray)
*/

/* =========
   variables
   ========= */

/* using rgb values instead of hex codes allows me to use alpha transparency values with variables */

:root {
	--text: #d9dcd6; 				/* #d9dcd6 */
	--background: #181a1b; 			/* #181a1b */
	--header: 196, 27, 174; 		/* #c41bae */
	--border: #979797; 				/* #979797 */
	--accent: #0085b9; 				/* #0085b9 */
	--highlight: #e54980;			/* #e54980 */
	--button-border: 94, 94, 94;	/* #5e5e5e */
}

/* =============
   global styles
   ============= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}



/* ===============
   navigation bars
   =============== */

nav.nav-bar {
    background: var(--background);
    height: 60px;
    width: 100%;
}

nav.nav-bar ul {
    float: left;
    list-style: none;
    border-bottom: 1px solid var(--border);
    width: 100%;
}

nav.nav-bar ul li {
    display: inline-block;
    line-height: 60px;
    /*
    margin: 0 .35rem; */
}

nav.nav-bar ul li a {
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 550;
    border: 2px solid rgba(var(--button-border), 0.87);
    border-radius: 1rem;
    padding: 0rem .5rem;
    /*
	border: 2px solid #5e5e5edd;
    background-color: #5e5e5e60;
    border-radius: .7rem;
    padding: 0rem .5rem; */
}

nav.nav-bar ul li a:link {
    color: var(--accent);
}

nav.nav-bar ul li a:visited {
    color: var(--accent);
}

nav.nav-bar ul li a:hover, nav.nav-bar ul li a:active {
    color: var(--accent);
    background-color: rgba(var(--header), 0.45);
    /* background-color: #5a5a5a40; */
}

div.nav-menu {
    text-align: center;
}

.checkbtn {
    font-size: 2rem;
    color: var(--accent);
    line-height: 60px;
    cursor: pointer;
    display: none;
}

#check {
    display: none;
}

/* mobile nav menu (would like to disable scrolling when nav menu open, but i think its impossible without javascript) */
@media (max-width: 610px) {
    .checkbtn {
        display: block;
        border-bottom: 1px solid var(--border);
    }
    nav.nav-bar ul {
        position: absolute;
        width: 100%;
        background: var(--background);
        /* nav menu from top */
        height: calc(100% - 50px);
        bottom: 100%;
        /* nav menu from right
        top: 60px;
        height: 100vh;
        left: 100%; */
        text-align: center;
        transition: all .3s;
    }
    nav.nav-bar ul li {
        display: block;
        margin: 1.75rem 0;
        line-height: 3.75rem;
    }
    nav.nav-bar ul li a {
        font-size: 1.7rem;
    }
    #check:checked ~ ul {
        /* left: 0; nav menu from right */
        bottom: 0; /* nav menu from top */
    }
}



/* politics nav-bar */

nav.pol-nav {
    text-align: center;
    max-width: 60ch;
    margin: auto;
    border: 1px solid var(--border);
    border-radius: 1rem;
    margin-top: 1.5rem;
    margin-bottom: .5rem;
    padding-top: .25rem;
    padding-bottom: .5rem;
}

nav.pol-nav ul {
    list-style: none;
}

nav.pol-nav ul li {
    display: inline-block;
    margin: .1rem 0;
}

nav.pol-nav ul li a {
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 550;
    padding: .2rem .5rem;
    border: 2px solid rgba(var(--button-border), 0.73);
    /*
	border: 2px solid #5e5e5ebb;
    background-color: #5a5a5a45;
    background-color: #97979720; */
    border-radius: 2rem;
}

nav.pol-nav ul li a:hover, nav.pol-nav ul li a:active {
    color: var(--accent);
    background-color: rgba(var(--header), 0.35);
    /*
    background-color: #5a5a5a30; */
}

/* ======
   layout
   ====== */

body {
    background-color: var(--background);
    font-family: sans-serif;
}

/* width settings */

main {
    width: 65ch;
    max-width: 97%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10ch;
    /*
    width: 575px;
    max-width: 98%
    padding-bottom: 75px */
}

main.main-home {
    /* makes index main more narrow */
    padding: 0 12ch 8.5ch 12ch;
    /* 
    padding: 0 100px 75px 100px; */
}

@media (max-width: 530px) {
    /* fixes home main settings for mobile */
    main.main-home {
    padding: 0 0 8.5ch 0;
}
}

main.main-school {
    max-width: 40ch;
}

main.denpa-main {
    max-width: 40ch;
}

/* ===========
   typography
   =========== */

/* text highlight color */
::selection {
    background: var(--highlight);
    color: var(--text);
	/* #C41BAE */
}


h1 {
    color: rgb(var(--header));
    line-height: 4rem;
    padding: .25rem 0 -.25rem;
    text-align: center;
}

h2 {
    color: rgb(var(--header)); 
    line-height: 2rem;
    padding: .25rem 0;
}

h2.blog-title {
    color: rgb(var(--header));
    line-height: 2rem;
    padding: .25rem 0;
    text-align: center;
}

h3 {
    color: rgb(var(--header));
    line-height: 2rem;
    padding: .25rem 0;
}

/* h3 links appear normal */
a h3 {
    color: rgb(var(--header));
    text-decoration: none;
}

p {
    color: var(--text);
    line-height: 1.6rem;
    padding: .25rem 0;
}

p.not-found {
    text-align: center;
}

p.p-indent {
    text-indent: 2rem;
}

center {
    color: var(--text);
    line-height: 1.6rem;
    padding: .25rem 0;
}

.top-margin-hr {
    margin-top: .75rem;
}

/* webring-frag is unused as far as I can tell, should probably remove later */
.webring-frag {
    text-align: center;
}

.webring-frag p {
    border: 1px solid var(--border);
    border-radius: 1rem;
    display: inline;
    line-height: 2rem;
    font-size: 1rem;
    padding: .4rem .7rem;
}

/* fun to experiment with, but ultimately not what i want right now since it covers up the rest of screen. interesting tho! */
.denpa-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
}

ul {
    color: var(--text);
}

ul li {
    line-height: 1.5rem;
    padding: .25rem 0;
}

ul.bullet li {
    /* class for normal bullet point list */
    list-style: inside;
}

ul.no-bullet li {
    list-style: none;
}

strong {
    color: var(--accent);
    text-decoration-line: underline;
}

a:link {
    color: var(--accent);
}

a:visited {
    color: var(--accent);
}

a:hover, a:active {
    color: rgb(var(--header));
    /*
    color: #d9dcd6d5; */
}

details {
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 1rem;
}

summary {
    color: var(--text);
    line-height: 1.6rem;
    padding: .25rem 0;
}

details[open] {
    padding-left: 1rem;
    padding-right: 1rem;
}

details[open] summary{
    border-bottom: 1px solid var(--border);
}

details li {
    color: var(--text);
    line-height: 1.6rem;
    padding: .25rem 0;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* for when i want to embed a tweet in a blog post without actually embedding */
div.blog-twitter {
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 1rem;
}

div.blog-quote {
    border-left: 6px solid rgb(var(--header));
    padding-left: 2rem;
    margin-left: .75rem;
    
}

/* divider section for top of blog articles */

div.blog-header {
    display: block;
    align-items: center;
    align-content: center;
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    max-width: 20rem;
}

/* font formatting for dates within blog heading divider */

div.blog-header p.blog-dates {
    color: var(--accent);
    font-weight: bold;
    text-align: center;
}

div.blog-footnotes {
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

div.denparing {
    text-align: center;
}


/* ==========
   components
   ========== */

hr {
    margin-bottom: .65rem;
    height: 1px;
    border: none;
    background-color: var(--border);
}

/* makes it possible to add pseudo hr */
.h-hr {
    display: inline-block;
    padding-top: .7rem;
}

/* adds pseudo hr after h3 */
.h-hr:after {
    content: '';
    display: block;
    border-top: 1px solid var(--border);
}

/* buttons */

.top-button {
    text-align: center;
    margin: auto;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
}

.top-button a {
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 550;
    padding: .2rem .7rem;
    border-radius: 2rem;
    border: 3px solid rgba(var(--button-border), 0.73);
}

.top-button a:hover, .top-button a:active {
    color: var(--accent);
    background-color: rgba(var(--header), 0.35);
    /*
    background-color: #5a5a5a25; */
}

.social-btn {
    margin-top: .25rem;
}

.social-btn a {
    line-height: 2rem;
    font-size: 1rem;
    font-weight: 550;
    text-decoration: none;
    padding: .2rem .7rem;
    border-radius: 2rem;
    border: 2px solid rgba(var(--button-border), 0.87);
}

.social-btn a:hover, .social-btn a:active {
    color: var(--accent);
    background-color: rgba(var(--header), 0.30);
    /*
    background-color: #5a5a5a30; */
}

.rss-btn {
    text-align: center;
    margin-top: .25rem;
}

.rss-btn a {
    line-height: 2rem;
    font-size: 1rem;
    font-weight: 550;
    text-decoration: none;
    padding: .2rem .7rem;
    border-radius: 2rem;
    border: 2px solid rgba(var(--button-border), 0.87);
}

.rss-btn a:hover, .rss-btn a:active {
    color: var(--accent);
    background-color: rgba(var(--header), 0.30);
}

/* images */

img {
    margin: .25rem 0;
}

figcaption {
    text-align: center;
}

.blog-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.gaming-banner {
    max-width: 100%;
    padding-bottom: .7rem;
}

.yuzuru {
    /* index page pfp */
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.games-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.game {
    /* game coverart image selector */
    overflow: hidden;
    max-height: 14rem;
    /*
    max-height: 14rem;
    max-height: 220px;*/
    padding: .25rem .25rem;
}

.game img {
    max-width: 100%;
}

.lain-game a {
    font-size: 1.1rem;
    padding: .2rem .5rem;
}

@media (max-width: 400px) {
    /* fixes link size for mobile */
    .lain-game a {
    font-size: .95rem;
}
}

@media (max-width: 345px) {
    /* fixes link size for mobile */
    .lain-game a {
    font-size: .8rem;
}
}