@font-face {
    font-family: 'Balthazar';
    font-weight: 400;
    font-style: normal;
    src: url(Balthazar-Regular.ttf) format('truetype');
    font-display: swap;
}

:root {
    --background: #F7F1DE;
    --highlight: #B87C4C;
    --primary: #A8BBA3;
    --secondary: #C4A484;

    --announce-size: 8rem;

    --soft-black: rgba(0,0,0,0.9);
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: "Balthazar";
}

.hew {
    font-family: monospace;
    font-weight: 500;
    font-size: 1.25rem;
}

nav {
    background-color: var(--primary);
    color: var(--soft-black);
    font-weight: bold;
    justify-content: space-between;
    display: flex;
    padding: 1rem;
}

nav img {
    height: 30px;
}

nav a {
    color: rgb(0, 0, 0);
}

nav ul {
    display: flex;
    align-items: center;
    gap: 1rem;
    list-style: none;
}

nav ul > * {
    border-right: 1px solid rgba(0,0,0,0.5);
    padding-right: 1rem;
}

nav ul > *:last-child {
    border-right: none;
}

code {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 0.2rem 0.35rem;
}

header {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    column-gap: 2rem;
    padding: 0 1rem;
}

#demo {
    transform: scale(90%);
}

#logo {
    width: auto;
    max-height: var(--announce-size);
}

h1 {
    font-size: var(--announce-size);
    text-shadow: rgba(0,0,0,0.5) 0.2rem 0.2rem 0.7rem;
}

header h1 span {
    color: var(--secondary);
    opacity: 0.8;
}

header p {
    font-size: 1.4rem;
}

h3, h4 {
    color: var(--primary);
    filter: brightness(60%);
}

h3 {
    font-size: 2.5rem;
}

h4 {
    font-size: 1.9rem;
}

section {
    margin: 1rem;
    padding: 1.8rem;
}

#wrapper {
    display: grid;
    justify-items: center;
}

#wrapper, #background {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

main > p {
    padding: 0.5rem 1rem;
    margin: 1.5rem 1rem;
}

main section {
    border-radius: 5px;
    display: grid;
}

main section p,
main section li {
    font-size: 1.1rem;
}

main section.banner {
    grid-template-columns: 2fr 1fr;
}

main section.banner:nth-of-type(even) {
    grid-template-columns: 1fr 2fr;
}

main section.banner:nth-of-type(even) > *:first-child {
    order: 2
}

main section.banner:nth-of-type(even) > *:nth-child(2) {
    order: 1
}

main section.banner:nth-of-type(3n+1),
main section.banner:nth-of-type(3n+0) {
    box-shadow: #00000044 0px 0px 10px;
}

main section.banner:nth-of-type(3n+1) {
    background-color: rgba(196, 164, 132, 0.55);
}

main section.banner:nth-of-type(3n+0) {
    background-color: rgba(168, 187, 163, 0.55);
}

#ruby {
    filter: hue-rotate(150deg) saturate(8);
}

#python {
    filter: hue-rotate(50deg) saturate(1.8);
}

section aside {
    align-self: center;
    justify-self: center;
}

pre {
    background-color: #000;
    color: #fff;
    padding: 1rem;
    border-radius: 10px;
    margin: 1rem 0;
}

section h4 {
    margin-top: 1rem;
}

#spec aside {
    perspective: 100px;
}

#spec aside > div {
    transform: translateY(-1rem) rotateY(15deg);
    display: grid;
}

#spec aside > div > span {
    font-size: 8rem;
}

#spec aside > div > span:nth-child(2) {
    display: block;
    line-height: 0px;
    transform: translateX(-0.4rem) translateY(-1.5rem) rotate(-90deg);
}

#spec aside > div > div {
    display: flex;
    justify-content: space-evenly;
    text-shadow: black 0px 0px 4px;
}

#structure aside span {
    font-size: 10rem;
}

details summary {
    cursor: pointer;
    font-size: 1.2rem;
    background-color: rgba(196, 164, 132, 0.80);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    margin: 1.1rem 0;
    font-weight: bold;
    box-shadow: #00000050 0px 0px 10px;
}

details > p {
    padding: 0.5rem;
}

section ul {
    margin: 0.6rem 0;
    display: grid;
    row-gap: 0.8rem;
}

main section:last-child > div {
    display: grid;
    row-gap: 1rem;
}

main > p {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    box-shadow: #00000050 0px 0px 5px inset;
    border-radius: 10px;
    border: 1px solid var(--primary);
    margin-top: 3.5rem;
}

main > p span {
    opacity: 0.7;
    font-size: 1.3rem;
}

main > p > span:first-child {
    font-size: 1.4rem;
    margin-right: 1rem;
}

main > p > span:last-child {
    font-style: italic;
}

footer {
    background-color: #000;
    display: grid;
    justify-items: center;
    color: #ffffff80;
    padding-bottom: 1rem;
}

#git {
    height: 2.5rem;
    margin: 1.5rem;
}

#background {
    display: grid;
    gap: 0.8rem;
}

#background h3 {
    border-bottom: 4px solid rgba(196, 164, 132, 0.55);
}

#background > p:last-child {
    text-indent: 1rem;
    font-style: italic;
    opacity: 0.6;
}

@media (max-width: 640px) {
    :root {
	--announce-size: 6rem;
    }

    header {
	grid-template-columns: auto 1fr;
    }

    #demo {
	width: 90%;
	transform: scale(100%);
	margin-top: 1rem;
	margin-bottom: 1rem;
    }

    header > *:last-child {
	grid-column: 1 / 3;
    }

    main section.banner {
	grid-template-columns: 1fr !important;
	row-gap: 2rem;
    }

    main section.banner:nth-of-type(even) > *:first-child {
	order: 1
    }

    main section.banner:nth-of-type(even) > *:nth-child(2) {
	order: 2
    }
}