Please format this css code in a sensible way, and simpify it where possible. Make sure it's functionally identical, but remove unnessary lines and add some small comments where it would help to understand things. @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root {
 /\* Colors \*/
 --color-1: #d62e00;
 --color-2: #ff9a56;
 --color-3: #ffffff;
 --color-4: #d362a4;
 --color-5: #8a0253;
 --light-color: #ccc;
}

@keyframes backgroundColorPalette {
 0% {
 border-image-source: linear-gradient(
 to right,
 #d62e00,
 #d62e00 20%,
 #ff9a56 20%,
 #ff9a56 40%,
 #ffffff 40%,
 #ffffff 60%,
 #d362a4 60%,
 #d362a4 80%,
 #8a0253 80%,
 #8a0253
 );
 }
 23% {
 border-image-source: linear-gradient(
 to right,
 #d62e00,
 #d62e00 20%,
 #ff9a56 20%,
 #ff9a56 40%,
 #ffffff 40%,
 #ffffff 60%,
 #d362a4 60%,
 #d362a4 80%,
 #8a0253 80%,
 #8a0253
 );
 }
 33% {
 border-image-source: linear-gradient(
 to right,
 #fcf434,
 #fcf434 20%,
 #ffffff 20%,
 #ffffff 60%,
 #9c59d1 60%,
 #9c59d1 80%,
 #2c2c2c 80%,
 #2c2c2c
 );
 }
 56% {
 border-image-source: linear-gradient(
 to right,
 /\* #fcf434,
 #fcf434 25%,
 #ffffff 25%,
 #ffffff 50%,
 #9c59d1 50%,
 #9c59d1 75%,
 #2c2c2c 75%,
 #8a0253 \*/
 #fcf434,
 #fcf434 20%,
 #ffffff 20%,
 #ffffff 60%,
 #9c59d1 60%,
 #9c59d1 80%,
 #2c2c2c 80%,
 #2c2c2c
 );
 }
 66% {
 border-image-source: linear-gradient(
 to right,
 #5BCEFA,
 #5BCEFA 20%,
 #F5A9B8 20%,
 #F5A9B8 40%,
 #FFFFFF 40%,
 #FFFFFF 60%,
 #F5A9B8 60%,
 #F5A9B8 80%,
 #5BCEFA 80%,
 #5BCEFA
 );
 }
 90% {
 border-image-source: linear-gradient(
 to right,
 #5BCEFA,
 #5BCEFA 20%,
 #F5A9B8 20%,
 #F5A9B8 40%,
 #FFFFFF 40%,
 #FFFFFF 60%,
 #F5A9B8 60%,
 #F5A9B8 80%,
 #5BCEFA 80%,
 #5BCEFA
 );
 }
 100% {
 border-image-source: linear-gradient(
 to right,
 #d62e00,
 #d62e00 20%,
 #ff9a56 20%,
 #ff9a56 40%,
 #ffffff 40%,
 #ffffff 60%,
 #d362a4 60%,
 #d362a4 80%,
 #8a0253 80%,
 #8a0253
 );
 }
}

\* {
 box-sizing: border-box;
}
html,
body {
 font-family: 'Share Tech Mono', monospace;
 margin: 0;
 padding: 0;
 height: 100%;

}

body {
 font-family: 'Share Tech Mono', monospace;
}

h1 {
 font-size: 5rem;
}

#content-row {
 margin-top: 35vh;
}

#main-wrapper {
 display: flex;
 flex-direction: column;
 min-height: 100%;
}

#main-content {
 flex: 1;
}

