body { min-height: 100vh; margin: 0; box-sizing: border-box; position: relative; padding-bottom: 20vh; } header { background-color: #24252a; padding: 30px 10%; display: flex; justify-content: space-around; align-items: center; align-content: center; text-decoration: none; } header h1 { margin: 0; position: relative; } header h1::before { content: " "; position: absolute; background-color: rgba(255, 255, 255, 0); transition: 1s; top: -2px; left: -2px; width: 0px; height: 0px; border: 2px solid transparent; } header h1:hover::before { animation: border_top_right 0.75s linear forwards; } header h1::after { content: " "; position: absolute; background-color: rgba(255, 255, 255, 0); transition: 1s; top: -2px; left: -2px; width: 0px; height: 0px; border: 2px solid transparent; } header h1:hover::after { animation: border_bottom_left 0.75s linear forwards; } header h1 a { color: #edf0f1; text-decoration: none; font-family: sans-serif; letter-spacing: 0px; padding: 5px; } header h1 a .word1 { color: #929395; } header h1 a .word2 { color: silver; } header h1 a .word3 { color: #edf0f1; } header ul { list-style-type: none; display: flex; justify-content: space-around; text-align: center; } header a:not(._title) { padding: 1em 2em; text-decoration: none; color: #edf0f1; font-family: "Montserrat", sans-serif; font-weight: 500; } header a:not(._title):hover { color: #24252a; background-color: #edf0f1; font-weight: 800; transition: 0.2s; } @keyframes border_top_right { 0% { width: 0; height: 0; border-top-color: white; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } 25% { width: 100%; height: 0; border-top-color: white; border-right-color: white; border-bottom-color: transparent; border-left-color: transparent; } 100% { width: 100%; height: 100%; border-top-color: white; border-right-color: white; border-bottom-color: transparent; border-left-color: transparent; } } @keyframes border_bottom_left { 0% { width: 0; height: 0; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: white; } 75% { width: 0; height: 100%; border-top-color: transparent; border-right-color: transparent; border-bottom-color: white; border-left-color: white; } 100% { width: 100%; height: 100%; border-top-color: transparent; border-right-color: transparent; border-bottom-color: white; border-left-color: white; } } footer { position: absolute; bottom: 0; right: 0; left: 0; text-align: center; background-color: #24252a; color: #edf0f1; font-family: "Montserrat", sans-serif; font-weight: 500; padding: 3vh 0; } footer a { color: white; } /*# sourceMappingURL=style_main.css.map */