.recent{ margin: 0 auto; } .recent-header{ text-align: center; } .recent-list{ list-style: none; margin: 0; padding: 0; } .recent-block{ text-decoration: none; font-family: Mononoki, monospace; font-size: 1.3em; box-shadow: 4px 4px 32px rgba(0, 0, 0, 0.34); background: var(--background); border-radius: 10px; word-break: break-word; display: flex; align-items: center; align-content: center; margin: 20px 0; padding:10px 20px; width: max-content; max-width: 80vw; color: var(--cyan); transition: 0.2s; &--left{ border-bottom-left-radius: 0; border-top-left-radius: 0; &::before { content: '📜'; margin: 5px; display: flex; align-items: center; align-content: center; } margin-right: auto; &:hover, &:focus{ padding-left: 40px; } &:active{ padding-left: 0; } } &--right{ &::after { content: url("../../../src/svg/github-icon.svg"); margin: 5px; display: flex; align-items: center; align-content: center; } border-bottom-right-radius: 0; border-top-right-radius: 0; margin-left: auto; &:hover, &:focus{ padding-right: 40px; } &:active{ padding-right: 0; } } }