:root {
  --bg-color:#191a21;
  --border-color: #f6cfca;
  --subtitle-color:#ffe8e5;
  --link-color:#e0215a;
  --roseWhite: #ffe8e5;
  --rose1: #f6cfca;	
  --rose2:#eabfb9;
  --rose-dark:#b86b77;
  --rose3: #e5a298;
  --shadow: rgb(3, 3, 3);
  --purple: #d0b6e3;
}

@font-face {
  font-family: 'CoffeCake'; /*a name to be used later*/
  src: url('fonts/coffecake/CoffeCake.ttf'); /*URL to font*/
}

html, body {
  padding:0;
  color: var(--roseWhite);
  background-attachment:fixed;
  background-color: #191a21 ;
  /*max-width: 700px;*/
  margin: auto;
}
body a {
  color:var(--link-color);

}
nav{
  width:100%;
  top:0;
  position: fixed;
  transition: 0.3s;
  background-color: var(--bg-color);
  z-index: 7;
}
header {
  font-family:'Courier New', Courier, monospace ;
  font-weight: 500;
  height:30vh;
  display: flex;
  justify-content: center;
  background:linear-gradient(60deg,rgb(233, 99, 157) 0%, rgba(148,187,233,1) 100%);
  margin-bottom: 40px;
  margin-top:20px;
}
.header-text{
  position:absolute;
  color:var(--roseWhite);
  margin-top: 10vh;
  font-size: 90px ; 
  text-align: center;
  text-decoration: underline;
  transition: 0.5s;
  animation-name: float;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

header > p{
  position: absolute;
  color:rgba(148,187,233,1);
  font-size: 30px ; 
  margin-top: 10vh;
}



.flex {
  display:flex;
  justify-content: center;
}


.nowPlaying {
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color:var(--bg-color);
  width:auto;
  max-width:400px;
  text-align: center;
  height:auto;
  border-left:1px solid var(--border-color);
  position:absolute;
  right:2%;
  top: 150px;
  /*box-shadow: 10px 10px 5px rgb(3, 3, 3);*/
  padding-left: 10px;
}
.nowPlaying ul{
  text-align: left;
}



article {
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /*border:1px solid var(--border-color);*/
  border: 1px solid;
  border-image-source:linear-gradient(to right,rgb(233, 99, 157) 0%, rgba(148,187,233,1) 100%); 
  border-image-slice: 1;
  box-shadow: 10px 10px 5px rgb(3, 3, 3);
  max-width:800px;
  margin:20px;
  
  transition: 0.3s;
}

.subtitle {

  /*color:var(--subtitle-color);
    font-family:CoffeCake ;
*/  
  font-size:20px;
  font-weight: 600;
  border-image-source:linear-gradient(to right, rgba(238,174,202,1) 0%,rgb(233, 99, 157) 30%, rgba(148,187,233,1) 100%); 
  border-image-slice: 1;
  border-bottom:1px solid /*var(--subtitle-color)*/;
  margin-left:10px;
  margin-right:10px;
  text-align:right;
  padding-top:20px;
}
/*
h1, h2, h3{
  font-family:CoffeCake ;

}
*/
article > p, h1, h2, h3, h4, a , em{
    padding:10px;
    padding-left:20px;
}
article:hover{
  box-shadow: 15px 15px 5px rgb(3, 3, 3);
  transform: scale(0.99);

}

main {
  /*margin-top:-21px;*/
  left: 150px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 18px;
}
main > a{
  font-size: medium;
}

footer {
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  font-size:15px;
  margin-top:20px;
  height: 15vh;

}


ul.pixelbullets {
    list-style-image: url("gifs/star51.gif");
    
  }
  

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.duckie{
  transition:0.3s;
  padding: 0px;
}
.duckie:hover{
  transform: scale(0.7);

}

@keyframes float {
  0% { transform: translate(0,  0px); }
  50%  { transform: translateY(15px); }
  100%   { transform: translateY(-0px); }    
}


a:hover{
  color: #218ae0;
  
}


.divider{
  display: flex;
  height: 45px;
  background-image:url('dividers/3.png' );
  background-repeat: repeat-x;
  background-size:600px;


}

button{
  /*font-family:CoffeCake ;*/
  cursor: pointer;
  border-radius: 5px;
  font-size: 18px;
  font-weight:bolder;
  padding: 10px 14px;
  width:150px;
  border: none;
  background-color: transparent;
  color: var(--roseWhite);

}

button:hover{
  background-color: #202024;
}
nav > button{
  width:130px;
  border-radius: 5%;
  margin-left: 20px;
  margin-top: 10px;
  transition:0.3s;  
  background: transparent;
}


nav > button:hover{
  transform: translateZ(0) rotate(-5deg) translate(5px, 0px);
  background-color: #323238;
  

}

.foot-text{
  padding-top: 20px;
}

hr{
  width:60%;
  border:#218ae0;
}

mark{
  background-color: #e0215a;
}
.icon{
  filter: invert(1);
  height:20px;
}