#main-footer {
 margin-top: 0rem;
}
#main-footer p {
 color: var(--light-color);
}
#main-footer a {
 text-decoration: none;
 color: inherit;
}
#name {
 display: inline-block;
 font-weight: bold;
 font-size: 5.5rem;
 color: black;

 /\* Underline \*/
 border-bottom: 1rem solid;
 border-image-slice: 1;
 border-image-source: linear-gradient(
 /\* to right,
 #fcf434 0%,
 #fcf434 25%,
 #ffffff 25%,
 #ffffff 50%,
 #9c59d1 50%,
 #9c59d1 75%,
 #2c2c2c 75%,
 #2c2c2c 100%, \*/
 /\* to right,
 #fcf434,
 #fcf434 25%,
 #ffffff 25%,
 #ffffff 50%,
 #9c59d1 50%,
 #9c59d1 75%,
 #2c2c2c 75%,
 #8a0253 \*/
 );
 animation-name: backgroundColorPalette;
 animation-duration: 40s;
 animation-iteration-count: infinite;
 animation-direction:normal;
}
이 CSS 코드를 합리적인 방식으로 형식화하고 가능한 경우 단순화하세요. 기능적으로 동일한지 확인하되 불필요한 줄을 제거하고 이해에 도움이 되는 곳에 작은 주석을 추가하세요. @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');root { /\* 색상 \*/ --color-1: #d62e00; --color-2: #ff9a56; --color-3: #ffffff; --color-4: #d362a4; --color-5: #8a0253; --밝은 색상: #ccc;}키프레임 배경색 팔레트 { 0% { 테두리-이미지-소스: 선형-그라디언트( 오른쪽으로 #d62e00, #d62e00 20%, #ff9a56 20%, #ff9a56 40%, #ffffff 40%, #ffffff 60%, #D362A4 60%, #D362A4 80%, #8a0253 80%, #8a0253 ); } 23% { border-이미지-소스: 선형-그라디언트( 오른쪽으로 #d62e00, #d62e00 20%, #ff9a56 20%, #ff9a56 40%, #ffffff 40%, #ffffff 60%, #D362A4 60%, #D362A4 80%, #8a0253 80%, #8a0253 ); } 33% { border-이미지-소스: 선형-그라데이션( 오른쪽으로 #fcf434, #fcf434 20%, #ffffff 20%, #ffffff 60%, #9c59d1 60%, #9c59d1 80%, #2c2c2c 80%, #2c2c2c ); } 56% { border-이미지-소스: 선형-그라디언트( 오른쪽으로 /\* #fcf434, #fcf434 25%, #ffffff 25%, #ffffff 50%, #9c59d1 50%, #9c59d1 75%, #2C2C2C 75%, #8a0253 \*/ #fcf434, #fcf434 20%, #ffffff 20%, #ffffff 60%, #9c59d1 60%, #9c59d1 80%, #2c2c2c 80%, #2c2c2c ); } 66% { border-이미지-소스: 선형-그라디언트( 오른쪽으로 #5BCEFA, #5BCEFA 20%, #F5A9B8 20%, #F5A9B8 40%, #FFFFFF 40%, #FFFFFF 60%, #F5A9B8 60%, #F5A9B8 80%, #5BCEFA 80%, #5BCEFA ); } 90% { border-이미지-소스: 선형-그라데이션( 오른쪽으로 #5BCEFA, #5BCEFA 20%, #F5A9B8 20%, #F5A9B8 40%, #FFFFFF 40%, #FFFFFF 60%, #F5A9B8 60%, #F5A9B8 80%, #5BCEFA 80%, #5BCEFA ); } 100% { border-이미지-소스: 선형-그라데이션( 오른쪽으로 #d62e00, #d62e00 20%, #ff9a56 20%, #ff9a56 40%, #ffffff 40%, #ffffff 60%, #D362A4 60%, #D362A4 80%, #8a0253 80%, #8a0253 ); }}\* { 상자 크기: 테두리 상자;}html,body { 글꼴 가족: 'Share Tech Mono', 모노스페이스; margin: 0; padding: 0; 높이: 100%;}body { 글꼴 가족: 'Share Tech Mono', 모노스페이스;}h1 { 글꼴 크기: 5rem;}#content-row { 여백 상단: 35vh;}#메인 래퍼 { 디스플레이: 플렉스; 플렉스 방향: 열 최소 높이: 100%;}#main-content { flex: 1;}#메인 푸터 { 여백 상단: 0rem;}#메인 푸터 p { color: var(--light-color);}#메인 푸터 a { 텍스트 장식: 없음 색상: 상속;}#name { 표시: 인라인 블록; 글꼴 무게: 굵게; 글꼴 크기: 5.5rem; color: black; /\* 밑줄 \*/ 테두리-하단: 1rem 솔리드; border-이미지-슬라이스: 1; border-이미지-소스: 선형-그라디언트( /\* 오른쪽으로, #fcf434 0%, #fcf434 25%, #ffffff 25%, #ffffff 50%, #9c59d1 50%, #9c59d1 75%, #2C2C2C 75%, #2c2c2c 100%, \*// /\* 오른쪽으로, #fcf434, #fcf434 25%, #ffffff 25%, #ffffff 50%, #9c59d1 50%, #9c59d1 75%, #2C2C2C 75%, #8a0253 \*/ ); 애니메이션 이름: 배경색 팔레트; 애니메이션 지속 시간: 40s; 애니메이션 반복 횟수: 무한; 애니메이션 방향:일반;}