| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- .mode-selector {
- box-sizing: border-box;
- position: absolute;
- top: 0px;
- left: 0px;
- width: 100vw;
- height: 100vh;
- padding-top: 40px;
- padding-bottom: 40px;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
- gap: 40px;
- overflow-y: auto;
- }
- .mode-selector .selector-item {
- box-sizing: border-box;
- width: 30%;
- display: flex;
- flex-direction: column;
- align-items: center;
- border-radius: 40px;
- padding: 40px;
- border: 3px solid transparent;
- cursor: pointer;
- transition:
- border-color 0.5s,
- transform 0.5s;
- }
- @media only screen and (max-width: 800px) {
- .mode-selector .selector-item {
- width: 100%;
- max-width: 400px;
- }
- }
- .mode-selector .selector-item p {
- font-size: 24px;
- font-weight: bold;
- }
- .mode-selector .selector-item img {
- width: 100%;
- box-sizing: border-box;
- }
- .mode-selector .selector-item:hover {
- border-color: var(--font-color);
- transform: scale(1.1);
- }
|