@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
/*Colours*/
:root {
  --RoseKiss: #F877A3; 
  --VibrantCoral: #FF545D; 
  --Violet: #FB95EB; 
  --PinkCarnation: #FB96CE; 
  --MayaBlue: #76BEF2; 
  --FrozenWater: #c5f4e0;
  --MidnightViolet: #242038;
  --BubblegumFizz: #F85DC3; /* rgb(248, 93, 195) */
  --spiral-font-family: 'Source Code Pro', "SFMono-Regular", Menlo, Consolas, Monaco, monospace;
}

/*Fonts*/

@font-face {
  font-family: "ComputerFont";
  src: url('../Fonts/ComputerFont/Computerfont.eot?#iefix') format('embedded-opentype'), 
	     url('../Fonts/ComputerFont/Computerfont.woff') format('woff'), 
	     url('../Fonts/ComputerFont/Computerfont.ttf') format('truetype'),
	     url('../Fonts/ComputerFont/Computerfont.svg') format('svg');
}

@font-face {
  font-family: "BytePolice";
  src: url('../Fonts/BytePolice/bytepolice.eot?#iefix') format('embedded-opentype'), 
	     url('../Fonts/BytePolice/bytepolice.woff') format('woff'), 
	     url('../Fonts/BytePolice/bytepolice.ttf') format('truetype'),
	     url('../Fonts/BytePolice/bytepolice.svg') format('svg');
}

body {
  background: linear-gradient(to top, var(--RoseKiss), var(--RoseKiss), var(--BubblegumFizz),var(--BubblegumFizz));
  background-size: cover;
  background-size: 100% 8px;
  color: white;
  font-family:BytePolice;
  text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
  letter-spacing: 0.125em;
  animation-duration: 0.01s;
  animation-name: textflicker;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  font-size: 1.5rem;
  padding-left: 2rem;
}

h1 {
  font-family:BytePolice;
  font-size: 5rem;
  padding-left: 2rem;
  
}

ul {
  list-style-type: circle;
}

#HeadingInline{
  width: 100%;
  display: inline;
  
}


@keyframes textflicker {
    from {
      text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
    }
    to {
      text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
    }
  }
  
#footer {   
   position:fixed;
   left:10px;
   bottom:0px;
   width:100%;
}

a {
  color: white;
  text-decoration: none;
}

a:visited {
  color: white;
  text-decoration: none;
}

i:hover {
  transform: rotate(10deg);
}

.playlistBlock {
  width: 20rem;
  height: 18rem;
  margin: 2px;
  padding: 1rem;
  box-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
  
  /* From https://css.glass */
  background: rgba(118, 190, 242, 0.12);
  border-radius: 2px;
  /*box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
  backdrop-filter: blur(6.3px);
  -webkit-backdrop-filter: blur(6.3px);
  border: 1px solid rgba(118, 190, 242, 1);

  
}

.playlistCovers{
  padding-top:1rem;
  margin: auto
}

.flip-card {
  width: 20rem;
  height: 18rem;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* Style the front side (fallback if image is missing) */

.flip-card-front {
  color: black;
  
  
}

/* Style the back side */
.flip-card-back {
  color: white;
  transform: rotateY(180deg);
  
}

.inThePlaylist {
  font-size:0.7rem;
  
}

#YouTubeLink, #TMTC {
  text-decoration: underline !important;
}


.wavy {
  animation-name: wavy;
  animation-duration: 1.3s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  position: relative;
  top: 0;
  left: 0;
}

#animated{
  text-align: right;
  
}

@keyframes wavy {
  0% {
    top: 0px;
  }
  50% {
    top: -15px;
  }
  100% {
    top: 0px;
  }
}