beans.css 891 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. body,html {
  2. color: white;
  3. background-color: brown;
  4. font: 22px serif;
  5. }
  6. .bean {
  7. width: 103px;
  8. height: 150px;
  9. position: relative;
  10. top: 20px;
  11. }
  12. header {
  13. margin-bottom: 20px;
  14. border-bottom: 2px solid;
  15. }
  16. .clearfix {
  17. clear: both;
  18. }
  19. main {
  20. max-width: 78ch;
  21. padding: 2ch;
  22. margin: auto;
  23. }
  24. h1 {
  25. font-size: 150px;
  26. display: inline;
  27. float: right;
  28. margin: 0;
  29. }
  30. a:link {
  31. font-family: monospace;
  32. color: yellow;
  33. }
  34. a:visited {
  35. color: white;
  36. }
  37. a:hover {
  38. color: yellow;
  39. }
  40. a:active {
  41. background-color: yellow;
  42. color: brown;
  43. }
  44. @media screen and (max-width: 960px) {
  45. .bean {
  46. width: 66px;
  47. height: 100px;
  48. }
  49. h1 {
  50. font-size: 100px;
  51. }
  52. }
  53. @media screen and (max-width: 640px) {
  54. .bean {
  55. width: 41px;
  56. height: 60px;
  57. }
  58. h1 {
  59. font-size: 60px;
  60. }
  61. }