html {
  height:                      100%;
  width:                       100%;
  }

body {
  box-sizing:                  border-box;
  background-color:            ivory;
  display:                     inline-block;
  width:                       100%;
  height:                      auto;
  margin:                      0px auto;
  border:                      0px solid green;
  padding-right:               20px;
  }

.main-page {
  box-sizing:                  border-box;
  font-family:                 verdana;
  font-family:                 helvetica;
  background-color:            ivory;
  display:                     inline-block;
  height:                      100%;
  margin:                      0px;
  padding:                     0px;
  }

.election-info {
  display:                     inline-block;
  padding:                     5px;
  height:                      100%;
  width:                       100%;
  margin:                      0px;
  background-color:            ivory;
  }

.action-plan {
  display:                     inline-block;
  max-width:                   47%;
  min-width:                   47%;
  float:                       left;
  font-family:                 "Courier New", Courier, monospace;
  font-weight:                 bold;
  margin-bottom:               10px;
  margin-right:                10px;
  border:                      2px solid black;
  padding:                     5px;
  border-radius:               10px;
  }

.narrative {
  display:                     inline-block;
  border:                      0px solid white;
  height:                      auto;
  width:                       auto;
  font-style:                  italic;
  font-size:                   1.2em;
  background-color:            transparent;
  color:                       black;
  padding:                     50px;
  font-weight:                 550;
  }

.button {
  color:                       white; 
  display:                     inline-block;
  fload:                       left;
  font-family:                 helvetica;
  font-weight:                 bold;
  background-color:            blue;
  border-radius:               8px; 
  width:                       200px; 
  cursor:                      pointer;
  padding:                     10px;
  margin-bottom:               20px;
  }

.header {
  width:                       auto; 
  border:                      2px solid black; 
  border-radius:               8px;
  text-align:                  center;
  padding:                     5px;
  margin-bottom:               5px;
  color:                       white;
  background-color:            black;
  font-family:                 helvetica;
  font-weight:                 bold;
  font-size:                   1.8em;
  }

.main-header {
  width:                       auto; 
  border:                      2px solid black; 
  border-radius:               8px;
  text-align:                  center;
  padding:                     5px;
  margin-bottom:               5px;
  margin-right:                5px;
  color:                       white;
  background-color:            black;
  font-family:                 helvetica;
  font-weight:                 bold;
  font-size:                   1.8em;
  }

.item {
  white-space:                 pre;
  font-family:                 monospace;
  padding:                     0px;
  margin:                      0px;
  }

.normal {
  white-space:                 normal;
  word-wrap:                   normal;
  font-family:                 monospace;
  padding:                     0px;
  margin:                      0px;
  }

.video-container {
  position:                    relative;
  padding-bottom:              56.25%; /* 16:9 */
  height:                      0;
  }

.video-container iframe {
  position:                    absolute;
  top:                         0;
  left:                        0;
  width:                       100%;
  height:                      100%;
  }

.demo-wrap {
  overflow: hidden;
  position: relative;
  }

.demo-bg {
  position:                    absolute;
  opacity:                     0.3;
  top:                         0px;
  left:                        35%;
  width:                       30%;
  height:                      auto;
  border:                      0px solid red;
  }

.demo-content {
  position:                    relative;
  }

.bigger {
   font-size:                  1.4em;
   text-align:                 center;
   padding:                    0px;
   padding-top:                10px;
   margin:                     0px;
   }


.share-buttons {
   display: flex;
   gap: 10px;
   }

.share-btn {
   padding:         10px 20px;
   border:          none;
   cursor:          pointer;
   font-size:       1em;
   font-weight:     bold;
   border-radius:   5px;
   transition:      background-color 0.3s;
   }

#facebook-share {
  background-color: #3b5998;
  color: white;
  }

#facebook-share:hover {
  background-color: #2d4373;
  }

.fb-share-button {
  opacity: 1;
  transform:         scale(2.1);
  transform-origin:  top left;
  margin-bottom:     15px;
  }

@media only screen and (max-width: 1600px) {
.demo-bg {
  top:                         50px;
  left:                        35%;
  width:                       30%;
  border:                      0px solid red;
  }
}

@media only screen and (max-width: 1400px) {
.demo-bg {
  top:                         70px;
  border:                      0px solid pink;
  }


@media only screen and (max-width: 1280px) {
.demo-bg {
  top:                         80px;
  border:                      0px solid purple;
  }

.datelist {
  font-size:                  .9em;
  margin:                     0px;
  padding:                    0px;
  }
}

@media only screen and (max-width: 1000px) {
.demo-bg {
  top:                         90px;
  left:                        25%;
  width:                       50%;
  border:                      0px solid green;
  }

.bigger {
  font-size:                  1.2em;
  color:                      black;
  }

.datelist {
  font-size:                  .7em;
  margin:                     0px;
  padding:                    0px;
  }

}

@media only screen and (max-width: 840px) {
.action-plan {
  max-width:                 100%;
  width:                     100%;
  }
.bigger {
  color:                      black;
  }
.main-header {
  width:                     100%;
  }
}

@media only screen and (max-width: 768px) {
.demo-bg {
  top:                         120px;
  left:                        15%;
  width:                       70%;
  border:                      0px solid green;
  }
}

@media only screen and (max-width: 600px) {

.demo-bg {
  top:                         120px;
  left:                        15%;
  width:                       70%;
  border:                      0px solid red;
  }

.narrative {
  font-size:                   0.9em;
  padding:                     15px;
  }
.main-page {
  background-size:             150%;
  }
.main-header {
  font-size:                   1.4em;
  width:                       100%;
  padding:                     2px;
  }
.header {
  font-size:                   1.4em;
  width:                       auto;
  }
.action-plan {
  color:                       black;
  max-width:                   100%;
  width:                       100%;
  padding:                     4px;
  }

}

@media only screen and (max-width: 400px) {
.bigger {
   font-size:                  1.4em;
   text-align:                 center;
   padding:                    0px;
   padding-top:                10px;
   margin:                     0px;
   }

.action-plan {
  color:                       black;
  font-size:                   0.9em;
  }


.narrative {
  font-size:                   0.9em;
  padding:                     15px;
  }
}