mode-selector.css 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. .mode-selector {
  2. box-sizing: border-box;
  3. position: absolute;
  4. top: 0px;
  5. left: 0px;
  6. width: 100vw;
  7. height: 100vh;
  8. padding-top: 40px;
  9. padding-bottom: 40px;
  10. display: flex;
  11. flex-direction: row;
  12. flex-wrap: wrap;
  13. justify-content: center;
  14. align-items: center;
  15. gap: 40px;
  16. overflow-y: auto;
  17. }
  18. .mode-selector .selector-item {
  19. box-sizing: border-box;
  20. width: 30%;
  21. display: flex;
  22. flex-direction: column;
  23. align-items: center;
  24. border-radius: 40px;
  25. padding: 40px;
  26. border: 3px solid transparent;
  27. transition:
  28. border-color 0.5s,
  29. transform 0.5s;
  30. }
  31. @media only screen and (max-width: 800px) {
  32. .mode-selector .selector-item {
  33. width: 100%;
  34. max-width: 400px;
  35. }
  36. }
  37. .mode-selector .selector-item p {
  38. font-size: 24px;
  39. font-weight: bold;
  40. }
  41. .mode-selector .selector-item img {
  42. width: 100%;
  43. box-sizing: border-box;
  44. }
  45. .mode-selector .selector-item:hover {
  46. border-color: var(--font-color);
  47. transform: scale(1.1);
  48. }