.vanilla-size {
  min-width: 280px;
}

/* hoverable hyperlinks with hardcoded images. i like these. ~^~ */
#art-hover{
  width:156px;
  height:105px;

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

#thoughts-hover{
  width:281px;
  height:105px;

  background-image: url("i/thoughts.png");
  background-size: contain;
  background-repeat: no-repeat;
}
#thoughts-hover:hover{background-image: url("i/thoughts-h.png");}

#mee-hover{
  width:156px;
  height:105px;

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

/* cookies joke. */
.cookie-banner {
  display: none;
  color: #2a2b29;

  position: fixed;
  bottom: 40px;
  left: 10%;
  right: 10%;
  width: 80%;
  padding: 5px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);

  animation: rainbow-colors-bg 17s linear infinite;
}
@keyframes rainbow-colors-bg{
  0%{  background-color: #ea3a4b;}
  17%{  background-color: #f1854c;}
  33%{  background-color: #ebe180;}
  51%{  background-color: #98c240;}
  67%{  background-color: #5997cd;}
  85%{  background-color: #515299;}
  100%{ background-color: #ea3a4b;}
}

.cookie-banner p {
  width: 60%;
}

.cookie-close, .cookie-close-gay {
  width: 80px;
  height: 36px;
  margin: 0px 8px;
  
  border: none;
  color: #2a2b29;
  border-radius: 2px;
  cursor: pointer;
}
.cookie-close:hover, .cookie-close-gay:hover {
  background-image: linear-gradient(to right, #ea3a4b, #f1854c, #ebe180, #98c240, #5997cd, #515299);
}