/* RandomBoo – unified stylesheet  */
@font-face {
  font-family: "Comic Sans MS";
  src: url("ComicSansMS3.ttf") format("truetype");
}


body {
  font-family: "Comic Sans MS","Comic Sans",cursive;
  font-size: 100%;
  text-align: center;
  color: #000;
  background: url("paper.jpg") repeat;
  max-width: 500px;
  margin: auto;
}
@media (max-width: 768px) { body { padding: 0 10px; } }

h1,h2,p,q { font-family: inherit; }
h1 { font-size: 2.5em; }
h2 { font-size: 1.2em; }
p  { font-size: 0.875em; font-weight: bold; }
q  { font-size: 0.775em; }

a {
  font-family: "Times New Roman",Times,serif;
  font-weight: bold;
  font-size: 1.3em;
  color: #0000EE;
}
a:visited { color: #551A8B; }
a[href="https://randomboo.com/beep/"]    { color:#2057D0; }
a[href="https://randomboo.com/blog/"] { color:#567938; }
a[href="https://randomboo.com/art/"]     { color:#AD8426; }
a[href="https://randomboo.com/project/"]     { color:#000; }

@keyframes scroll-left {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes rainbow-flash {
  0%{color:red;}16%{color:orange;}33%{color:yellow;}
  50%{color:green;}66%{color:blue;}83%{color:indigo;}100%{color:violet;}
}
#green-link        { font-weight:bold; animation: rainbow-flash 2s infinite; }
#green-link:visited{ color: inherit; }


.center-img    { width: 60%; }
.responsive-img{ width: 100%; max-width: 468px; height: auto; }


table {
  width: 80%;
  margin: auto;
  border: 0px solid #000;
  border-collapse: collapse;
  text-align: left;
}
td {
  border: 0px solid #000;
  font-weight: bold;
  vertical-align: middle;
}
td.icon-cell {
  width: 0px;
  padding: 0;
  text-align: center;
}

.tg {
  color: inherit;
  font-weight: bold;
  font-size: 0.700em;
}

.hover-img img {
  display: block;
  width: 101px;
  height: 81px;
  content: url("https://randomboo.com/frame1small.png");
  transition: 0.2s;
}
.hover-img:hover img {
  content: url("https://randomboo.com/frame2small.png");
}

.image-with-text {
  text-align: center;
  width: 101px;
  margin: auto;
}



.geo-button {
  position: relative;
  width: 88px;
  height: 31px;
  display: inline-block;
  overflow: hidden;
  border-top:    2px solid #fff;
  border-left:   2px solid #fff;
  border-right:  2px solid #000;
  border-bottom: 2px solid #000;
  box-sizing: border-box;
}
.geo-button img {
  width: 100%; height: 100%;
  display: block;
  transition: transform .1s;
  position: relative;
  z-index: 1;
}
.geo-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background .1s;
  z-index: 2;
}
.geo-button:hover {
  border-top:    2px solid #000;
  border-left:   2px solid #000;
  border-right:  2px solid #fff;
  border-bottom: 2px solid #fff;
}
.geo-button:hover img        { transform: translate(-1px,-1px); }
.geo-button:hover::after     { background: rgba(0,0,0,.1); }


.gif-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.gif-container a   { flex: 0 1 auto; display: inline-block; }
.gif-container img { max-width: 100%; height: auto; display: block; }


.extra-text { margin-top: 10px; transition: all .3s ease; }
.toggle-link{
  display: block;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
  font-size: .7em;
}


.audio-player{
  display: grid;
  grid-template-rows: 6px auto;
  width: 350px;
  height: 50px;
  background: #444;
  font-family: Arial,Helvetica,sans-serif;
  font-size: .75em;
  color: #fff;
  overflow: hidden;
}
.audio-player .timeline{
  height: 6px; width: 100%;
  background: #fff;
  position: relative;
  cursor: pointer;
}
.audio-player .timeline .progress{
  height: 100%; width: 0%;
  background: coral;
  transition: .25s;
}
.audio-player .controls{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.audio-player .controls>*{
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Play / pause */
.audio-player .toggle-play.play{
  cursor: pointer;
  border: 7px solid transparent;
  border-left: 13px solid #fff;
}
.audio-player .toggle-play.pause{
  cursor: pointer;
  position: relative;
  width: 20px; height: 15px;
}
.audio-player .toggle-play.pause::before,
.audio-player .toggle-play.pause::after{
  content:""; position:absolute; top:0; width:3px; height:15px; background:#fff;
}
.audio-player .toggle-play.pause::before{ left:0; }
.audio-player .toggle-play.pause::after { right:8px; }
.audio-player .toggle-play:hover{ transform: scale(1.1); }


.audio-player .time      { display:flex; }
.audio-player .time>*    { padding: 2px; }


.audio-player .volume-container{
  position: relative;
  cursor: pointer;
  z-index: 2;
}
.audio-player .volume-button{ height: 26px; display:flex; align-items:center; }
.audio-player .volume-button .volume{ transform: scale(.7); }
.audio-player .volume-slider{
  position: absolute;
  top: 15px; left: -3px;
  width: 0; height: 15px;
  background: #fff;
  transition: .25s;
  z-index: -1;
}
.audio-player .volume-slider .volume-percentage{
  width: 75%; height: 100%; background: coral;
}
.audio-player .volume-container:hover .volume-slider{
  left: -123px; width: 120px;
}