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     background-color: bisque;
  23     color: black;
  24 }
  25
  26 .blog-title {
  27     flex: 1;
  28 }
  29
  30 .blog-img {
  31     padding: 10px;
  32     display: block;
  33     margin: 0 auto;
  34     max-width: 250px;
  35 }
  36
  37 .blog-img-lrg {
  38     padding: 10px;
  39     display: block;
  40     margin: 0 auto;
  41     max-width: 600px;
  42 }
  43
  44 .container {
  45     padding-top: 10px;
  46     padding-bottom: 10px;
  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 .embed-links {
  70     width: 100%;
  71     height: 100px;
  72     display: block;
  73     margin: 0 auto;
  74     border: 0;
  75 }
  76
  77 .footer {
  78     max-width: 800px;
  79     margin: 0 auto;
  80     padding-top: 10px;
  81     background-color: antiquewhite;
  82     border-radius: 25px;
  83 }
  84
  85 .footer-container {
  86     display: flex;
  87     justify-content: center;
  88     align-items: center;
  89     padding-bottom: 10px;
  90 }
  91
  92 .footer-entry {
  93     display: inline-block;
  94     padding-left: 5px;
  95     padding-right: 5px;
  96 }
  97
  98 .header {
  99     max-width: 1000px;
 100     margin: 0 auto;
 101 }
 102
 103 .heading {
 104     color: dimgray;
 105 }
 106
 107 .icon {
 108     width: 48px;
 109 }
 110
 111 .indented {
 112     margin-left: 15px;
 113 }
 114
 115 .links{
 116     max-width: 800px;
 117     margin: 0 auto;
 118     padding-top: 10px;
 119     background-color:blanchedalmond;
 120     border-radius: 25px;
 121 }
 122
 123 .links-container{
 124     display:flex;
 125     justify-content: center;
 126     align-items: center;
 127     padding-bottom: 10px;
 128 }
 129
 130 .links-entry{
 131     display: inline-block;
 132     margin-left: 5px;
 133     margin-right: 5px;
 134 }
 135
 136 .main {
 137     max-width: 800px;
 138     margin: 0 auto;
 139     padding: 20px;
 140     background-color: beige;
 141     border-radius: 25px;
 142 }
 143
 144 .marquee-heading {
 145     color: crimson
 146 }
 147
 148 p {
 149     margin-bottom: 10px;
 150 }
 151
 152 .title-block {
 153     display: flex;
 154     padding-top: 5px;
 155     padding-bottom: 5px;
 156 }
 157
 158 ul {
 159     margin-top: 10px;
 160     margin-left: 25px;
 161     margin-right: 25px;
 162     margin-bottom: 10px;
 163 }
 164
 165 .video-embed{
 166     max-width: 672px;
 167     max-height:378px;
 168     display: block;
 169     margin: 0 auto;
 170     padding-top: 10px;
 171     padding-bottom: 10px;
 172 }
 173
 174 @keyframes pan {
 175     from{
 176         left: 0%;
 177     }
 178
 179     to{
 180         right: 100%;
 181     }
 182 }
 183
 184 .whole-site{
 185     background-image: url("img/hearts2.png");
 186     background-size: 10%;
 187     animation: pan 180s linear infinite;
 188 }