/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: pink;
  color: black;
  font-family: Courier;
  text-align: center;
  width: 75%;
  margin:auto;
}
h1 {
  font-family: Garamond;
}
ul {
    text-align: center;
    list-style-position: inside;
    padding-right: 1.5%;
}
.conTent {
  border-style: double;
  border-color: yellow;
  border-width: thick;
}
/* I'm saying "Dude! Where's My Scene" */
.portrait {
  display: block;
  position: relative;
}
.zoeOxymoron {
  position: relative;
}
@keyframes dude {
  0% {transform: rotate(25deg);}
  100% {transform: rotate(45deg);}
}
.dudeSpeech {
  position: absolute;
  left: 47%;
  top:-7%;
  /*transform: rotate(25deg);*/
  animation-name: dude;
  animation-duration:0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: steps(2);
}
/* Music page*/
.music {
  display:flex;
  flex-wrap:wrap;
  align-items: center;
  justify-content: space-evenly;
  
}

.music h1 {
  font-size:large;
}

.music a {
  padding:10px;
}

/* Music flipcards */

.albumFlip {
  max-width:300px;
  max-height:300px;
}

.flipCard {
  background-color: transparent;
  width:300px;
  height:300px;
  /*border: 1px solid #f1f1f1; use this to add a border, it doesn't move with the card*/
  perspective: 1000px; /* 3D effect */
}

/* Necessary to position front + back*/
.flipCardInner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/*flips the card when you mouse over the box */
.flipCard:hover .flipCardInner {
  transform:rotateY(180deg);
}

/* Positon front + back */

.flipCardFront, .flipCardBack {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /*safari*/
  backface-visibility: hidden;
}

/* Style front (if image is missing) */

.flipCardFront {
  background-color: #bbb;
  color: black;
}

/* style the back */

.flipCardBack {
  background-color: green;
  color: white;
  transform: rotateY(180deg);
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:7px;
}
/*Buttons for the music flipcards*/
.musicLink {
  text-decoration:none;
  background-color:white;
  color:#ff3b80;
  border-radius:7px;
  border-style:outset;
}
.musicLink:visited {
  color:#ff3b80;
}
.musicLink:hover {
  background-color:#E5E5E5;
  border-style:inset;
}