style.css 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. a:link {
  2. color:hotpink;
  3. }
  4. a:visited {
  5. color:#b705ff;
  6. }
  7. a:hover {
  8. color:#f500ff;
  9. }
  10. body{
  11. background-color:#121212;
  12. color:#0A889B;
  13. margin:1em auto;
  14. max-width:40em;
  15. padding:0 .62em;
  16. font:1.2em/1.62em sans-serif;
  17. }
  18. h1,h2,h3 {
  19. line-height:1.2em;
  20. color:#0068ff;
  21. }
  22. #side {
  23. padding-top: 60px;
  24. height: 100%;
  25. width: 0;
  26. position: fixed;
  27. top: 0;
  28. left: 0;
  29. background-color:#121212;
  30. z-index: 1;
  31. overflow-x: hidden;
  32. opacity:0.9;
  33. transition: 0.4s;
  34. }
  35. #side a {
  36. padding: 8px 8px 8px 32px;
  37. text-decoration: none;
  38. font-size: 20px;
  39. color:#0068ff;
  40. display: block;
  41. transition: 0.3s
  42. }
  43. #side a:hover, .offcanvas a:focus{
  44. color: #f1f1f1;
  45. }
  46. #canvas {
  47. position: fixed;
  48. background-color:#000;
  49. top: 0;
  50. left: 0;
  51. bottom: 0;
  52. right: 0;
  53. width: 100%;
  54. height: 100%;
  55. }
  56. #show {
  57. left: 10px;
  58. z-index: 2;
  59. position: fixed;
  60. top:10px;
  61. background-color: #b705ff;
  62. opacity:0.4;
  63. border: none;
  64. color: white;
  65. padding: 10px 26px;
  66. text-align: center;
  67. text-decoration: none;
  68. display: inline-block;
  69. font-size: 16px;
  70. transition: 0.3s
  71. }
  72. #show:hover {
  73. opacity:1.0;
  74. }