mode-selector.css 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  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. cursor: pointer;
  28. transition:
  29. border-color 0.5s,
  30. transform 0.5s;
  31. }
  32. @media only screen and (max-width: 800px) {
  33. .mode-selector .selector-item {
  34. width: 100%;
  35. max-width: 400px;
  36. }
  37. }
  38. .mode-selector .selector-item p {
  39. font-size: 24px;
  40. font-weight: bold;
  41. }
  42. .mode-selector .selector-item img {
  43. width: 100%;
  44. box-sizing: border-box;
  45. }
  46. .mode-selector .selector-item:hover {
  47. border-color: var(--font-color);
  48. transform: scale(1.1);
  49. }