@charset "utf-8";

/* Global */

:root {
    --row-padding-inline: clamp(0.5rem, 2vw, 1.5rem);
    --row-padding-block: 40px;
    --tile-margin-start: 4rem;
    --header-logo-height: 52px;
    --link-color: #344d92;
    --link-color-hover: #0074D9;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-size: 16px;
    font-family:
        "Noto Sans",
        "Droid Sans",
        "DejaVu Sans",
        "Liberation Sans",
        Roboto,
        Cantarell,
        "Segoe UI",
        Arial,
        Meiryo,
        Oxygen,
        Ubuntu,
        "Helvetica Neue",
        Helvetica,
        "Noto Color Emoji",
        sans-serif;
    line-height: 1.5;
}

h1 {
    font-size: 32px;
}

h2 {
    font-size: 24px;
}

img,
picture,
svg,
video {
    max-width: 100%;
    display: block;
}

/* Links */

a,
a:visited {
    text-decoration: none;
    transition: filter 0.2s, color 0.2s;
    color: var(--link-color);
}

a:hover,
a:active,
a:focus {
    color: var(--link-color-hover);
    text-decoration: none;
}

/* Top div */

.top {
    --dim: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2) 12%, rgba(0, 0, 0, 0.2));

    background-color: #51628f;
    color: white;
    background-image:
        var(--dim),
        url("img/bg.webp");
    background-size:
        100%,
        cover;
    background-blend-mode:
        multiply,
        normal;
    text-shadow: rgb(0, 0, 0) 0px 1px 2px;
    background-position:
        top left,
        top center;
    background-attachment: fixed;
    background-origin: border-box;
    background-repeat: no-repeat;
    position: relative;
    box-shadow: 1px 1px 2px rgba(16, 5, 54, 0.2);
}

/* Header */

header {
    font-family:
        "Noto Serif",
        "DejaVu Serif",
        "Liberation Serif",
        "Times New Roman",
        Georgia,
        Times,
        serif;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}

header>a.logo {
    height: var(--header-logo-height);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    color: white;
    text-decoration: none;
    gap: 6px;
}

header>a.logo:hover,
header>a.logo:active {
    color: #ddd;
}

header>a.logo>span {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
}

header>a.logo>img {
    height: 100%;
    padding: 2px;
}

header>span.space {
    flex: 2 1;
}

header>a.donate {
    width: 52px;
    height: 52px;
    background: url("img/heart.svg");
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Header images transition on hover */

header>a.logo>img,
header>a.donate {
    filter: invert(100%) drop-shadow(1px 1px 2px #000c);
    transition: filter 0.2s;
}

header>a.logo:hover>img,
header>a.donate:hover {
    filter: invert(90%) drop-shadow(1px 1px 2px #000c);
}

/*
 Presentation
 Inside top, right below header.
*/

.presentation {
    --font-size-paragraph: clamp(1rem, 2vw, 1.5rem);
    --font-size-accent: calc(var(--font-size-paragraph) * 2);

    position: relative;
    padding: 90px var(--row-padding-inline);
    background-image: url("img/kanade.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
}

.presentation p {
    font-size: var(--font-size-paragraph);
    margin: 2em 0;
    max-width: max(550px, min(70ch, 60%, 1000px));
    font-weight: 500;
    color: white;
}

.presentation h1 {
    font-size: var(--font-size-accent);
    color: #ff7701;
}

/* Get started and Community buttons */

.start_buttons {
    display: flex;
    flex-flow: row nowrap;
}

.start_buttons>a,
.start_buttons>a:visited {
    white-space: nowrap;
    display: inline-block;
    border: 2px solid white;
    padding: 10px 20px;
    font-weight: bold;
    color: white;
    text-decoration: none;
    border-radius: 2px;
    transition: background-color 0.2s;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
}

.start_buttons>a:hover,
.start_buttons>a:active {
    background-color: #fff2;
}

.start_buttons>a:first-child {
    color: black;
    background-color: white;
    margin-right: 10px;
    text-shadow: none;
}

/* Navigation */

nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    position: absolute;
    inset: 0 var(--row-padding-inline) auto;
    padding: 10px 0;
}

nav>a,
nav>a:visited {
    white-space: nowrap;
    color: white;
    text-decoration: none;
    font-weight: bold;
}

nav>a:hover,
nav>a:active,
nav>a:focus {
    color: #ddd;
}

/* Tiles */

.tile+.tile {
    margin-block-start: var(--tile-margin-start);
}

/*
 Text and image pair.
 A flex that stores an image and text.
*/

.txt-img-pair {
    display: flex;
    align-items: stretch;
    align-content: center;
    justify-content: center;
    flex-flow: column nowrap;
    gap: var(--row-padding-inline);
}

.txt-img-pair .image {
    min-width: 200px;
    display: grid;
    place-items: center;
    align-self: center;
    flex-shrink: 1;
}

.txt-img-pair .text {
    min-width: 50%;
    flex-shrink: 2;
}

.txt-img-pair .image img {
    max-height: 350px;
}

.txt-img-pair .text p {
    max-width: 70ch;
}

/* Rows */

.row {
    max-width: 1350px;
    padding-block: var(--row-padding-block);
    padding-inline: var(--row-padding-inline);
    margin: 0 auto;
    min-height: 300px;
    position: relative;
}

.row a:focus {
    box-shadow: inset 0 -2px 0px 0 currentColor;
}

.row h2,
.row p:not(:last-child) {
    margin-bottom: 1rem;
}

/* Row - recent articles */

.recent-articles .row {
    color: #3c2a4d;
    background-color: #f3f3ec;
    box-shadow: 0 0 2px rgba(0, 0, 61, 0.219);
}

/* Row - Anki */

.anki {
    --link-color: #e4562a;
    --link-color-hover: #e78c62;
}

.anki .row {
    color: rgb(32, 7, 0);
    background-color: #fef6ec;
    box-shadow: 1px 1px 2px rgba(92, 68, 0, 0.164);
}

/* Guide */

.guide {
    --link-color: #d1c680;
    --link-color-hover: #d3b065;
    color: #f6f5f0;
}

/* Ordered lists inside tiles */

.tile ol {
    list-style-type: none;
}

/* Key points */

.key_points {
    display: grid;
    justify-content: stretch;
    grid-auto-flow: column;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, auto);
    grid-auto-columns: 1fr;
    column-gap: var(--row-padding-block);
    row-gap: 1rem;
    align-items: start;
}

/* Point icons */

.key_points .icon {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 5px;
    height: 1em;
}

.key_points .beer {
    content: url("img/beer.svg");
}

.key_points .audiobook {
    content: url("img/audiobook.svg");
}

.key_points .anki {
    content: url("img/anki.webp");
}

.key_points .chat {
    content: url("img/element.svg");
}

/* Footer */

footer {
    background-color: #1b1a1a;
    color: white;
    text-align: center;
    margin-block-start: var(--tile-margin-start);
    padding-block: 0.5rem;
    padding-inline: var(--row-padding-inline);
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 1ch;

    --link-color: rgb(188, 201, 240);
    --link-color-hover: rgb(232, 235, 245);

    a {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        gap: 1ch;
    }

    img {
        width: 1.5rem;
        display: block;
        background-color: white;
        border-radius: 100vmax;
        padding: 2px;
    }
}

/* List of recent articles */

.bb-timestamp {
    font-style: italic;
}

.bb-timestamp::after {
    content: ' — ';
    color: rgb(34, 38, 41);
}

/* Shadows for images in tiles */

.tile .image {
    position: relative;
    isolation: isolate;
}

/* Crop shadow effects on .image tags. */

.recent-articles .row {
    overflow: hidden;
}

/* Images that have a slight shadow. */

.drop-shadow>img {
    filter: drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.25));
}

