* { box-sizing: border-box; } /*-----------2-COL FLEX LAYOUT, SMALLER SIDEBAR, BIGGER MAIN COLUMN, FLOAT LEFT BUT CENTER IF PAGE RESIZED-----*/ /*Note: Alignment (justify-content, align-content) in top flex wrapper decides for WHOLE page -- set "center" for center, set "flex-start" for left, set "flex-end" for right.*/ .flex { display: flex; flex-flow: row wrap; justify-content: flex-start; } /*SIDEBAR*/ .sidebar { display: flex; flex-flow: column wrap; align-content: flex-start; width: fit-content; margin-top: 50px; margin-right: 50px; padding-left: 35px; padding-right: 35px; } .sidebar > div { text-align: left; margin-bottom: 10px; } /*MAIN*/ .main { max-width: 800px; height: fit-content; margin-top: 20px; position: relative; } .mainheader { max-width: 800px; z-index: 1; position:relative; } .maintext { background: #FFFFFF; height: fit-content; padding: 30px; margin-top: -15px; box-shadow: 0 1px 2px #8795a1; overflow-x:hidden; } .blankspace { height: 50px; width: auto; } .decor { z-index: 2; position: absolute; max-width: 100%; height: auto; } .decor2 { z-index: 3; position: absolute; max-width: 100%; height: auto; } .gohome { position: fixed; bottom: 10px; right: 10px; width: 200px; border: none; text-align: right; } /*------REFLOW FOR PAGE SIZE------*/ @media (max-width: 950px) { .flex { display: flex; flex-direction: column; flex-wrap: wrap; } .sidebar { flex-flow: row wrap; justify-content: center; max-width: 800px; margin-bottom: 0; margin-left: auto; margin-right: auto; height: 100px; } .sidebar > div { align-content: center; align-self: center; margin-left: 10px; margin-right: 10px; } .main { margin-top: -10px; margin-left: auto; margin-right: auto; } .maintext { padding: 20px; } .nav2 { display:none; } .blankspace { height: 150px; width: auto; } .decor2 { display:none; } }