/* ______ _ _ _ _ | ___ (_) | | | | (_) | |_/ /_ ___| |_ __ _ ___| |__ _ ___ | __/| / __| __/ _` |/ __| '_ \| |/ _ \ | | | \__ | || (_| | (__| | | | | (_) | \_| |_|___/\__\__,_|\___|_| |_|_|\___/ _____ _ _ _ / ___| | | (_) \ `--.| |_ _ _ __| |_ ___ `--. | __| | | |/ _` | |/ _ \ /\__/ | |_| |_| | (_| | | (_) | \____/ \__|\__,_|\__,_|_|\___/ */ /* IMPORT FONT AWESOME CSS */ @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css); /* ROOT VARIABLES - THIS IS THE DEFAULT (FALLBACK) COLOR SCHEME. To change the whole site's look, don't edit this file: pick or add a theme in css/themes.css instead and set in the layouts. See README.md "カラーテーマの切り替え方" for the full workflow. */ :root { /* MAIN BACKGROUND COLOR */ --main-bg-color: #0432ff; /* MAIN FONT SETTINGS */ --main-font-size: 20px; --main-font-color: #dbdbdb; /* TOP TITLE COLOR */ --title-color: #dbdbdb; /* LINK COLOR SETTINGS */ --link-color: #ffdb25; --link-hover-color: #ffffff; /* SOCIAL ICON SETTINGS */ --social-font-size: 1.5rem; --social-button-color: #ffdb25; --social-button-hover-color: #ffffff; /* TEXT SELECTION COLOR */ --selection-text-color: #000000; --selection-bg-color: #37ff00; /* DOGGO (TOP *) COLOR */ --doggo-color: #ffdb25; /* VHS SCANLINE / NOISE COLORS (see vhs.css) */ --vhs-noise-color: rgba(11, 11, 11, 0.5); --vhs-scanline-color: rgba(0, 0, 0, 0.5); /* LEFT-TOP CAT DOT ICON COLORS (see dot/cat.css) */ --dot-color-a: #2c527a; --dot-color-b: #ffffff; /* PER-THEME LAYOUT TWEAKS */ --h5-font-size: 0.75rem; --h5-margin: 0.5rem 0 0.5rem 0; --h1-text-decoration: underline; } body { background-color: var(--main-bg-color); color: var(--main-font-color); font-family: "VT323", monospace; margin: 0 auto; max-width: 500px; padding: 1rem; } html { font-size: var(--main-font-size); } /* DotGothic16 for special page contents only */ .dotgothic16-ja { font-family: "DotGothic16", sans-serif; font-size: 0.7rem; } /* DOGGO (Dot) SETTING */ .doggo { animation: flash 0.3s linear infinite; margin-top: 2.2rem; color: var(--doggo-color); display: inline-block; } @keyframes flash { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } } /* SELECTION COLOR */ ::selection { color: var(--selection-text-color); background-color: var(--selection-bg-color); } /* HEADING */ h1 { font-size: 3rem; margin: 1.5rem 0 1rem 0; text-decoration: var(--h1-text-decoration); } h2 { font-size: 1.3rem; margin: 0.5rem 0 0.5rem 0; } h3 { font-size: 1.3rem; margin: 3rem 0 1rem 0; } h4 { font-size: 1.1rem; margin: 1.2rem 0 0.3rem 0; } h5 { font-size: var(--h5-font-size); margin: var(--h5-margin); } h6 { font-size: 0.5rem; margin: 0.5rem 0 0.5rem 0; } ul { list-style-type: square; margin-inline-start: -0.4rem; margin-block-start: 0em; margin-block-end: 1em; } /* PARAGRAPH */ p { margin: 0.2rem 0 0.3rem 0; } /* LINK & HOVER */ a:any-link { color: var(--link-color); text-decoration: none; } a:hover { color: var(--link-hover-color); } #title:any-link { color: var(--title-color); text-decoration: none; } .social-link:any-link { color: var(--social-button-color); text-decoration: none; } .social-link:hover { color: var(--social-button-hover-color); text-decoration: none; } /* SOCIAL ICONS */ .social { list-style: none; margin: 1rem 0 2rem 0; padding: 0; } .social > li { font-size: var(--social-font-size); display: inline-block; padding-inline-end: 8px; } /* FOOTER & COPYRIGHT */ .footer { text-align: right; font-size: 0.7rem; margin-top: 4rem; } /* RESPONSIVE */ /* SMART PHONE */ @media screen and (max-width: 768px) { h1 { margin: 1rem 0rem; font-size: 2.1rem; } h2 { font-size: 1.1rem; } .social > li { font-size: 1rem; } }