/*Website color scheme: https://coolors.co/ff007f-800080-8000ff-ab0341-663399-fcb0cc */
@font-face {
  font-family:"Decoder";
  src:
    url("/style/Decoder.woff") format("woff"),
    url("/style/Decoder.woff2") format("woff2");
  font-display:fallback;
}
@font-face {
  font-family:"5x5";
  src:
    url("/style/5x5.woff") format("woff"),
    url("/style/5x5.woff2") format("woff2");
  font-display:fallback;
}
@font-face{
  font-family: "Retrocompute";
  src:
    url("/style/Retrocompute.woff") format("woff"),
    url("/style/Retrocompute.woff2") format("woff2");
  font-display:fallback;
}
:root {
  --pink:#fcb0cc;
  --rose:#ff007f;
  --purple:#800080;
  --violet:#8000FF;
  --amaranth-purple:#ab0341;
  --rebecca-purple:#663399;
  --lavender-pink:#FCB0CC;
  --bg-image:url("/images/bg/Supernova.webp");
}
body {
  background:linear-gradient(0.28turn,var(--amaranth-purple), #663399, var(--pink));
  background-image:var(--bg-image);
  background-size:cover;
  cursor:url("/images/gifs/BallMultiColor.webp"), auto !important;
  letter-spacing:-0.3px;
}
p {
  font-family:"5x5";
  font-size:21px;
  letter-spacing:1px;
  word-spacing:1px;
  color:var(--rose);
  margin-left:6px;
  text-indent:10px;
  font-weight:normal;
  text-decoration:none;
  font-style:normal;
  font-variant:normal;
  text-transform:none;
}
h1,
h2,
h3,
h4,
h5 {
  color:var(--rebecca-purple);
  margin-left:10px;
}
h1 {
  font-family:"Decoder";
}
h2,
h3,
h4,
h5 {
/*   font-family:"Copperplate"; */
  background:rgba(0,0,0,0.25);
  font-family:"5x5";
}
a:link,
a:visited {
  color:var(--rose);
  text-decoration:underline;
/*   cursor:auto; */
}
/*  a:link:active,a:visited:active{color:#FCB0CC;} */
/*https://codepen.io/sadness97/pen/PoeMYEg*/
nav ul {
  list-style-type:none;
  padding-left:0;
  display:flex;
  flex-direction:column;
}
nav ul li {
  padding-right:10px;
}
/**/
footer {
  background-color:var(--amaranth-purple);
  float:left;
}
footer samp {
  color:gold;
  font-family:"5x5";
}
.footer2 footer {
  background-color:black;
}
.footer2 footer samp {
  color:white;
  font-family:"Decoder";
}
.enter {
  color:#FFF;
  font-family:"Decoder";
  font-size:28px;
  text-align:center;
}
.enter:hover {
  font-size:30px;
  text-shadow:#FFF 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
}
.header {
  background-color:var(--amaranth-purple);
  text-align:center;
  padding:20px;
}
.sticker {
  bottom:0;
  right:0;
  position:fixed;
  margin:0 2% 2% 0;
/*   border-radius:99%; */
}
.sticker:hover {
  box-shadow:0 0 2.6px 1.3px rgba(0, 248, 248, 0.67);
  border-radius:0;
}
.sticker:active {
  transform:scale(1.14);
}
.sticker2 {
  bottom:0;
  left:0;
  position:fixed;
  margin:0 2% 2% 0;
}
.sticker3 {
  top:0;
  left:0;
  position:fixed;
  margin:0 2% 2% 0;
}
.stickerFooter {
  display:block;
  margin-left:auto;
  margin-right:auto;
  width:35%;
  position:relative;
}
.stickerFooter img {
  text-align:center;
}
/*favorite albums*/
#cssportal-grid {
  display:grid;
  grid-template-rows:repeat(2, 1fr);
  grid-template-columns:repeat(6, 1fr);
  gap:7px;
  width:150%;
}
#cssportal-grid img {
  transform:rotate(20deg);
  filter:sepia(90%);
  opacity:77%;
}
#cssportal-grid img:hover{
  transform:rotate(0deg);
  filter:sepia(0%);
  opacity:100%;
}

/*main*/
.layout {
  width:1500px;
  height:1200px;
  display:grid;
  grid-template-rows:repeat(auto-fit, 245px);
  grid-template-columns:repeat(5, 245px);
  gap:17.25px;
  justify-content:center;
}
.layout a,
a:link,
a:visited,
a:hover,
a:active {
  color:#ffffff;
  font-family:"5x5";
}
.logo {
  background-color:#7fff00;
  border-radius:30px;
}
.logo img.fox {
  height:122px;
  width:245px;
}
.bookmark {
  background:linear-gradient(to bottom, #8000ff 0%, #7fff00 100%);
  padding:40px 75px;
  opacity:50%;
}
.bookmark:hover {
  opacity: 100%;
}
.buttons {
  background-color:purple;
  border:dotted pink;
  border-radius:22.5%;
  padding:33px 33px;
}
.buttons img {
  margin:auto;
  overflow:hidden;
}
.buttons img:hover {
  border-radius:0%;
  transform:scale(1.47);
}
.blog {
  background-color:#663399;
  line-height:0px;
  text-align:center;
}
.music {
  background:linear-gradient(to bottom left, var(--amaranth-purple) 0%, #0341ab 100%);
  line-height:228.5px;
  text-align:center;
  border:2.75px solid;
  border-image-source:url("/images/gifs/cd_animado2.webp"); /*found on Gifcities*/
  border-image-width:9.5;
  border-radius:15px;
}
.internet {
  background-color:lightgray;
  background-image:url("/images/bg/Internet.webp");
  border:3.6px solid gray;
  cursor:url("/images/gifs/Computer_3.webp"),auto;
  line-height:250px;
  text-align:center;
}
.internet a{
  color:black;
}
.internet a:hover {
  color:blue;
}
.playlists {
  border:2.75px solid;
  line-height:207px;
  text-align:center;
  border-image-source:url("/images/gifs/cd_animado2.webp"); /*found on Gifcities*/
  border-image-width:10.5;
}
.playlists a:link {
  background:linear-gradient(to bottom left, var(--amaranth-purple) 0%, #0341ab 100%);
/*   color:white; */
}
.stickers {
  background-image:url("/images/bg/pppixelate.svg");
}
.stickers img:hover {
  transform:scale(1.5);
}
.validation {
  background-color:var(--lavender-pink);
  background-image:url("/images/bg/tiles/rdntsrvngBG.gif");
  border:var(--violet);
  border-radius:3%;
  border-collapse:separate;
  padding:75px 75px;
}