write a similar styling for a periodic table from the style below. update component if need
@font-face {
 font-family: Phenomena;
 src:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/Phenomena-Regular.otf);
 font-weight: normal;
}

@font-face {
 font-family: Phenomena;
 src:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/Phenomena-Bold.otf);
 font-weight: bold;
}
\* {
 box-sizing: border-box;
}
body {
 font-family: Phenomena, script;
 margin: 5vw;
 background: #111;
 color: #000;
 counter-reset: element;
}
.periodic-table {
 display: grid;
 grid-column-gap: .5vw;
 grid-row-gap: .5vw;
 padding-left: 0;
}
.periodic-table > li {
 display: flex;
 position: relative;
 justify-content: center;
 align-items: center;
 height: 4.5vw;
 border-radius: 3px;
 background: rgb(91, 194, 234);
 font-weight: bold;
}
.periodic-table > li:before {
 counter-increment: element; 
 content: counter(element);
 position: absolute;
 bottom: 5px;
 left: 6px;
 font-size: .9vw;
 font-weight: lighter;
}
.periodic-table > li abbr {
 font-size: 2.5vw;
}
#helium {
 grid-column-start: 18;
}
#boron, #aluminium {
 grid-column-start: 13;
}
#cerium, #thorium {
 grid-column-start: 4;
}
.periodic-table > li:nth-child(n+58):nth-last-child(n+48) {
 grid-row-start: 8;
}
.periodic-table > li:nth-child(n+90):nth-last-child(n+16) {
 grid-row-start: 9;
}
.periodic-table:before {
 display: block;
 content: '';
 grid-row: 8 / 10;
 grid-column: 1 / 4;
}
.periodic-table .noble-gas {
 background: rgb(234, 218, 36);
}
.periodic-table .diatomic-nonmetal {
 background: rgb(234, 179, 127);
}
.periodic-table .alkali {
 background: hsl(326, 52%, 84%);
}
.periodic-table .hydrogen {
 background: rgb(163, 199, 210); 
}
.periodic-table .alkaline {
 background: hsl(120, 52%, 84%);
}
.periodic-table .unknown {
 background: hsl(210, 2%, 73%);
}
.periodic-table .lanthanide {
 background: hsl(183, 54%, 84%);
}
.periodic-table .actinide {
 background: hsl(82, 60%, 56%); 
}
.periodic-table .metalloid {
 background: hsl(142, 60%, 56%); 
}
.periodic-table .polyatomic-non-metal {
 background: hsl(358, 60%, 56%); 
}

@media all and (max-width: 1100px) {
 #helium, #boron, #aluminium, #cerium, #thorium {
 grid-column-start: auto;
 }
 .periodic-table {
 grid-template-columns: 1fr 1fr 1fr;
 }
 .periodic-table > li abbr {
 font-size: 0;
 }
 .periodic-table > li {
 padding: 1rem;
 }
 .periodic-table > li abbr:after {
 content: attr(title);
 font-size: 2rem;
 }
 .periodic-table > li:before {
 font-size: 1rem;
 }
 .periodic-table > li:nth-child(n+58):nth-last-child(n+48) {
 grid-row-start: auto !important;
}
 .periodic-table > li:nth-child(n+90):nth-last-child(n+16) {
 grid-row-start: auto !important;
 }
 .periodic-table:before {
 display: none !important;
 }
}
@media all and (max-width: 750px) {
 body {
 margin: 2vw;
 }
 .periodic-table {
 grid-template-columns: 1fr 1fr;
 }
 .periodic-table > li {
 height: auto;
 font-size: 3vw;
 }
}
@media all and (max-width: 550px) {
 .periodic-table {
 grid-template-columns: 1fr;
 }
}

my component:
 import React from 'react';
import periodicTableData from '../periodicTableData.json';
import styles from '../styles/periodicTable.module.css';

interface Element {
 atomic\_number: number;
 symbol: string;
 name: string;
 atomic\_mass: number;
 electronic\_configuration: string;
 chemical\_group: string;
}

interface PeriodicTableData {
 elements: Element[];
}

const PeriodicTable: React.FC = () => {
 const periodicTable: PeriodicTableData = periodicTableData;

 return (
 
 {periodicTable.elements.map((element: Element) => (
 
 {element.atomic\_number}
 {element.symbol}
 {element.name}
 {element.atomic\_mass}
 {element.electronic\_configuration}

 ))}
 
 );
};

