@import url("https://fonts.googleapis.com/css?family=Dosis:400,400i,700");

:root {
    --primary: #008319;
    --beige: #ffeead;
    --yellow: #ffcc5c;
}

/* body background is now controlled by MUI theme via CssBaseline */
div.header {
    background-color: #ffff00;
    color: black;
    font-family: 'Dosis', sans-serif;
    text-align: center;
    font-size: 64px;
    vertical-align: middle;
}

.accentHeader {
    font-weight:bold;
    font-size:calc(12px + 1.5em);
}

.subhead-text {
    font-size:calc(12px + .5em);
}

span.bold {
    font-weight:bold;
}

span.link-style {
    text-decoration: underline;
    color: var(--primary);
}

.accentHeader .accent {
    color: var(--primary) !important;
}

.MuiDrawer-paper {
    width: 300px;
}

.MuiPaper-root.MuiCard-root.MuiPaper-elevation1.MuiPaper-rounded {
    height: 100%;
    margin:auto;
    align-content:center;
    justify-content:center;
}

span.MuiBadge-badge.MuiBadge-anchorOriginTopRightRectangle.MuiBadge-colorPrimary {
    transform:scale(1.4) !important;
    position:relative !important;

}

.MuiButton-root {
    text-transform: none !important;
}

div.subhead, span.demo {
    font-family: 'Dosis', sans-serif;
}
select {
    background-color: lightgray;
    text-align-last: center;
    font-family: 'Times New Roman',serif;
    font-size: 16px;
    text-align: center;
    color: red;
    font-weight: bold;
    font-style: italic;
    overflow: hidden;
    border: none;
}
option:checked { background-color: limegreen !important; }
div.subhead {
    width: 100%;
    /* background-color: #bf40ff; */
    /* color: black; */
    font-weight:bold;
    text-align: center;
    font-size: 32px;
    vertical-align: middle;
    /* height: 48px; */
}
div.subhead.alt {
    text-align:left;
    padding-top:6vh;
}

div.subhead.mini {
    font-size:28px;
    padding-top:20px;
}
div.subhead span.highlight {
    color: var(--primary);
}
span.demo {
    font-size: 24px;
    /* color: black; */
    font-weight: normal;
    font-family: 'Dosis', sans-serif !important;
}
div img.headerImage {
    height: 60px;
    vertical-align: middle;
}
div.main-grid {
    display: grid;
    grid-template-columns: minmax(100px, 200px) auto;
    grid-template-rows: auto auto;
    /* height: 100%; */
}
div.menu-item {
    color: black;
    font-family: 'Dosis', sans-serif;
    text-align: center;
    font-size: 32px;
    vertical-align: middle;
    cursor: pointer;
}
div.menu-subitem {
    color: black;
    font-family: 'Dosis', sans-serif;
    text-align: center;
    font-size: 20px;
    vertical-align: middle;
    cursor: pointer;
}
div.menu-column, div.content-column, div#demo, div#puzzles, div#rules {
    height: 100vw;
    vertical-align: top;
}
div.content-column {
    background-color: beige;
}
div.menu-item, div.menu-column {
    background-color: lightGray;
}
div.active-menu {
    background-color: limeGreen;
}
div.puzzles {
    display: block;
}
div.puzzle {
    text-align: center;
    margin: auto;
    font-size: 20px;
    font-weight: bold;
    float: left;
}
div.theme {
    font-size: 22px;
    text-align: center;
}
img.puzzle {
    width: 250px;
}
ol.rules {
    font-size: 20px;
}
ol.puzzles {
    font-size: 22px;
    margin-top: 10px;
}
ol {
    list-style: none;
}
ol li {
    margin: 0 0 0.5rem 0;
    position: relative;
    padding-left: 12px;
}
ol li::before {
    padding-left: 8px;
    padding-right: 8px;
}

