/* Global variables */
:root {
    /* Color palette */
    --color-primary: #f1efe6;

    --color-seconday: #eccf3a;
    --color-seconday-brightened: #ff8902;
    --color-seconday-darkened: #14213D;
    --color-seconday-darkened-darkened: #14213D;

    --color-accent: #14213D;
    --color-accent-brightened: #14213D;
    --color-accent-darkened: #14213D;

    --color-ui: #f4d35e;

    --color-light: #bfc0c0;

    /* Border radius for ui elements */
    --border-radius: 5px;
}

body{
    font-family: "Roboto";
    background: var(--color-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0; /* remove default body margin that can create gaps */
}

.content {
    display: flex;
    flex: 1;
    flex-direction: column;
	align-items: center;
	justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

h4, cite {
    margin: 0; /* "margin: 1" is invalid (missing unit) */
}


/* Wrapper for file upload fields */
blockquote {
    font-weight: 100;
	font-size: 2rem;
	max-width: 1000px;
	line-height: 1.25;
	position: relative;
	margin: 0;
	padding: 1rem 1rem;
}

/* Quote mark effects */
blockquote:before,
blockquote:after {
	position: absolute;
	color: var(--color-seconday-darkened);
	font-size: 8rem;
	width: 8rem;
	height: 4rem;
}
blockquote:before {
	content: '“';
	left: 0rem;
	top: -5rem;
}
blockquote:after {
	content: '”';
	right: -5rem;
	bottom: -2rem;
}

/* Author name */
cite {
	line-height: 3;
	text-align: left;
    margin: 1;
}

/* Single-line footer */
.footer-single-line {
    background-color: var(--color-accent-darkened);
    color: var(--color-primary);
    border-top: 5px solid var(--color-seconday);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
}
.footer-single-line-link {
  color: var(--color-seconday);
  background-color: transparent;
  text-decoration: none;
}
.footer-single-line-link:hover {
  color: var(--color-seconday-brightened);
  background-color: transparent;
  text-decoration: underline;
}
.footer-single-line-link:active {
  color: var(--color-accent-brightened);
  background-color: transparent;
  text-decoration: underline;
}

/* Hide debug buttons on lead */
#random-quote-button {
    display: none;
}
#current-quote-button {
    display: none;
}

/* Mobile */
@media (max-width: 1200px) {
    body {
        min-height: 100dvh; /* Use dynamic viewport height (hopefully fixes safari issues with footer) */
    }

    .footer-single-line {
        position: fixed;
        left: 0px;
        bottom: 0px;
        width:100%;
    }

    .content {
        padding: 1rem 0.75rem;
    }

    blockquote {
        padding: 1rem 1rem;
        font-size: 2rem;
    }

    blockquote:before,
    blockquote:after {

        font-size: 6rem;
        width: 6rem;
        height: 3rem;
    }

    blockquote::before {
        content: "“";
        left: -0.2rem;
        top: -5rem;
    }  

    blockquote::after {
        content: "”";
        right: -4rem;
        bottom: -3rem;
    }
}