/* License for font found at /font-license.txt */
html, body {
    height: 100%;
    min-height: 100%;
}

html {
    --text-color: #231F20;
    --text-background: #FFFFFF;
    --highlight-color: #BE1E2D;
    --footer-text-color: #FFFFFF;
    --footer-background: #231F20;
    --logo-black: #231F20;
    --logo-red: #BE1E2D;
}

/* changing fontsize here will affect rem */
/*
html {
	font-size: 1.5em;
}
*/

body {
    position: relative;
    margin: 0;
    color: var(--text-color);
    font-family: 'Source Sans Pro', Futura, sans-serif;
    font-size: 1.5rem;
}

.scale-email {
    font-size: calc(1.25rem + 0.25 * ((100vw - 29.6875rem)/7.8125));
}

@media (max-width: 475px) {
    .scale-email {
        font-size: 1.25rem;
    }
}

@media (min-width: 600px) {
    .scale-email {
        font-size: 1.5rem;
    }
}

ul {
    margin: 0;
}

a {
    text-decoration: none;
    transition: color 0.5s cubic-bezier(0, 0.675, 0.32, 1);
}

a:hover, .highlight-text {
    color: var(--highlight-color);
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.font-100 {
    font-size: 1rem;
}

.hidden {
    display: none !important;
}

/*
	calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

	1200px width at and above 1600px viewport width
	500px width at 500px viewport width
	100% below 500px
	scale between
*/
.center-container-row, .center-container-col {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: calc(500px + 700 * ((100vw - 500px) / 1100));
    height: 100%;
    padding: 0 1rem 0 1rem;
}

.center-container-col {
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-evenly;
    text-align: center;
}

@media (max-width: 500px) {
    .center-container-row, .center-container-col {
        width: 100%;
    }
}

@media (min-width: 1600px) {
    .center-container-row, .center-container-col {
        width: 1200px;
    }
}

.header {
    position: fixed;
    z-index: 1;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--text-background);
}

#logger {
    position: fixed;
    z-index: 2;
    top: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: white;
    opacity: 0.65;
    font-size: 1rem;
}
/*
	2rem at 1000px and above
	0rem at 700px and below

	100px at 700px and above
	75px at 500px and below

	need to use same units on both sides 
	700px 43.75rem
	300 18.75
*/
.dark-mode-button {
    position: fixed;
    z-index: 1;
    left: calc(2 * ((100vw - 62.5rem)/37.5));
    bottom: calc(2 * ((100vw - 62.5rem)/37.5));
    box-sizing: border-box;
    border: 2px solid black;
    border-radius: 5rem;
    height: calc(65px + 35 * ((100vw - 700px)/300));
    width: calc(65px + 35 * ((100vw - 700px)/300));
    background-image: url('lightbulb-off.png');
    background-size: cover;
    opacity: 0.5;
    cursor: pointer;
    /*
	transition: opacity 500ms linear;
	*/
}

/*
@media (max-width: 1200px) {
    .dark-mode-button {
        opacity: 0.5;
    }
}

@media (min-width: 1200px) {
    .dark-mode-button {
        opacity: 1;
    }
}
*/

@media (max-width: 1000px) {
    .dark-mode-button {
        left: 0rem;
        bottom: 0rem;
    }
}

@media (min-width: 1600px) {
    .dark-mode-button {
        left: 2rem;
        bottom: 2rem;
    }
}

@media (max-width: 700px) {
    .dark-mode-button {
        width: 65px;
        height: 65px;
    }
}

@media (min-width: 1000px) {
    .dark-mode-button {
        width: 100px;
        height: 100px;
    }
}

.bulb-on {
    border: 2px solid white;
    background-image: url('lightbulb-on.png');
}

.floating-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

/*
	We get auto scaling with a max size with this setup
*/
.floating-image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 700px;
    width: 700px;
}

.floating-image-container > img {
    position: absolute;
    max-height: 100%;
    max-width: 100%;
}


/*
	16px = 1em
	1px = 1/16 em
	0.0625em = 1px

	reference:
	calc( 2.25em + (11.25 - 2.25) * ( (100vw - 20em) / ( 100 - 20) ))

	Fluid Typgraphy formula
	Source: https://css-tricks.com/snippets/css/fluid-typography/
	font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

	font-size: calc(1em + (10em - 1em) * ((100vw - 28.375em) / (1600px - 454px)));
	font-size: calc(1em + 9 * ((100vw - 28.375em) / 1146));
	Notes:
		all units must be the same size
		* divisor must be same units as font size, but without the units expressed
*/

.text-break {
    word-break: break-word;
}

.background-image-1, .background-image-2 {
    position: fixed;
    z-index: -2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    /*align-items: center;*/
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    background-image: url('light-image-1-l.jpg');
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
    background-size: cover;
    background-position: center center;
    filter: brightness(50%);
}

.background-image-2 {
    z-index: -1;
    background-image: url('light-image-2-l.jpg');
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

/*
	These are used when page is loaded in dark mode, so the user does not see the
	light mode images before the high res images are loaded
*/
.image-1-dark {
    background-image: url('dark-image-1-l.jpg');
}

.image-2-dark {
    background-image: url('dark-image-2-l.jpg');
}

#anti-flicker-1, #anti-flicker-2 {
    flex-grow: 1;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.text-1, .text-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 2rem 0 2rem 0;
    background-color: var(--text-background);
}

.text-2 {
    height: 200px;
    padding: initial;
}

.floating-text {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    color: #FFFFFF;
}

.footer {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    min-height: 120px;
    background-color: var(--footer-background);
    color: var(--footer-text-color);
}

.footer a {
    padding: 0 0.25rem 0 0.25rem;
    color: var(--footer-text-color);
}

.flex-row {
    display: flex;
    justify-content: space-evenly;
    box-sizing: border-box;
    width: 80%;
}

@media (max-width: 500px) {
    .flex-row {
        width: 100%;
    }
}

.footer .flex-row > span {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 0.5rem 0 0.5rem;
    position: relative;
}

.fading {
    opacity: 1;
    position: absolute;
    top: -1.5rem;
    animation-name: fade-opacity;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes fade-opacity {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.clickable {
    cursor: pointer;
}

.image-label {
    position: absolute;
    left: 0;
    bottom: 0;
    color: #FFFFFF;
}

.align-items-start {
    display: flex;
    align-items: start;
    flex-direction: column;
}
.py-4 {
    padding: 0.25rem 0 0.25rem 0;
}