* { margin: 0; padding: 0; box-sizing: border-box; background-color: #161925; } ::selection { background-color: #00d3a7; color: #fefefe; } html, body { height: 100%; display: flex; justify-content: center; align-items: center; } .stretch { width: calc(50vw - 4px); color: #c3c7d1; margin-top: 0; } .column { flex-direction: column; } .row { display: flex; justify-content: space-between; flex-direction: row; } .border { display: flex; justify-content: center; align-items: center; width: 50vw; /* 50% of the viewport's width */ height: 50vh; /* 50% of the viewport's height */ border: 2px solid white; flex-direction: row; /* Stack children horizontaly */ justify-content: center; /* Align children to the top */ align-items: flex-start; } button { background-color: #c6262e; color: black; border: 1px solid white; cursor: pointer; margin-left: auto; } button:hover { background-color: #ed5353; } a { text-decoration: none; color: #c3c7d1; } img { width: max(min(90%, 100px), 50px); aspect-ratio: 1/1; } .folder { width: 25%; } #navbar { cursor: grab; } #navbar :active { cursor: grabbing; }