:root {
    --penn-blue: #000033ff;
    --lapis-lazuli: #005888ff;
    --blue-munsell: #0084a3ff;
    --turquoise: #48ddb7ff;
    --black-bean: #320000ff;
    --chocolate-cosmos: #601e20ff;
    --rosy-brown: #bfa5a3ff;
    /* --dutch-white: #e8d5b5ff; */
    --tan: #d8ba8d;
    --night: #121212ff;
    --antiflash-white: #efefefff;
    
    --moonstone: #00a5bcff;
    --aquamarine: #65fbd2ff;

    --penn-blue-50: #e0e0e7;
    --penn-blue-100: #b3b3c2;
    --penn-blue-200: #808099;
    --penn-blue-300: #4d4d70;
    --penn-blue-400: #262652;
    --penn-blue-500: #000033;
    --penn-blue-600: #00002e;
    --penn-blue-700: #000027;
    --penn-blue-800: #000020;
    --penn-blue-900: #000014;
    --penn-blue-A100: #5555ff;
    --penn-blue-A200: #2222ff;
    --penn-blue-A400: #0000ee;
    --penn-blue-A700: #0000d4;

    --lapis-lazuli-50: #e0ebf1;
    --lapis-lazuli-100: #b3cddb;
    --lapis-lazuli-200: #80acc4;
    --lapis-lazuli-300: #4d8aac;
    --lapis-lazuli-400: #26719a;
    --lapis-lazuli-500: #005888;
    --lapis-lazuli-600: #005080;
    --lapis-lazuli-700: #004775;
    --lapis-lazuli-800: #003d6b;
    --lapis-lazuli-900: #002d58;
    --lapis-lazuli-A100: #8abbff;
    --lapis-lazuli-A200: #579dff;
    --lapis-lazuli-A400: #247fff;
    --lapis-lazuli-A700: #0a70ff;

    --blue-munsell-50: #e0f0f4;
    --blue-munsell-100: #b3dae3;
    --blue-munsell-200: #80c2d1;
    --blue-munsell-300: #4da9bf;
    --blue-munsell-400: #2696b1;
    --blue-munsell-500: #0084a3;
    --blue-munsell-600: #007c9b;
    --blue-munsell-700: #007191;
    --blue-munsell-800: #006788;
    --blue-munsell-900: #005477;
    --blue-munsell-A100: #a5e0ff;
    --blue-munsell-A200: #72ceff;
    --blue-munsell-A400: #3fbcff;
    --blue-munsell-A700: #25b4ff;

    --turquoise-50: #e9fbf6;
    --turquoise-100: #c8f5e9;
    --turquoise-200: #a4eedb;
    --turquoise-300: #7fe7cd;
    --turquoise-400: #63e2c2;
    --turquoise-500: #48ddb7;
    --turquoise-600: #41d9b0;
    --turquoise-700: #38d4a7;
    --turquoise-800: #30cf9f;
    --turquoise-900: #21c790;
    --turquoise-A100: #ffffff;
    --turquoise-A200: #cdffed;
    --turquoise-A400: #9affdb;
    --turquoise-A700: #80ffd3;

    --black-bean-50: #e6e0e0;
    --black-bean-100: #c2b3b3;
    --black-bean-200: #998080;
    --black-bean-300: #704d4d;
    --black-bean-400: #512626;
    --black-bean-500: #320000;
    --black-bean-600: #2d0000;
    --black-bean-700: #260000;
    --black-bean-800: #1f0000;
    --black-bean-900: #130000;
    --black-bean-A100: #ff5454;
    --black-bean-A200: #ff2121;
    --black-bean-A400: #ed0000;
    --black-bean-A700: #d40000;

    --chocolate-cosmos-50: #ece4e4;
    --chocolate-cosmos-100: #cfbcbc;
    --chocolate-cosmos-200: #b08f90;
    --chocolate-cosmos-300: #906263;
    --chocolate-cosmos-400: #784041;
    --chocolate-cosmos-500: #601e20;
    --chocolate-cosmos-600: #581a1c;
    --chocolate-cosmos-700: #4e1618;
    --chocolate-cosmos-800: #441213;
    --chocolate-cosmos-900: #330a0b;
    --chocolate-cosmos-A100: #ff6e72;
    --chocolate-cosmos-A200: #ff3b41;
    --chocolate-cosmos-A400: #ff080f;
    --chocolate-cosmos-A700: #ed0007;

    --rosy-brown-50: #f7f4f4;
    --rosy-brown-100: #ece4e3;
    --rosy-brown-200: #dfd2d1;
    --rosy-brown-300: #d2c0bf;
    --rosy-brown-400: #c9b3b1;
    --rosy-brown-500: #bfa5a3;
    --rosy-brown-600: #b99d9b;
    --rosy-brown-700: #b19391;
    --rosy-brown-800: #a98a88;
    --rosy-brown-900: #9b7977;
    --rosy-brown-A100: #ffffff;
    --rosy-brown-A200: #ffedec;
    --rosy-brown-A400: #ffbcb8;
    --rosy-brown-A700: #ffa49f;

    /*
    --dutch-white-50: #fcfaf6;
    --dutch-white-100: #f8f2e9;
    --dutch-white-200: #f4eada;
    --dutch-white-300: #efe2cb;
    --dutch-white-400: #ebdbc0;
    --dutch-white-500: #e8d5b5;
    --dutch-white-600: #e5d0ae;
    --dutch-white-700: #e2caa5;
    --dutch-white-800: #dec49d;
    --dutch-white-900: #d8ba8d;
    --dutch-white-A100: #ffffff;
    --dutch-white-A200: #ffffff;
    --dutch-white-A400: #ffffff;
    --dutch-white-A700: #fff8ed;
    */

    --tan-50: #faf7f1;
    --tan-100: #f3eadd;
    --tan-200: #ecddc6;
    --tan-300: #e4cfaf;
    --tan-400: #dec49e;
    --tan-500: #d8ba8d;
    --tan-600: #d4b385;
    --tan-700: #ceab7a;
    --tan-800: #c8a370;
    --tan-900: #bf945d;
    --tan-A100: #ffffff;
    --tan-A200: #fffbf6;
    --tan-A400: #ffe4c3;
    --tan-A700: #ffd9a9;

    --night-50: #e3e3e3;
    --night-100: #b8b8b8;
    --night-200: #898989;
    --night-300: #595959;
    --night-400: #363636;
    --night-500: #121212;
    --night-600: #101010;
    --night-700: #0d0d0d;
    --night-800: #0a0a0a;
    --night-900: #050505;
    --night-A100: #ff4e4e;
    --night-A200: #ff1b1b;
    --night-A400: #e70000;
    --night-A700: #ce0000;

    --antiflash-white-50: #fdfdfd;
    --antiflash-white-100: #fafafa;
    --antiflash-white-200: #f7f7f7;
    --antiflash-white-300: #f4f4f4;
    --antiflash-white-400: #f1f1f1;
    --antiflash-white-500: #efefef;
    --antiflash-white-600: #ededed;
    --antiflash-white-700: #ebebeb;
    --antiflash-white-800: #e8e8e8;
    --antiflash-white-900: #e4e4e4;
    --antiflash-white-A100: #ffffff;
    --antiflash-white-A200: #ffffff;
    --antiflash-white-A400: #ffffff;
    --antiflash-white-A700: #ffffff;

    --moonstone-50: #e0f4f7;
    --moonstone-100: #b3e4eb;
    --moonstone-200: #80d2de;
    --moonstone-300: #4dc0d0;
    --moonstone-400: #26b3c6;
    --moonstone-500: #00a5bc;
    --moonstone-600: #009db6;
    --moonstone-700: #0093ad;
    --moonstone-800: #008aa5;
    --moonstone-900: #007997;
    --moonstone-A100: #c2f1ff;
    --moonstone-A200: #8fe5ff;
    --moonstone-A400: #5cd9ff;
    --moonstone-A700: #42d3ff;

    --aquamarine-50: #edfffa;
    --aquamarine-100: #d1fef2;
    --aquamarine-200: #b2fde9;
    --aquamarine-300: #93fce0;
    --aquamarine-400: #7cfcd9;
    --aquamarine-500: #65fbd2;
    --aquamarine-600: #5dfacd;
    --aquamarine-700: #53fac7;
    --aquamarine-800: #49f9c1;
    --aquamarine-900: #37f8b6;
    --aquamarine-A100: #ffffff;
    --aquamarine-A200: #ffffff;
    --aquamarine-A400: #dafff2;
    --aquamarine-A700: #c1ffe9;

    --font-size: 0.834vw; /* 4.448vw for phones -> calc(5.33 * --font-size) */

    --app-black: #000000;
    --app-blue: #0d6efd;
    --app-indigo: #6610f2;
    --app-purple: #6f42c1;
    --app-pink: #d63384;
    --app-red: #dc3545;
    --app-orange: #fd7e14;
    --app-yellow: #ffc107;
    --app-green: #198754;
    --app-teal: #20c997;
    --app-cyan: #0dcaf0;
    --app-white: #ffffff;
    --app-gray: #6c757d;
    --app-gray-dark: #343a40;
    --app-gray-light: #adb5bd;
    --app-light: #f8f9fa;
    --app-dark: #212529;
	--app-transparent: #00000000;
  
    --material-red-50: #ffebee;
    --material-red-100: #ffcdd2;
    --material-red-200: #ef9a9a;
    --material-red-300: #e57373;
    --material-red-400: #ef5350;
    --material-red-500: #f44336;
    --material-red-600: #e53935;
    --material-red-700: #d32f2f;
    --material-red-800: #c62828;
    --material-red-900: #b71c1c;
    --material-red-A100: #ff8a80;
    --material-red-A200: #ff5252;
    --material-red-A400: #ff1744;
    --material-red-A700: #d50000;

	--material-pink-50: #fce4ec;
	--material-pink-100: #f8bbd0;
	--material-pink-200: #f48fb1;
	--material-pink-300: #f06292;
	--material-pink-400: #ec407a;
	--material-pink-500: #e91e63;
	--material-pink-600: #d81b60;
	--material-pink-700: #c2185b;
	--material-pink-800: #ad1457;
	--material-pink-900: #880e4f;
	--material-pink-A100: #ff80ab;
	--material-pink-A200: #ff4081;
	--material-pink-A400: #f50057;
	--material-pink-A700: #c51162;

	--material-purple-50: #f3e5f5;
	--material-purple-100: #e1bee7;
	--material-purple-200: #ce93d8;
	--material-purple-300: #ba68c8;
	--material-purple-400: #ab47bc;
	--material-purple-500: #9c27b0;
	--material-purple-600: #8e24aa;
	--material-purple-700: #7b1fa2;
	--material-purple-800: #6a1b9a;
	--material-purple-900: #4a148c;
	--material-purple-A100: #ea80fc;
	--material-purple-A200: #e040fb;
	--material-purple-A400: #d500f9;
	--material-purple-A700: #aa00ff;

	--material-deep-purple-50: #ede7f6;
	--material-deep-purple-100: #d1c4e9;
	--material-deep-purple-200: #b39ddb;
	--material-deep-purple-300: #9575cd;
	--material-deep-purple-400: #7e57c2;
	--material-deep-purple-500: #673ab7;
	--material-deep-purple-600: #5e35b1;
	--material-deep-purple-700: #512da8;
	--material-deep-purple-800: #4527a0;
	--material-deep-purple-900: #311b92;
	--material-deep-purple-A100: #b388ff;
	--material-deep-purple-A200: #7c4dff;
	--material-deep-purple-A400: #651fff;
	--material-deep-purple-A700: #6200ea;

	--material-indigo-50: #e8eaf6;
	--material-indigo-100: #c5cae9;
	--material-indigo-200: #9fa8da;
	--material-indigo-300: #7986cb;
	--material-indigo-400: #5c6bc0;
	--material-indigo-500: #3f51b5;
	--material-indigo-600: #3949ab;
	--material-indigo-700: #303f9f;
	--material-indigo-800: #283593;
	--material-indigo-900: #1a237e;
	--material-indigo-A100: #8c9eff;
	--material-indigo-A200: #536dfe;
	--material-indigo-A400: #3d5afe;
	--material-indigo-A700: #304ffe;

	--material-blue-50: #e3f2fd;
	--material-blue-100: #bbdefb;
	--material-blue-200: #90caf9;
	--material-blue-300: #64b5f6;
	--material-blue-400: #42a5f5;
	--material-blue-500: #2196f3;
	--material-blue-600: #1e88e5;
	--material-blue-700: #1976d2;
	--material-blue-800: #1565c0;
	--material-blue-900: #0d47a1;
	--material-blue-A100: #82b1ff;
	--material-blue-A200: #448aff;
	--material-blue-A400: #2979ff;
	--material-blue-A700: #2962ff;

	--material-light-blue-50: #e1f5fe;
	--material-light-blue-100: #b3e5fc;
	--material-light-blue-200: #81d4fa;
	--material-light-blue-300: #4fc3f7;
	--material-light-blue-400: #29b6f6;
	--material-light-blue-500: #03a9f4;
	--material-light-blue-600: #039be5;
	--material-light-blue-700: #0288d1;
	--material-light-blue-800: #0277bd;
	--material-light-blue-900: #01579b;
	--material-light-blue-A100: #80d8ff;
	--material-light-blue-A200: #40c4ff;
	--material-light-blue-A400: #00b0ff;
	--material-light-blue-A700: #0091ea;

	--material-cyan-50: #e0f7fa;
	--material-cyan-100: #b2ebf2;
	--material-cyan-200: #80deea;
	--material-cyan-300: #4dd0e1;
	--material-cyan-400: #26c6da;
	--material-cyan-500: #00bcd4;
	--material-cyan-600: #00acc1;
	--material-cyan-700: #0097a7;
	--material-cyan-800: #00838f;
	--material-cyan-900: #006064;
	--material-cyan-A100: #84ffff;
	--material-cyan-A200: #18ffff;
	--material-cyan-A400: #00e5ff;
	--material-cyan-A700: #00b8d4;

	--material-teal-50: #e0f2f1;
	--material-teal-100: #b2dfdb;
	--material-teal-200: #80cbc4;
	--material-teal-300: #4db6ac;
	--material-teal-400: #26a69a;
	--material-teal-500: #009688;
	--material-teal-600: #00897b;
	--material-teal-700: #00796b;
	--material-teal-800: #00695c;
	--material-teal-900: #004d40;
	--material-teal-A100: #a7ffeb;
	--material-teal-A200: #64ffda;
	--material-teal-A400: #1de9b6;
	--material-teal-A700: #00bfa5;

	--material-green-50: #e8f5e9;
	--material-green-100: #c8e6c9;
	--material-green-200: #a5d6a7;
	--material-green-300: #81c784;
	--material-green-400: #66bb6a;
	--material-green-500: #4caf50;
	--material-green-600: #43a047;
	--material-green-700: #388e3c;
	--material-green-800: #2e7d32;
	--material-green-900: #1b5e20;
	--material-green-A100: #b9f6ca;
	--material-green-A200: #69f0ae;
	--material-green-A400: #00e676;
	--material-green-A700: #00c853;

	--material-light-green-50: #f1f8e9;
	--material-light-green-100: #dcedc8;
	--material-light-green-200: #c5e1a5;
	--material-light-green-300: #aed581;
	--material-light-green-400: #9ccc65;
	--material-light-green-500: #8bc34a;
	--material-light-green-600: #7cb342;
	--material-light-green-700: #689f38;
	--material-light-green-800: #558b2f;
	--material-light-green-900: #33691e;
	--material-light-green-A100: #ccff90;
	--material-light-green-A200: #b2ff59;
	--material-light-green-A400: #76ff03;
	--material-light-green-A700: #64dd17;

	--material-lime-50: #f9fbe7;
	--material-lime-100: #f0f4c3;
	--material-lime-200: #e6ee9c;
	--material-lime-300: #dce775;
	--material-lime-400: #d4e157;
	--material-lime-500: #cddc39;
	--material-lime-600: #c0ca33;
	--material-lime-700: #afb42b;
	--material-lime-800: #9e9d24;
	--material-lime-900: #827717;
	--material-lime-A100: #f4ff81;
	--material-lime-A200: #eeff41;
	--material-lime-A400: #c6ff00;
	--material-lime-A700: #aeea00;

	--material-yellow-50: #fffde7;
	--material-yellow-100: #fff9c4;
	--material-yellow-200: #fff59d;
	--material-yellow-300: #fff176;
	--material-yellow-400: #ffee58;
	--material-yellow-500: #ffeb3b;
	--material-yellow-600: #fdd835;
	--material-yellow-700: #fbc02d;
	--material-yellow-800: #f9a825;
	--material-yellow-900: #f57f17;
	--material-yellow-A100: #ffff8d;
	--material-yellow-A200: #ffff00;
	--material-yellow-A400: #ffea00;
	--material-yellow-A700: #ffd600;

	--material-amber-50: #fff8e1;
	--material-amber-100: #ffecb3;
	--material-amber-200: #ffe082;
	--material-amber-300: #ffd54f;
	--material-amber-400: #ffca28;
	--material-amber-500: #ffc107;
	--material-amber-600: #ffb300;
	--material-amber-700: #ffa000;
	--material-amber-800: #ff8f00;
	--material-amber-900: #ff6f00;
	--material-amber-A100: #ffe57f;
	--material-amber-A200: #ffd740;
	--material-amber-A400: #ffc400;
	--material-amber-A700: #ffab00;

	--material-orange-50: #fff3e0;
	--material-orange-100: #ffe0b2;
	--material-orange-200: #ffcc80;
	--material-orange-300: #ffb74d;
	--material-orange-400: #ffa726;
	--material-orange-500: #ff9800;
	--material-orange-600: #fb8c00;
	--material-orange-700: #f57c00;
	--material-orange-800: #ef6c00;
	--material-orange-900: #e65100;
	--material-orange-A100: #ffd180;
	--material-orange-A200: #ffab40;
	--material-orange-A400: #ff9100;
	--material-orange-A700: #ff6d00;

	--material-deep-orange-50: #fbe9e7;
	--material-deep-orange-100: #ffccbc;
	--material-deep-orange-200: #ffab91;
	--material-deep-orange-300: #ff8a65;
	--material-deep-orange-400: #ff7043;
	--material-deep-orange-500: #ff5722;
	--material-deep-orange-600: #f4511e;
	--material-deep-orange-700: #e64a19;
	--material-deep-orange-800: #d84315;
	--material-deep-orange-900: #bf360c;
	--material-deep-orange-A100: #ff9e80;
	--material-deep-orange-A200: #ff6e40;
	--material-deep-orange-A400: #ff3d00;
	--material-deep-orange-A700: #dd2c00;

	--material-brown-50: #efebe9;
	--material-brown-100: #d7ccc8;
	--material-brown-200: #bcaaa4;
	--material-brown-300: #a1887f;
	--material-brown-400: #8d6e63;
	--material-brown-500: #795548;
	--material-brown-600: #6d4c41;
	--material-brown-700: #5d4037;
	--material-brown-800: #4e342e;
	--material-brown-900: #3e2723;

	--material-grey-50: #fafafa;
	--material-grey-100: #f5f5f5;
	--material-grey-200: #eeeeee;
	--material-grey-300: #e0e0e0;
	--material-grey-400: #bdbdbd;
	--material-grey-500: #9e9e9e;
	--material-grey-600: #757575;
	--material-grey-700: #616161;
	--material-grey-800: #424242;
	--material-grey-900: #212121;

	--material-blue-grey-50: #eceff1;
	--material-blue-grey-100: #cfd8dc;
	--material-blue-grey-200: #b0bec5;
	--material-blue-grey-300: #90a4ae;
	--material-blue-grey-400: #78909c;
	--material-blue-grey-500: #607d8b;
	--material-blue-grey-600: #546e7a;
	--material-blue-grey-700: #455a64;
	--material-blue-grey-800: #37474f;
	--material-blue-grey-900: #263238;

    --page-background: var(--antiflash-white-200);
    --page-card: var(--antiflash-white-50);
    --page-card-shadow: var(--night-100);
    --page-desk: var(--antiflash-white);
    --page-text: var(--night);

    --size-base: 1rem;

    --size-l1: 1.25rem;
    --size-l2: 1.563rem;
    --size-l3: 1.953rem;
    --size-l4: 2.441rem;
    --size-l5: 3.052rem;
    --size-l6: 3.815rem;
    --size-l7: 4.769rem;
    --size-l8: 5.961rem;

    --size-s1: 0.8rem;
    --size-s2: 0.64rem;
    --size-s3: 0.512rem;
    --size-s4: 0.41rem;
    --size-s5: 0.328rem;
    --size-s6: 0.262rem;
    --size-s7: 0.201rem;
    --size-s8: 0.168rem;

    --default-transition-duration: 0.25s;
    --default-transition-method: linear;
    --default-transition-target: all;
    --default-transition: var(--default-transition-target) var(--default-transition-duration) var(--default-transition-method);
}

