style.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. html {
  2. font-size: 13px;
  3. scroll-behavior: smooth;
  4. scrollbar-width: thin;
  5. }
  6. body {
  7. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  8. margin-bottom: 60px;
  9. height: 100%;
  10. font-size: 1rem;
  11. }
  12. h4 a,
  13. p a {
  14. text-decoration: underline;
  15. color: orangered;
  16. font-weight: 500;
  17. transition: color .4s;
  18. }
  19. h4 a:hover,
  20. p a:hover {
  21. /* color: yellow; */
  22. color: blue;
  23. }
  24. .display-1 {
  25. font-weight: 800;
  26. letter-spacing: 1px;
  27. font-size: 15rem;
  28. width: 100%;
  29. text-align: right;
  30. line-height: 0.6;
  31. color: white;
  32. }
  33. .jumbotron {
  34. background-color: #303030;
  35. box-shadow: 0px 10px 10px rgba(0,0,0,0.2);
  36. padding-right: 10vw;
  37. height: 100vh;
  38. border-radius: 0px;
  39. }
  40. .org {
  41. font-size: 9rem;
  42. color: grey;
  43. }
  44. .lead {
  45. color: #fff;
  46. border-radius: 5px;
  47. padding: 10px;
  48. font-size: 1.3rem;
  49. width: 100%;
  50. text-align: right;
  51. margin-top: 50px;
  52. }
  53. #chevron {
  54. height: 10rem;
  55. font-size: 10rem;
  56. opacity: 0.5;
  57. position: absolute;
  58. bottom: 10px;
  59. margin: 0 auto;
  60. color: white;
  61. fill: white;
  62. }
  63. /* // Extra small devices (portrait phones, less than 576px) */
  64. /* // No media query since this is the default in Bootstrap */
  65. @media (max-width: 576px) {
  66. .display-1 { font-size: 10rem; }
  67. .org { font-size: 8rem; }
  68. }
  69. /* // Small devices (landscape phones, 576px and up) */
  70. @media (min-width: 576px) {
  71. html { font-size: 14px; }
  72. }
  73. /* // Medium devices (tablets, 768px and up) */
  74. @media (min-width: 768px) {
  75. html { font-size: 18px; }
  76. }
  77. /* // Large devices (desktops, 992px and up) */
  78. @media (min-width: 992px) {
  79. html { font-size: 20px; }
  80. }
  81. /* // Extra large devices (large desktops, 1200px and up) */
  82. @media (min-width: 1200px) {
  83. html { font-size: 20px; }
  84. }
  85. /*
  86. @media (max-width: 1200px) {
  87. html {
  88. font-size: 22px;
  89. }
  90. }
  91. @media (max-width: 900px) {
  92. html {
  93. font-size: 16px;
  94. } */
  95. /*
  96. .display-1 {
  97. font-size: 8rem;
  98. }
  99. .org {
  100. font-size: 6rem;
  101. }
  102. #chevron {
  103. font-size: 4rem;
  104. } */
  105. }