export default PeriodicTable;
아래 스타일에서 주기율표에 비슷한 스타일을 적용합니다. 필요한 경우 컴포넌트를 업데이트합니다.@font-face { 폰트 패밀리: Phenomena; src:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/Phenomena-Regular.otf); font-weight: normal;}@font-face { 글꼴 가족: Phenomena; src:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/Phenomena-Bold.otf); font-weight: 굵게;}\* { 상자 크기: 테두리 상자;}body { 글꼴 가족: 현상, 스크립트; 여백: 5vw; background: #111; color: #000; 카운터 리셋: 요소;}.periodic-table { 표시: 그리드; 그리드-열-간격: .5vw; 그리드-행-간격: .5vw; padding-left: 0;}.periodic-table > li { display: flex; 위치: 상대적; justify-content: center; align-items: center; 높이: 4.5vw; 테두리 반경: 3px; 배경: rgb(91, 194, 234); 글꼴 굵기: 굵게;}.periodic-table > li:before { 카운터-증가: 요소;  내용: 카운터(요소); 위치: 절대; bottom: 5px; 왼쪽: 6px; font-size: .9vw; 글꼴 무게: 더 가볍습니다;}.periodic-table > li abbr { 글꼴 크기: 2.5vw;}#헬륨 { 그리드-열-시작: 18;}#붕소, #알루미늄 { 그리드-열-시작: 13;}#세륨, #토륨 { 그리드-열-시작: 4;}.periodic-table > li:n번째-자식(n+58):n번째-마지막-자식(n+48) { 그리드-행-시작: 8;}.periodic-table > li:nth-child(n+90):nth-last-child(n+16) { grid-row-start: 9;}.periodic-table:before { 표시: 블록 content: ''; 그리드 행: 8 / 10; 그리드-열 1 / 4;}.주기율표 .noble-gas { 배경: rgb(234, 218, 36);}.주기율표 .diatomic-nonmetal { 배경: rgb(234, 179, 127);}.주기율표 .알칼리 { 배경: hsl(326, 52%, 84%);}.주기율표 .수소 { 배경: rgb(163, 199, 210); }.주기율표 .알칼리성 { 배경: hsl(120, 52%, 84%);}.주기율표 .unknown { 배경: hsl(210, 2%, 73%);}.주기율표 .란타나이드 { 배경: hsl(183, 54%, 84%);}.주기율표 .악티나이드 { 배경: hsl(82, 60%, 56%); }.periodic-table .metalloid { 배경: hsl(142, 60%, 56%); }.주기율표 .다원자-비금속 { 배경: hsl(358, 60%, 56%); }@media 모두 및 (최대 너비: 1100px) { #헬륨, #붕소, #알루미늄, #세륨, #토륨 { 그리드-열-시작: 자동; } .주기율표 { 그리드-템플릿-열: 1fr 1fr 1fr; } .periodic-table > li abbr { font-size: 0; } .periodic-table > li { padding: 1rem; } .periodic-table > li abbr:after { content: attr(title); 글꼴 크기: 2rem; } .periodic-table > li:before { 글꼴 크기: 1rem; } .periodic-table > li:n번째-child(n+58):n번째-last-child(n+48) { 그리드-행-시작: 자동 !중요;} .periodic-table > li:nth-child(n+90):nth-last-child(n+16) { grid-row-start: auto !important; } .periodic-table:before { 표시: 없음 !중요; }}@media 모두 및 (최대 너비: 750px) { body { 여백: 2vw; } .periodic-table { 그리드-템플릿-열: 1fr 1fr; } .periodic-table > li { 높이: 자동; font-size: 3vw; }}@media 모두 및 (최대 너비: 550px) { .periodic-table { 그리드-템플릿-열: 1fr; }}내 컴포넌트입니다: 'react'에서 React를 임포트합니다;'../periodicTableData.json'에서 periodicTableData를 임포트합니다;'../styles/periodicTable.module.css'에서 스타일을 임포트합니다;인터페이스 Element { atomic\_number: 숫자; 심볼: 문자열 name: 문자열 atomic\_mass: 숫자; 전자\_구성: 문자열; 화학\_그룹: 문자열;}인터페이스 PeriodicTableData { 엘리먼트: 엘리먼트[];}const PeriodicTable: React.FC = () => { const periodicTable: PeriodicTableData = periodicTableData; 반환 (  {periodicTable.elements.map((element: 엘리먼트) => (  {element.atomic\_number} {element.symbol} {element.name} {element.atomic\_mass} {element.electronic\_configuration} ))}  );};기본 주기율표 내보내기;