/*
    Royal Albert Hall:
        dark-gray: 95A1A0;
        silver: c6deea;
        dark brown: 4E3A2F;
        albhal-crimson: C95E3C;

        TODO: set all repeated variables in :root
*/

:root {
    --rah-dark-gray: #95A1A0;
    --rah-silver: #c6deea;
    --rah-dark-brown: #4E3A2F;
    --rah-crimson: #C95E3C;
    --rah-dark-blue-txt: #3b4758;
}

* {
    box-sizing: border-box;
}

html {
    padding: 0;
    margin: 0;
    color: var(--rah-dark-blue-txt);
    font-size: 16px;
    font-family: Arial;
}

body {
    padding: 0;
    margin: 0;
    background: #674743;
}

a {
    text-decoration: none;
}

a:link, a:visited {
    color: var(--rah-dark-gray);
}

a:hover {
    text-decoration: underline;
}

a:active {
    color: var(--rah-crimson);
}

ul {
    margin: 0;
}

header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    row-gap: 1rem;
    column-gap: 1rem;
    align-items: stretch;
    align-content: stretch;
    padding: 1rem;
    color: #bc7c72;
    background: var(--rah-crimson); 
}

@media screen and (min-width: calc(264px + 264px + 3rem)) {
    .base-main-image {
        order: -1;
    }
}

header > div {
    order: 2;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 262px;
}

.base-main-image { 
    max-width: 262px;
    max-height: 262px;
    background: #7b858d;
    padding: 3px;
    /* border: 3px solid #f0dfb9; */
}

.base-tulpi {
    width: 100%;
}

.base-welcome-block {
    padding: 0 1rem;
    background: var(--rah-silver);
    color: var(--rah-dark-blue-txt);
}

.base-welcome-block > h2, .base-about-block > h2 {
    text-align: center;
}

.base-about-block {
    padding: 0 1rem;
    background: #f0dfb9;
    color: #674743;
}

@media screen and (min-width: 1200px) {
    .base-welcome-block, .base-about-block {
        padding: 0 3%;
    }
}

nav {
    z-index: 999;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: -1px;
    border-top: 1px solid var(--rah-crimson); /* Hack to make this website look nice on ubuntu chrome */
    left: 0;
    display: flex;
    flex-direction: row;
    background: #54748c;
    border-bottom: 2px solid #7b858d;
}

.base-title-holder {
    border: 4px solid #e3e3e6;
    padding: 0 1rem;    
}

h1 {
    color: #e3e3e6;
}

.clr2-accent {
    background: var(--rah-silver);
}

.base-content-wrapper {
    background: #f0dfb9;
    padding: 0.5rem;
}

footer {
    background: #674743;
    color: #bfa896;
    padding: 1rem;
    padding-bottom: 4rem;
}

@media screen and (min-width: 700px) {
    .base-content-wrapper {
        padding: max(1rem, 2%);
    }
}