body { padding: 0; overflow-y: overlay; overflow-x: hidden; width: 100%; &::-webkit-scrollbar { width: 0.5rem; } &::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.025); } &::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.15); } &::-webkit-scrollbar-track:hover { background-color: rgba(0,0,0,0.05); } &::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.25); } } .page { display: flex; flex-direction: column; min-height: 100vh; max-width: 100vw; overflow-x: hidden; } #blob { position: absolute; z-index: -1; width: 75vw; min-width: 768px; top: 0; right: 0; //transform: translate(35%, -25%); path { stroke-width: 0.8; } } main { flex: 1 0 auto; width: 100%; margin: 3rem auto; padding-top: 5rem; @media (max-width: 480px) { padding-top: 3rem; } } footer { flex-shrink: 0; } section { min-height: 80vh; margin-bottom: 4rem; } .row { display: flex; flex-direction: row; margin: 0 auto; max-width: 1120px; //align-items: flex-start; &.columns-1 .column { width: 100%; } &.columns-2 .column { width: 50%; } // &.columns-3 .column { // width: 40%; // &:last-child { // width: 20% // } // } .column { padding: 0 1rem; max-width: 94vw; } @media (max-width: 480px) { flex-direction: column; align-items: center; &.s-column-reverse { flex-direction: column-reverse; } &.columns-2 .column { width: 100%; margin-bottom: 2rem; } } } .item { margin-bottom: 2rem; } .items { display: flex; flex-wrap: wrap; .item { width: 340px; margin: 0 1rem 2rem; } a.item { text-decoration: none; color: #000; &:hover { transition: all 200ms ease; transform: translateY(2px); } } } .v-center { display: flex; flex-direction: column; justify-content: center; } .s-disable { @media (max-width: 480px) { display: none; } } .l-disable { @media (min-width: 481px) { display: none; } }