:root {
    --Darker     : #4E1749;
    --Dark       : #7E3779;
    --MediumDark : #9D5390;
    --Medium     : #AD83B0;
    --MediumLight: #DFCCE4;
    --Light      : #EDE3F0;
    --Lighter    : #F4EFF6;
  }

.container { min-width: 200px; }

.bg-dark { background-color: var(--Dark)!important; }

p, ul { margin-bottom: 2rem; }

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-family: Kreon; }
h1, h2, h3, h4, h5 { line-height: 2; }

h1, .h1 { font-size: 2.5rem; }
h1 { margin-top: 3rem; }

h2, .h2 { font-size: 1.75rem; }
h2 { margin-top: 1.5rem;}

h3, .h3 { font-size: 1.5rem; }
h3 { margin-top: 1rem;}

h4 { font-size: 1.25rem; font-weight: bold; }

body { font-family: -apple-system, BlinkMacSystemFont, "Open Sans", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
    line-height: 2; }

.download > img { margin-right: .5em; width: 32px; height: 32px; }

.btn-primary { background-color: var(--Dark); border-color: var(--Dark); }
.btn-primary:hover { background-color: var(--MediumDark); border-color: var(--MediumDark); color: white; }
.btn-primary[disabled] { background-color: var(--Medium); border-color: var(--Medium); color: var(--MediumLight); }

.btn-outline-primary { border-color: var(--Dark); color: var(--Dark); }
.btn-outline-primary:hover { background-color: var(--Light); border-color: var(--Dark); color: var(--Dark); }
.navbar-btn { border-color: white; color: white; }
.navbar-btn:hover { background-color: var(--Lighter); border-color: var(--Darker); color: var(--Darker); }
nav .nav-link { white-space: nowrap; }

.form-check-input { margin-top: .55rem; }

.comments > div { max-width: 800px; }

code, .xml { font-family: Consolas, mono; white-space: pre-wrap; line-height: 1.4; font-size: .9rem; color: inherit;
    padding: 1rem; margin-bottom: 1rem; }
.xml { background: #eee; }
span.xml { padding: 0.2rem .5rem; }

img.screenshot { display: block; margin: 20px auto; box-shadow: 0 0 15px 3px rgba(0, 0, 0, .3); }
img.screenshot-left { display: block; margin: 20px 0; box-shadow: 0 0 15px 3px rgba(0, 0, 0, .3); }

.centerimg, a.video img { margin: 1rem auto; display: block; }

#footer { background: var(--Light); border-top: 1px solid var(--Dark); padding-bottom: 1rem; margin-top: 2rem; }
#footer * { font-size: .8rem; color: #444; }
#footer h1 { font-size: .9rem; font-weight: bold; margin-top: 1rem; }
#footer .nav-link { margin: 0; padding: 0; }

.error { background: var(--Light); color: var(--Dark); padding: 8px 16px; }

#popup, #commentFrame { display: none; }
#popup { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); z-index: 5; top: 0; left: 0; }
#popup iframe { border: 0px solid black; width: 700px; height: 700px; max-height: 80%; top: 10%; margin: auto; position: relative; display: block; }

.comments .name, .comments .nameUser { border-bottom: 1px solid #ccc; padding: .5rem 0; margin: 0 0 1rem -2rem; }
.comments .nameUser { color: blue; }