/* Light effect for the guide tile. */

.light-effect::before {
    z-index: -1;
    content: "";
    display: block;
    inset: 0;
    position: absolute;
    scale: 100% 120%;
    translate: 0% -5%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 100 100' width='100px' height='100px' preserveAspectRatio='none'%3E%3Cpath d='M40,0 L70,0 L100,100 L0,100z' fill='white'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: bottom center;
    filter: drop-shadow(0 0 2rem white) blur(1rem) opacity(0.333);
}

.light-effect::after {
    z-index: -1;
    content: "";
    display: block;
    inset: 0;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.666);
    border-radius: 50%;
    scale: 100% 30%;
    translate: 0 42%;
    filter: blur(2.5rem);
}

/* Shadow under the recent articles image. */

.circle-shadow::after {
    z-index: -1;
    content: "";
    display: block;
    inset: 0;
    position: absolute;
    scale: 120% 35%;
    translate: -5% 35%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    filter: blur(0.4rem);
}

/* Polka-dot background */

.polka-dot-bg {
    position: relative;
}

.polka-dot-bg>* {
    z-index: 1;
}

.polka-dot-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#dadae0 20%, transparent 30%), radial-gradient(#dadae0 20%, transparent 30%);
    opacity: 0.5;
    background-repeat: repeat;
    background-size: 0.5rem 0.5rem;
}

.recent-articles .polka-dot-bg::after {
    clip-path: polygon(0% 75%, 100% 90%, 100% 100%, 0 100%);
}

/* Skewed bg */

.skewed-bg {
    --skew-angle: -2deg;
    --background: linear-gradient(45deg, #191514, #191514 33%, #1b0f38);

    position: relative;
    isolation: isolate;
}

.skewed-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--background);
    transform: skewY(var(--skew-angle));
    box-shadow: 0px 1px 3px rgba(61, 40, 0, 0.4);
}

/* Wide screens */

@media only screen and (min-width: 750px) {
    nav {
        justify-content: flex-start;
    }

    nav>a:not(:last-child) {
        margin-right: 30px;
    }

    .presentation {
        margin-inline: 15vw 1rem;
    }

    .presentation {
        max-width: max(1200px, min(70vw, 1920px));
    }

    .key_points {
        grid-template-rows: repeat(4, auto);
    }

    .txt-img-pair {
        flex-direction: row;
    }

    .txt-img-pair.mirror-columns {
        flex-direction: row-reverse;
    }

    .recent-articles .txt-img-pair {
        justify-content: flex-end;
    }

    .recent-articles .polka-dot-bg::after {
        clip-path: polygon(0% 40%, 50% 100%, 100% 100%, 0 100%);
    }
}

@media only screen and (min-width: 1350px) {
    .key_points {
        grid-template-rows: repeat(2, auto);
    }

    .row {
        border-radius: 4px;
    }
}