main.css

   1 @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
   2
   3 * {
   4     box-sizing: border-box;
   5     margin: 0;
   6     padding: 0;
   7     font-family: 'Source Code Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   8 }
   9
  10 .audio-block {
  11     display: flex;
  12     padding-top: 5px;
  13     padding-bottom: 5px;
  14 }
  15
  16 .audio-title {
  17     flex: 1;
  18 }
  19
  20 body {
  21     font-family: 'Source Code Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  22     color: black;
  23 }
  24
  25 .blog-title {
  26     flex: 1;
  27 }
  28
  29 .blog-img {
  30     padding: 10px;
  31     display: block;
  32     margin: 0 auto;
  33     max-width: 250px;
  34 }
  35
  36 .blog-img-lrg {
  37     padding: 10px;
  38     display: block;
  39     margin: 0 auto;
  40     max-width: 600px;
  41 }
  42
  43 .container {
  44     padding-top: 10px;
  45     padding-bottom: 10px;
  46     background-color:none transparent;
  47 }
  48
  49 .content {
  50     color: black;
  51 }
  52
  53 .embed-title{
  54     width: 100%;
  55     height: 50px;
  56     display: block;
  57     margin: 0 auto;
  58     border: 0;
  59 }
  60
  61 .embed-footer {
  62     width: 100%;
  63     height: 250px;
  64     display: block;
  65     margin: 0 auto;
  66     border: 0;
  67
  68 }
  69
  70 .embed-links {
  71     width: 100%;
  72     height: 100px;
  73     display: block;
  74     margin: 0 auto;
  75     border: 0;
  76 }
  77
  78 .footer {
  79     max-width: 800px;
  80     margin: 0 auto;
  81     padding-top: 10px;
  82     background-color: whitesmoke;
  83     border-radius: 25px;
  84 }
  85
  86 .footer-container {
  87     display: flex;
  88     justify-content: center;
  89     align-items: center;
  90     padding-bottom: 10px;
  91 }
  92
  93 .footer-entry {
  94     display: inline-block;
  95     padding-left: 5px;
  96     padding-right: 5px;
  97 }
  98
  99 .footnote {
 100     font-size: 11px;
 101 }
 102
 103 .header {
 104     max-width: 1000px;
 105     margin: 0 auto;
 106 }
 107
 108 .heading {
 109     color: dimgray;
 110 }
 111
 112 .icon {
 113     width: 48px;
 114 }
 115
 116 .indented {
 117     margin-left: 15px;
 118 }
 119
 120 .links{
 121     max-width: 800px;
 122     margin: 0 auto;
 123     padding-top: 10px;
 124     background-color:whitesmoke;
 125     border-radius: 25px;
 126 }
 127
 128 .links-container{
 129     display:flex;
 130     justify-content: center;
 131     align-items: center;
 132     padding-bottom: 10px;
 133 }
 134
 135 .links-entry{
 136     display: inline-block;
 137     margin-left: 5px;
 138     margin-right: 5px;
 139 }
 140
 141 .main {
 142     max-width: 800px;
 143     margin: 0 auto;
 144     padding: 20px;
 145     background-color: whitesmoke;
 146     border-radius: 25px;
 147 }
 148
 149 .marquee-heading {
 150     color: crimson
 151 }
 152
 153 p {
 154     margin-bottom: 10px;
 155 }
 156
 157 .title-block {
 158     display: flex;
 159     padding-top: 5px;
 160     padding-bottom: 5px;
 161 }
 162
 163 /* Tooltip container */
 164 .tooltip {
 165     position: relative;
 166     display: inline-block;
 167     border-bottom: 1px dotted black;
 168     /* If you want dots under the hoverable text */
 169 }
 170
 171 /* Tooltip text */
 172 .tooltip .tooltiptext {
 173     visibility: hidden;
 174     background-color: #ffa2b5;
 175     color: black;
 176     text-align: center;
 177     padding: 5px 0;
 178     border-radius: 6px;
 179
 180     /* Position the tooltip text - see examples below! */
 181     position: absolute;
 182     bottom: 100%;
 183     z-index: 1;
 184 }
 185
 186 /* Show the tooltip text when you mouse over the tooltip container */
 187 .tooltip:hover .tooltiptext {
 188     visibility: visible;
 189 }
 190
 191 ul {
 192     margin-top: 10px;
 193     margin-left: 25px;
 194     margin-right: 25px;
 195     margin-bottom: 10px;
 196 }
 197
 198 .video-embed{
 199     max-width: 672px;
 200     max-height:378px;
 201     display: block;
 202     margin: 0 auto;
 203     padding-top: 10px;
 204     padding-bottom: 10px;
 205 }
 206
 207 .whole-site{
 208     background-image: url("img/hearts2.png");
 209     background-size: 10%;
 210     background-color: #ffa2b5;
 211 }