/* :3 :3 :3 


*{border: red solid 2px;}*/

body {
  background-image: url("./bg.png");
  background-color: #d0cfcf;
  
  font-size: 1.2em;
  font-family: Verdana;
  color: #2a2b29;
}

section {
  margin: 3% 10%;

  border: 40px white solid;
  border-radius: 8px;

  border-image-source: url("./tiles.png");
  border-image-slice: 40 fill;
}

p {
  text-align: center;
}

/* OwO */
.extras {display: none;}


.to-center {
  display: flex;
  
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

header, footer {
  display: flex;
  
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;

  gap: 24px;
}

/* hoverable image elements with automatic image swapping. 
   maybe doesn't work in discord's in-app browser.*/
.hoverable img:first-child {display: none;}

.hoverable:hover img:first-child {display: inline-block;}
.hoverable:hover img:last-child  {display: none;}


/* hoverable "back" hyperlink with hardcoded images. i like it. ~^~ */
#back-hover{
  width:193px;
  height:105px;

  background-image: url("i/back.png");
  background-size: cover;
}
#back-hover:hover{background-image: url("i/back-h.png");}

/* i'm gonna use these eeeeeverywhere!!! */
@keyframes rainbow-colors{
  0%{  color: #ea3a4b;}
  17%{  color: #ed7433;}
  35%{  color: #cea017;}
  49%{  color: #90b83a;}
  66%{  color: #5997cd;}
  85%{  color: #515299;}
  100%{ color: #ea3a4b;}
}
a, a:hover, a:visited {
  animation: rainbow-colors 2.7s linear infinite;
}

@keyframes serious-colors{
  0%{  color: #8e8e8b;}
  50%{  color: #4f5f6b;}
  100%{ color: #8e8e8b;}
}
.serious, .serious:hover, .serious:visited {
  animation: serious-colors 1.6s linear infinite;
}


/* mobile phone compatibility...*/
@media (width <= 621px) {
  body {background-size: 335px;}
  section {margin: 2.9% 4.3%;}
}