Please make the following code consistently formatted and commented. The punctuation, capitalization etc of the code should be consistent. Also naming terminology should be as well, and it should be super easy to understand even for beginners (but DON'T be verbose in comments. Some comments are OK, but Keep It Simple!) @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root {
 /\* Define colors \*/
 --lesbian-1: #d62e00;
 --lesbian-2: #ff9a56;
 --lesbian-3: #ffffff;
 --lesbian-4: #d362a4;
 --lesbian-5: #8a0253;

 --nonbinary-1: #fcf434;
 --nonbinary-2: #ffffff;
 --nonbinary-3: #9c59d1;
 --nonbinary-4: #2c2c2c;

 --trans-1: #5BCEFA;
 --trans-2: #F5A9B8;
 --trans-3: #FFFFFF;
 --trans-4: #F5A9B8;
 --trans-5: #5BCEFA;

 --light-color: #ccc
}

/\* animation for background color change \*/
@keyframes flag {
 0% {
 border-image-source: linear-gradient(to right,
 var(--lesbian-1), var(--lesbian-1) 20%,
 var(--lesbian-2) 20%, var(--lesbian-2) 40%,
 var(--lesbian-3) 40%, var(--lesbian-3) 60%,
 var(--lesbian-4) 60%, var(--lesbian-4) 80%,
 var(--lesbian-5) 80%, var(--lesbian-5));
 }

 23% {
 border-image-source: linear-gradient(to right,
 var(--lesbian-1), var(--lesbian-1) 20%,
 var(--lesbian-2) 20%, var(--lesbian-2) 40%,
 var(--lesbian-3) 40%, var(--lesbian-3) 60%,
 var(--lesbian-4) 60%, var(--lesbian-4) 80%,
 var(--lesbian-5) 80%, var(--lesbian-5));
 }

 33% {
 border-image-source: linear-gradient(to right,
 var(--nonbinary-1), var(--nonbinary-1) 20%,
 var(--nonbinary-2) 20%, var(--nonbinary-2) 60%,
 var(--nonbinary-3) 60%, var(--nonbinary-3) 80%,
 var(--nonbinary-4) 80%, var(--nonbinary-4));
 }

 56% {
 border-image-source: linear-gradient(to right,
 var(--nonbinary-1), var(--nonbinary-1) 20%,
 var(--nonbinary-2) 20%, var(--nonbinary-2) 60%,
 var(--nonbinary-3) 60%, var(--nonbinary-3) 80%,
 var(--nonbinary-4) 80%, var(--nonbinary-4));
 }

 66% {
 border-image-source: linear-gradient(to right,
 var(--trans-1), var(--trans-1) 20%,
 var(--trans-2) 20%, var(--trans-2) 40%,
 var(--trans-3) 40%, var(--trans-3) 60%,
 var(--trans-4) 60%, var(--trans-4) 80%,
 var(--trans-5) 80%, var(--trans-5));
 }

 90% {
 border-image-source: linear-gradient(to right,
 var(--trans-1), var(--trans-1) 20%,
 var(--trans-2) 20%, var(--trans-2) 40%,
 var(--trans-3) 40%, var(--trans-3) 60%,
 var(--trans-4) 60%, var(--trans-4) 80%,
 var(--trans-5) 80%, var(--trans-5));
 }

 100% {
 border-image-source: linear-gradient(to right,
 var(--lesbian-1), var(--lesbian-1) 20%,
 var(--lesbian-2) 20%, var(--lesbian-2) 40%,
 var(--lesbian-3) 40%, var(--lesbian-3) 60%,
 var(--lesbian-4) 60%, var(--lesbian-4) 80%,
 var(--lesbian-5) 80%, var(--lesbian-5));
 }
}

\* {
 box-sizing: border-box;
 /\* makes element size include padding and borders \*/
}

html,
body {
 font-family: 'Share Tech Mono', monospace;
 /\* apply font to whole document \*/
 margin: 0;
 /\* remove default margin \*/
 padding: 0;
 /\* remove default padding \*/
 height: 100%;
 /\* make html and body full height \*/
}

h1 {
 font-size: 5rem;
 /\* increase font size \*/
}

#content-row {
 margin-top: 35vh;
 /\* move content down \*/
}

#main-wrapper {
 display: flex;
 /\* enable flexbox layout \*/
 flex-direction: column;
 /\* set direction to vertical \*/
 min-height: 100%;
 /\* make wrapper take up full height \*/
}

