html, body { color:#473463; margin:0; padding:0; font-size:19px; height:100%; font-family: "Fredoka"; font-weight:400; scrollbar-color: #cd6b8a #efdbe4; }

#page {
  height:100%; background:url("dotdollhouse.png") center no-repeat;	padding:0px; margin:0; display: grid;
  grid-template-columns: .2fr 320px 1fr 320px .2fr;
  grid-template-rows: 140px 65px 1fr 30px;
  grid-template-areas:
        "leftroof header header header rightroof"
        "leftemptybar leftcontainer navigation rightcontainer rightemptybar"
        "leftemptybar leftcontainer maincontainer rightcontainer rightemptybar"
        "leftemptybar footer footer footer rightemptybar";
}

a { color:#5f85b7; text-decoration:underline dashed #c4bbd9; border-radius:5px; text-decoration-thickness:3px; text-decoration-offset: 0px; display:inline-block; transition:0.3s; }
a:hover { background:#c4bbd9; transition:0.3s; cursor:help; }
b { color:#e2729c; font-weight:500; }
u { text-decoration:underline; text-decoration-color: #c4bbd9; text-decoration-thickness:3px; text-underline-offset: 0px; }
.marker { background:#c4bbd9; padding:0 3px; }
h1 { font-family:"Patrick Hand"; font-weight:500; font-size:1.6em; text-align:center; margin: 10px 0; }
h2, th { font-weight:400; font-size:1.1em; margin:10px 0; background:#cd6b8a; border-radius:5px; padding:5px 10px; text-align:center; color:#efdbe4; }
summary { list-style: none; }
p { margin:0; }
table { width:100%; margin:0; padding:0; }
#updatestable { text-align:center; }
th { margin:0; }
ul { list-style: none; padding-left: 10px; list-style-type: square; }
li { margin:10px 20px; }
li::marker { color: #e2729c; }

details p a { padding:10px 20px !important; background:#e9d2dd !important; }
details p a:hover { padding:10px 30px !important; background:#473463 !important; }

#leftroof { grid-area: leftroof; background:url("roof_l.png") no-repeat right; }
#rightroof { grid-area: rightroof; background:url("roof_r.png") no-repeat left; }

header { grid-area: header; display:flex; background:url("roof_m.png") repeat-x bottom; }
header h1 { font-family:"Sofia"; font-size:4.7em; padding:0; align-self:flex-end; margin:0 auto; line-height:1em; }

#navigation { grid-area: navigation; display:flex; column-gap:20px; justify-content:center; align-items:flex-end; background:#efdbe4; padding: 0 0 5px 0; }
#navigation a { text-decoration: none; padding: 7px 15px !important; transition:0.3s; }
#navigation a:hover { background:#c4bbd9; border: 1px dashed #473463; box-shadow: 0 0 0 4px #c4bbd9; color:#473463; transition:0.3s; }

#leftcontainer { grid-area: leftcontainer; padding:10px 10px 0 30px; overflow-y: auto; background:url("wall_border.png") repeat-y left #efdbe4; }
#leftcontainer h1, #rightcontainer h1, #content h1, #navigation a { color:#c4bbd9; padding: 0 10px; background: #473463; border-radius: 5px; border: 1px dashed #c4bbd9; box-shadow: 0 0 0 4px #473463; }
#leftcontainer a { color:#473463; display:block; text-decoration:none; padding:10px; transition:0.3s; background:#e4cbd7; margin-bottom:5px; }  
#leftcontainer a:hover { color:#efdbe4; background:#473463; transition:0.3s; padding:10px 20px; }

#maincontainer { grid-area: maincontainer; background:#efdbe4; padding:10px; }
#frame { width:100%; height:100%; border:0; border-radius:10px; }
#content { padding:0 10px 10px 10px; }
#updatescols { display: grid; grid-template-columns: 1fr .6fr; grid-template-rows: 1fr; grid-template-areas: "col1 col2"; grid-column-gap:10px; text-align:center;}
#updatescols img { max-width:100%; margin-bottom:10px; }
#col1 { grid-area: col1; }
#col2 { grid-area: col2; }

#rightcontainer { grid-area: rightcontainer; padding:10px 30px 0 10px; display:flex; flex-direction:column; background:url("wall_border.png") repeat-y right #efdbe4; }
#rightcontainer img { width:100%; display:block; align-self:center; margin-bottom:5px; }
#rightcontainer #updates { align-self:flex-end; height:300px; width:100%; margin-bottom:10px; }
#rightcontainer #updates #entries { overflow-y:auto; height:200px; }
#rightcontainer span { align-self:center; }

#flexdivider { flex:1; }

footer { grid-area: footer; display:flex; justify-content:center; align-items: flex-end; font-size:0.8em; background:url("wall_bottom.png") repeat-x top; }

#leftemptybar { grid-area: leftemptybar; }
#rightemptybar { grid-area: rightemptybar; }

@media screen and (max-width: 1400px){
  #page { display: grid;
  grid-template-columns: 320px 1fr 320px;
  grid-template-rows: 140px 65px 1fr 30px;
  grid-template-areas:
        "header header header"
        "leftcontainer navigation rightcontainer"
        "leftcontainer maincontainer rightcontainer"
        "footer footer footer"; }
  #rightemptybar, #leftemptybar { display:none; }
}

@media screen and (max-width: 1200px) {
  #page { display: grid;
  grid-template-columns: .3fr 1fr;
  grid-template-rows: 140px 65px 1fr 30px;
  grid-template-areas:
        "header header"
        "navigation navigation"
        "leftcontainer maincontainer"
        "footer footer"; }
  #rightemptybar, #leftemptybar, #rightcontainer { display:none; }
}