a {
    color: var(--page-text);
    text-decoration: none;
}

body {
    margin: 0;
    padding: 0;
}

h1 {
    font-size: var(--size-l6);
}

h2 {
    font-size: var(--size-l5);
}

h3 {
    font-size: var(--size-l4);
}

h4 {
    font-size: var(--size-l3);
}

h5 {
    font-size: var(--size-l2);
}

h6 {
    font-size: var(--size-l1);
}

html {
    background-color: var(--page-background);
    color: var(--page-text);
    font-family: 'Roboto', sans-serif;
    font-size: var(--font-size);
    font-style: normal;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

input:focus {
    outline: none;
}

textarea:focus {
    outline: none;
}

.page-footer {
    border-top: 0.01rem solid var(--night-200);
    color: var(--night-200);
    display: flex;
    flex-direction: column;
    font-size: var(--size-s1);
    gap: 0.25rem;
    padding: 1rem 0;
    text-align: center;
    user-select: none;
}

.page-footer a {
    color: var(--night-200);
}

.page-head {
    align-items: center;
    background-color: var(--page-card);
    border-radius: 0.5rem;
    box-shadow: 0 0.1rem 1rem -0.4rem var(--page-card-shadow);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 1rem;
}

.page-body {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

.page-name {
    font-size: var(--size-l4);
    font-weight: 600;
    max-width: 85%;
    min-width: 85%;
    width: 85%;
}

.page-photo {
    border-radius: 0.5rem;
    max-width: 10%;
    min-width: 10%;
    overflow: hidden;
    width: 10%;
}

.page-photo img {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}

.page-root {
    padding: 2rem;
}

.page-under-construction {
    background-color: var(--chocolate-cosmos-50);
    border-radius: 0.5rem;
    color: var(--chocolate-cosmos);
    display: block;
    font-size: var(--size-l3);
    padding: 2rem;
    text-align: center;
}

/** ax **/

.ax-fit-height {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
}

.ax-fit-width {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}

/** -sm **/
@media (min-width: 576px) {

}

/** -md **/
@media (min-width: 768px) {

}

/** -lg **/
@media (min-width: 992px) {

}

/** -xl **/
@media (min-width: 1200px) {

}

/** -xxl **/
@media (min-width: 1440px) {

}

@media (prefers-color-scheme: dark) {

}

@media (prefers-color-scheme: light) {

}