#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;
 animation-name: flag;
 animation-duration: 40s;
 animation-iteration-count: infinite;
 animation-direction: normal;
}
임대 코드를 일관된 형식과 주석으로 작성하세요. 코드의 구두점, 대문자 등은 일관성이 있어야 합니다. 또한 이름 지정 용어도 일관성이 있어야 하며 초보자도 이해하기 쉬워야 합니다(단, 주석에 장황하게 설명하지 마세요. 일부 주석은 괜찮지만 간결하게 유지하세요!) @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');root { /\* 색상 정의 \*/ --lesbian-1: #d62e00; --lesbian-2: #ff9a56; --lesbian-3: #ffffff; --lesbian-4: #d362a4; --lesbian-5: #8a0253; --비 이진-1: #fcf434; --비 이진-2: #ffffff; --비 이진-3: #9c59d1; --비 이진-4: #2c2c2c; --trans-1: #5BCEFA; --trans-2: #F5A9B8; --trans-3: #FFFFFF; --trans-4: #F5A9B8; --trans-5: #5BCEFA; --밝은 색상: #ccc}/\* 배경색 변경 애니메이션 \*/키프레임 플래그 { 0% { border-이미지-소스: 선형-그라디언트(오른쪽으로, var(--lesbian-1), var(--lesbian-1) 20%, var(--lesbian-2) 20%, var(--lesbian-2) 40%, VAR(--LESBIAN-3) 40%, VAR(--LESBIAN-3) 60%, VAR(--LESBIAN-4) 60%, VAR(--LESBIAN-4) 80%, VAR(--LESBIAN-5) 80%, VAR(--LESBIAN-5)); } 23% { BORDER-이미지-소스: 선형-그라디언트(오른쪽으로, var(--lesbian-1), var(--lesbian-1) 20%, var(--lesbian-2) 20%, var(--lesbian-2) 40%, VAR(--LESBIAN-3) 40%, VAR(--LESBIAN-3) 60%, VAR(--LESBIAN-4) 60%, VAR(--LESBIAN-4) 80%, VAR(--LESBIAN-5) 80%, VAR(--LESBIAN-5)); } 33% { BORDER-이미지-소스: 선형-그라디언트(오른쪽으로, var(--nonbinary-1), var(--nonbinary-1) 20%, var(--비경사-2) 20%, var(--비경사-2) 60%, VAR(--NONBINARY-3) 60%, VAR(--NONBINARY-3) 80%, var(--nonbinary-4) 80%, var(--nonbinary-4)); } 56% { BORDER-이미지-소스: 선형-그라디언트(오른쪽으로, var(--비선형-1), var(--비선형-1) 20%, var(--비경사-2) 20%, var(--비경사-2) 60%, VAR(--NONBINARY-3) 60%, VAR(--NONBINARY-3) 80%, var(--nonbinary-4) 80%, var(--nonbinary-4)); } 66% { BORDER-이미지-소스: 선형-그라디언트(오른쪽으로, var(--trans-1), var(--trans-1) 20%, var(--trans-2) 20%, var(--trans-2) 40%, VAR(--TRANS-3) 40%, VAR(--TRANS-3) 60%, VAR(--TRANS-4) 60%, VAR(--TRANS-4) 80%, var(--trans-5) 80%, var(--trans-5)); } 90% { BORDER-이미지-소스: 선형-그라디언트(오른쪽으로, var(--trans-1), var(--trans-1) 20%, var(--trans-2) 20%, var(--trans-2) 40%, VAR(--TRANS-3) 40%, VAR(--TRANS-3) 60%, VAR(--TRANS-4) 60%, VAR(--TRANS-4) 80%, var(--trans-5) 80%, var(--trans-5)); } 100% { BORDER-이미지-소스: 선형-그라디언트(오른쪽으로, var(--lesbian-1), var(--lesbian-1) 20%, var(--lesbian-2) 20%, var(--lesbian-2) 40%, VAR(--LESBIAN-3) 40%, VAR(--LESBIAN-3) 60%, VAR(--LESBIAN-4) 60%, VAR(--LESBIAN-4) 80%, VAR(--LESBIAN-5) 80%, VAR(--LESBIAN-5)); }}\* { box-sizing: border-box; /\* 요소 크기에 패딩과 테두리를 포함시킵니다 \*/.}html,body { 글꼴 가족: 'Share Tech Mono', 모노스페이스; /\* 전체 문서에 글꼴 적용 \*/ margin: 0; /\* 기본 여백 제거 \*/ padding: 0; /\* 기본 패딩 제거 \*/ height: 100%; /\* HTML과 본문 전체 높이 \*/ 만들기}h1 { font-size: 5rem; /\* 글꼴 크기 늘리기 \*/}#content-row { MARGIN-TOP: 35VH; /\* 콘텐츠 아래로 이동 \*/}#메인 래퍼 { display: flex; /\* 플렉스박스 레이아웃 활성화 \*/ flex-direction: column; /\* 방향을 세로로 설정 \*/ min-height: 100%; /\* 래퍼가 전체 높이를 차지하도록 \*/}#main-content { flex: 1;}#메인 푸터 { 여백 상단: 0rem;}#메인 푸터 p { color: var(--light-color);}#메인 푸터 a { 텍스트 장식: 없음 색상: 상속;}#name { 표시: 인라인 블록; 글꼴 무게: 굵게; 글꼴 크기: 5.5rem; color: black; /\* 밑줄 \*/ 테두리-하단: 1rem 솔리드; border-이미지-슬라이스: 1; 애니메이션 이름: 플래그; 애니메이션 지속 시간: 40s; 애니메이션 반복 횟수: 무한; 애니메이션 방향: 일반;}