自分用にわかりやすくやっているので、人によってわからりずらいところがあります。
color
/*文字の色を指定*/
color: white;
/*背景色を指定*/
background-color: #ffffff;
font
/*文字のフォントを指定('Arial'が無ければsans-serif*/
font-family: 'Arial', sans-serif;
/*文字の大きさを指定*/
font-size: 40px;
/*文字の太さを指定*/
font-weight: bold;
position , size
/*上から20px*/
top: 20px;
/*左から20px*/
left: 20px;
/*右から20px*/
right: 20px;
/*横幅*/
width: 80px;
/*高さ*/
height: 80px;
/*最小の横幅*/
min-width: 36px;
/*最小の高さ*/
min-height: 36px;
未振り分け
/*文字に影*/
text-shadow: 1px 1px 2px black;
/*要素の箱からはみ出した部分をどう扱うか*/
overflow: hidden;
/*要素の表示方法
(none:要素を非表示 / flex:要素を横並びや縦並びに柔軟に配置)*/
display: none; /*none : flex*/
/*要素の配置方法を指定 (absoluteは、親要素やページ全体を
基準にして、topやleftで指定した位置に絶対的に配置
浮いているようなイメージ)*/
position: absolute;
/*要素と要素の間の隙間*/
gap: 10px;
/*要素を縦方向に並べるとき、どこに揃えるか
flex-startは上揃え*/
align-items: flex-start;
/*要素の角の丸み*/
border-radius: 12px;
/**/
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
/*要素を横方向に並べるとき、どこに揃えるか
centerは中央揃え*/
justify-content: center;
/*グリッドレイアウトの列を定義
自動調整サイズの列を2つ*/
grid-template-columns: repeat(2, auto);
/*要素の内側の余白*/
padding: 8px 12px;
/*要素の外側の右側の余白*/
margin-right: 10px;
/**/
object-fit: cover;
/**/
user-select: none;
/**/
backdrop-filter: blur(5px);