:root { --color-r1: #fc7801; --color-r1-hover: #fc7801; --color-r2: #e50033; --color-r2-hover: #e50033; --color-b1: #39a0ff; --color-b1-hover: #39a0ff; --color-b2: #e7724c; --color-b2-hover: #e7724c; --color-g1: #1967d2; --color-g1-hover: #1967d2; --color-g2: #ea6431; --color-g2-hover: #ea6431; --color-o1: #ffa500; --color-o1-hover: #ffa500; --color-o2: #ffd700; --color-o2-hover: #ffd700; } .cst-text, .cst-box { cursor: pointer; transition: all 0.3s ease 0s; } .cst-text.-link { color: var(--color-b1); font-size: 100%; text-decoration: underline; } .cst-box { display: inline-block; padding: 0em 0em 0em 0em; margin: 0em 0em 0em; background-color: var(--color-g1); color: #fff; font-size: 100%; min-height: 1.0em; text-align: center; } .cst-box>span { display: flex; justify-content: center; align-items: center; min-height: 1.0em; } .cst-text.-bold, .cst-box.-bold { font-weight: bold; } .cst-text.-size90, .cst-box.-size90 { font-size: 90%; } .cst-text.-size100, .cst-box.-size100 { font-size: 100%; } .cst-text.-size110, .cst-box.-size110 { font-size: 110%; } .cst-text.-size120, .cst-box.-size120 { font-size: 120%; } .cst-text.-size130, .cst-box.-size130 { font-size: 130%; } .cst-text.-size140, .cst-box.-size140 { font-size: 140%; } .cst-text.-size150, .cst-box.-size150 { font-size: 150%; } .cst-text.-size160, .cst-box.-size160 { font-size: 160%; } .cst-text.-size170, .cst-box.-size170 { font-size: 170%; } .cst-text.-size180, .cst-box.-size180 { font-size: 180%; } .cst-text.-size190, .cst-box.-size190 { font-size: 190%; } .cst-text.-size200, .cst-box.-size200 { font-size: 200%; } .cst-text.-color-r1 { color: var(--color-r1); } .cst-text.-color-r2 { color: var(--color-r2); } .cst-text.-color-g1 { color: var(--color-g1); } .cst-text.-color-g2 { color: var(--color-g2); } .cst-text.-color-b1 { color: var(--color-b1); } .cst-text.-color-b2 { color: var(--color-b2); } .cst-text.-color-o1 { color: var(--color-o1); } .cst-text.-color-o2 { color: var(--color-o2); } .cst-text.-hover:hover{ color: var(--color-b1-hover); } .cst-text.-hover-r1:hover { color: var(--color-r1-hover); } .cst-text.-hover-r2:hover { color: var(--color-r2-hover); } .cst-text.-hover-g1:hover { color: var(--color-g1-hover); } .cst-text.-hover-g2:hover { color: var(--color-g2-hover); } .cst-text.-hover-b1:hover { color: var(--color-b1-hover); } .cst-text.-hover-b2:hover { color: var(--color-b2-hover); } .cst-text.-hover-o1:hover { color: var(--color-o1-hover); } .cst-text.-hover-o2:hover { color: var(--color-o2-hover); } .cst-text.-left, .cst-text.-center, .cst-text.-right{ display: inline-block; width: 100%; } .cst-text.-left{ text-align: left; } .cst-text.-center{ text-align: center; } .cst-text.-right{ text-align: right; } .cst-box.-radius { border-radius: 5px; } .cst-box.-color-r1 { background-color: var(--color-r1); } .cst-box.-color-r2 { background-color: var(--color-r2); } .cst-box.-color-g1 { background-color: var(--color-g1); } .cst-box.-color-g2 { background-color: var(--color-g2); } .cst-box.-color-b1 { background-color: var(--color-b1); } .cst-box.-color-b2 { background-color: var(--color-b2); } .cst-box.-color-o1 { background-color: var(--color-o1); } .cst-box.-color-o2 { background-color: var(--color-o2); } .cst-box.-hover-4:hover { opacity: 0.4; } .cst-box.-hover-5:hover { opacity: 0.5; } .cst-box.-hover-6:hover { opacity: 0.6; } .cst-box.-hover-7:hover { opacity: 0.7; } .cst-box.-hover-8:hover { opacity: 0.8; } .cst-box.-hover-9:hover { opacity: 0.9; } .cst-box.-wp50 { min-width: 50%; } .cst-box.-wp60 { min-width: 60%; } .cst-box.-wp70 { min-width: 70%; } .cst-box.-wp80 { min-width: 80%; } .cst-box.-wp90 { min-width: 90%; } .cst-box.-wp100 { min-width: 100%; } .cst-box.-w50 { min-width: 50px; } .cst-box.-w100 { min-width: 100px; } .cst-box.-w150 { min-width: 150px; } .cst-box.-w200 { min-width: 200px; } .cst-box.-w250 { min-width: 250px; } .cst-box.-w300 { min-width: 300px; } .cst-box.-w350 { min-width: 350px; } .cst-box.-w400 { min-width: 400px; } .cst-box.-w450 { min-width: 450px; } .cst-box.-w500 { min-width: 500px; } .cst-box.-w550 { min-width: 550px; } .cst-box.-w600 { min-width: 600px; } .cst-box.-w650 { min-width: 650px; } .cst-box.-w700 { min-width: 700px; } .cst-box.-w750 { min-width: 750px; } .cst-box.-w800 { min-width: 800px; } .cst-box.-h15 { min-height: 1.5em; } .cst-box.-h15>span { min-height: 1.5em; } .cst-box.-h20 { min-height: 2em; } .cst-box.-h20>span { min-height: 2em; } .cst-box.-h25 { min-height: 2.5em; } .cst-box.-h25>span { min-height: 2.5em; } .cst-box.-h30 { min-height: 3em; } .cst-box.-h30>span { min-height: 3em; } .cst-box.-h35 { min-height: 3.5em; } .cst-box.-h35>span { min-height: 3.5em; } .cst-box.-h40 { min-height: 4em; } .cst-box.-h40>span { min-height: 4em; } .cst-box.-h45 { min-height: 4.5em; } .cst-box.-h45>span { min-height: 4.5em; } .cst-box.-h50 { min-height: 5em; } .cst-box.-h50>span { min-height: 5em; } .cst-box.-h55 { min-height: 5.5em; } .cst-box.-h55>span { min-height: 5.5em; } .cst-box.-h60 { min-height: 6em; } .cst-box.-h60>span { min-height: 6em; } .cst-box.-left, .cst-box.-center, .cst-box.-right{ display: block; max-width: max-content; } .cst-box.-left{ margin-left: 0; margin-right: auto; } .cst-box.-center{ margin-left: auto; margin-right: auto; } .cst-box.-right{ margin-left: auto; margin-right: 0; }