| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 | 
							- .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;
 
-     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);
 
- }
 
 
  |