ol li.cake::before {
    background: lightgreen;
    color: black;
}
ol li.pie::before {
    background: pink;
    color: black;
}
ol li.easy::before {
    background: darkgreen;
    color: yellow;
}
ol li.good::before {
    background: yellow;
    color: black;
}
/*
ol li.nice::before {
    background: orange;
    color: black;
}
*/
ol li.hard::before {
    background: red;
    color: yellow;
}
ol li.evil::before {
    background: black;
    color: white;
}
ol li::before {
    color: #fcd000;
    font-size: 1.2rem;
    font-weight: bold;
    position: absolute;
    --size: 32px;
    left: calc(-1 * var(--size) - 32px);
    line-height: var(--size);
    /* width: var(--size); */
    height: var(--size);
    top: 0;
    transform: rotate(-10deg);
    background: blue;
    border-radius: 50%;
    text-align: center;
    box-shadow: 1px 1px 0 #999;
}

span.size {
    font-size: 67%;
    font-weight: bold;
    margin-left: 8px;
}
span.six::before {
    content: '(6\00D7\0036';
}
span.eight::before {
    content: '(8\00D7\0038';
}
span.nine::before {
    content: '(9\00D7\0039';
}
span.ten::before {
    content: '(10\00D7\0031\0030';
}
span.six-all-up::before {
    content: '(6\00D7\0036, ALL-UP';
}
span.six-up-down::before {
    content: '(6\00D7\0036, UP-DOWN';
}
span.six-both-ways::before {
    content: '(6\00D7\0036, BOTH-WAYS';
}
span.eight-all-up::before {
    content: '(8\00D7\0038, ALL-UP';
}
span.eight-up-down::before {
    content: '(8\00D7\0038, UP-DOWN';
}
span.eight-both-ways::before {
    content: '(8\00D7\0038, BOTH-WAYS';
}
span.nine-all-up::before {
    content: '(9\00D7\0039, ALL-UP';
}
span.nine-up-down::before {
    content: '(9\00D7\0039, UP-DOWN';
}
span.nine-both-ways::before {
    content: '(9\00D7\0039, BOTH-WAYS';
}
span.ten-all-up::before {
    content: '(10\00D7\0031\0030, ALL-UP';
}
span.ten-up-down::before {
    content: '(10\00D7\0031\0030, UP-DOWN';
}
span.ten-both-ways::before {
    content: '(10\00D7\0031\0030, BOTH-WAYS';
}
span.size::after {
    content: ')';
}
span.moves {
    color: red;
}
span.moves::after {
    content: '; moves given)';
}
span.hints {
    color: red;
}
span.hints::after {
    content: '; hints given)';
}
span.hints-and-moves {
    color: red;
}
span.hints-and-moves::after {
    content: '; moves & hints given)';
}

.MuiAppBar-root {
    height:9vh;
    justify-items: center;
    align-content: center;
    justify-content: center;
}

.MuiGrid-root.white-section.MuiGrid-container,.MuiPaper-root.MuiGrid-root.makeStyles-whiteBackground-1.MuiGrid-container.MuiPaper-elevation1.MuiPaper-rounded {
    /* background: white; */
    padding: 0;
    margin-left: -20px !important;
    /* padding-right: 40px; */
    width: calc(100% + 40px) !important;
}

.infoText {
    font-size: 18px;
}

.MuiGrid-root.MuiGrid-item.MuiGrid-grid-xs-12.MuiGrid-grid-md-6 {
    max-width: 40%;
}

ol li.rule-1::before { content: '1.'; }
ol li.rule-2::before { content: '2.'; }
ol li.rule-3::before { content: '3.'; }
ol li.rule-4::before { content: '4.'; }
ol li.rule-4a::before { content: '4a.'; }
ol li.rule-4b::before { content: '4b.'; }
ol li.rule-4c::before { content: '4c.'; }
ol li.rule-4d::before { content: '4d.'; }
ol li.rule-4e::before { content: '4e.'; }
ol li.rule-5::before { content: '5.'; }
ol li.rule-5a::before { content: '5a.'; }
ol li.rule-5b::before { content: '5b.'; }
ol li.rule-5c::before { content: '5c.'; }

div.center { text-align: center; }