/* CSS files add styling rules to your content */

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
}
.header {
  padding: 20px;
  text-align: center;
  background: #54a0ff;
  color: white;
  font-size: 20px;
}

ul#menu li {
  display: inline;
  width: auto;
}
#outerScroll {
  overflow: hidden;
}
/* #scrollBlogs {
    overflow: hidden;
} */

/* just let it be it works now yay nice */
#scrollBlogs:hover {
  animation-play-state: paused;
  cursor: pointer;
}

#scrollBlogs {
  /*   position: fixed; */
  /*   -moz-animation: marquee 10s linear infinite; */
  /*   -webkit-animation: marquee 10s linear infinite; */
  animation-delay: 5s;

  animation: marquee 40s linear infinite;
  /*   white-space: nowrap; */
  padding-left: 100%;
  display: inline-block;
  will-change: transform;
  width: auto;

  overflow: hidden;
  white-space: nowrap;
}

@-moz-keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@-webkit-keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes marquee {
  0% {
    /*     -moz-transform: translateX(100%); */
    /*     -webkit-transform: translateX(100%); */
    /*     transform: translateX(10); */
  }
  100% {
    /*     -moz-transform: translateX(-100%); */
    /*     -webkit-transform: translateX(-100%); */
    transform: translateX(-100%);
  }
}

#container {
  width: 600px;
  height: 500px;
  inline-size: auto;
  background-color: aliceblue;
}

/* li {
  background: #d1703c;
} */

.fade {
  transition: all 0.5s ease-in;
  /*   opacity: 0; */
  margin: 2px 0;
  max-height: 0px;
  /*   font-size:0; */
  /*   max-height: 0; */
  /*   transform-origin: top; */
  /*   transform: scaleY(0);     */
  overflow: hidden;
}
.item {
  padding-left: 1em;
  padding-right: 1em;
}
.item:hover {
  color: blue;
}

.show {
  color: black;
  max-height: 1200px;
  opacity: 1;
  padding: 0.25s;
  /*     height:200px; */

  /*   transform: scaleY(1);     */
}

h1 {
  color: #767676;
  font-family: monospace;
  font-size: 18px;
}

.center {
  text-align: center;
}

.column {
  float: center;
  width: 50%;
  border-radius: 13px;
  margin: 10px;
}

.column2 {
  float: center;
  width: 100%;
  margin: 5px;
  border-radius: 5px;
}

/* #feed ul {
  height: 270px;
} */
.row {
  display: flex;
}

.coolfont {
  font-family: "Baloo Thambi 2", cursive;
}

.greengrad {
  background-image: linear-gradient(#40e883, #22a28c);
}

.purplegrad {
  background-image: linear-gradient(#f44872, #5b72f1);
}

.orangegrad {
  background-image: linear-gradient(#fd642a, #e14283);
}

.whiteback {
  background-color: white;
}

.left20 {
  margin-left: 20px;
  float: left;
  display: inline-block;
}

.flex {
  display: flex;
}

#noleft {
  margin-left: 0px;
}

.white {
  color: white;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    border-radius: 1px;
    margin: 1px;
    float: center;
  }
}

#center {
  text-align: center;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
img {
  vertical-align: middle;
}
/* #e4e4e4; */

#leftaligned {
  text-align: left;
}

.centerhelper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.centered {
  font-size: 31px;
  transform: translate(-50%, -50%) translate(0, 120px);
  top: 50%;
  position: fixed;
  /* margin: auto 0; */
  /* display: inline-block; */
  /* text-align: center; */
  /* padding-left: initial; */
  /* margin: 0 auto; */
  left: 50%;
  /* text-shadow: 3px 18px 20px black; */
  /* background-color: white; */
}

#allComments {
  backgroundcolor: #f08e8d;
}

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s;
}

@-webkit-keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 0px;
    opacity: 1;
  }
}

@keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

#myDiv {
  display: none;
}

label {
  display: block;
  font: 1rem "Fira Sans", sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

input[type="text"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  font-size: 15px;
}

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  padding: 20px;
  width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: "\00bb";
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 15px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #ffffff;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4caf50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4caf50;
  cursor: pointer;
}
/*
     FILE ARCHIVED ON 20:41:43 Jul 04, 2025 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 02:38:23 Aug 20, 2025.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.844
  exclusion.robots: 0.027
  exclusion.robots.policy: 0.011
  esindex: 0.024
  cdx.remote: 65.249
  LoadShardBlock: 78.726 (3)
  PetaboxLoader3.datanode: 132.054 (5)
  load_resource: 364.097
  PetaboxLoader3.resolve: 269.774
  loaddict: 60.621
*/