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

body {
  background-color: lightgreen;

  /* Smoothly transition the background color */
  /*transition: background-color .5s;*/
}

.player {
  height: 95vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.details {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: 25px;
}

.track-art {
  width: 300px;
  height:300px;
  margin: 0;
  background-image: url("https://images.pexels.com/photos/262034/pexels-photo-262034.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");
  background-size: cover;
  border-radius: 15%;
}

/* This is for the text that says what track is playing out of the 
   number of tracks that is available for example Playing One of Five. */
.now-playing {
  display:none;
  font-size: 1rem;
  align-items: right;
}

.track-name {
  font-size: 25px;
}

.track-artist {
  font-size: 15px;
}

.buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.playpause-track, .prev-track, .next-track {
  padding: 25px;
  opacity: 0.8;

  /* Smoothly transition the opacity */
  transition: opacity .2s;
}

.playpause-track:hover, .prev-track:hover, .next-track:hover {
  opacity: 1.0;
}

.slider_container {
  width: 75%;
  max-width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Modify the appearance of the slider */
.seek_slider, .volume_slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 5px;
  background: white;
  opacity: .21;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

/* Modify the appearance of the slider thumb */
.seek_slider::-webkit-slider-thumb, .volume_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: white;
  cursor: pointer;
  border-radius: 50%;
}

.seek_slider:hover, .volume_slider:hover {
  opacity: 1.0;
}

.seek_slider {
  width: 60%;
}

.volume_slider {
  width: 30%;
}

.current-time, .total-duration {
  padding: 10px;
}

i.fa-volume-down, i.fa-volume-up {
  padding: 10px;
}

i.fa-play-circle, i.fa-pause-circle, i.fa-step-forward, i.fa-step-backward {
  cursor: pointer;
}
.wrapper{
  width: 1000px;
  margin: 0 auto;
}


/* May not need, I'll keep for now though in case i do later on 6/13/21
.dropdown-timer a:hover {
  background-color: white;
  color: #fff 
}
*/
.left-timer:hover .dropdown-timer {
  display: block;
}
.left-timer:hover .timer-button {
  background-color: transparent;
}

/* ==========================================================================
   #POMODORO APP STYLES
   ========================================================================== */

/**
 *
 * Inheriting box sizing slightly better best-practice
 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 *
 */

 html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

:root {
  --pomodoro: hsl(223, 25%, 40%);
  --shortBreak: hsl(48, 23%, 40%);
  --longBreak: hsl(105, 16%, 40%);
}

body {
  color:white;
background-color: black;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  user-select: none;
}




progress::-webkit-progress-bar {
 background-color: rgba(0, 0, 0, 0.1);;
 
}

progress::-webkit-progress-value {
  background-color: #fff;
}
/* Inside of dropdown timer */
progress {
  border-radius: 2px;
  width: 100%;
  height: 12px;
  position: fixed;
  top: 0;
}
/* Inside of dropdown timer */
.left-timer {
  position: absolute;
  display: inline-block;
}
/* Inside of dropdown timer */
.dropdown-timer {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  font-size: 60px;   /* This changed how close together my pomo & break buttons were */
}
/* Inside of dropdown timer */
.timer {
  position: absolute;
  top: 0%;
  left: 50%;
  color: white;
  transform: translate(-42%, -20%);
  padding: 25px;
  text-align: center;
  background-color: white;
}

/* Inside of dropdown timer */
.clock {
  margin-top: 60px;
  margin-bottom: 0px;
  font-size: 50px;
  line-height: 1;
  display: center;
  align-items: center;
  font-family: arial, sans-serif;
  color: black;
  
}

/* Inside of dropdown timer */
.mode-button {
  transform: translate(0%, 140%);
  font-size: 26px;
  height: 38px;
  cursor: pointer;
  box-shadow: none;
  color:white;
  border: 2px solid transparent;
  margin: 0px;
  border-radius: 10px;

  background: black;
}

.mode-button.active {
  border-color:black;
}

.main-button {
  cursor: pointer;
  box-shadow: rgb(235, 235, 235) 0px 6px 0px;
  font-size: 18px;
  height: 35px;     
  text-transform: uppercase;
  color: hsl(175, 26%, 41%);
  font-weight: bold;
  width: 200px;
  background-color: black;
  border-width: initial;
  border-style: none;
  margin: 20px 0px 0px;
  padding: 0px 0px;
  border-radius: 0px;
  transition: color 0.5s ease-in-out 0s;
}

button:focus, button:active {
  outline: none;
}

.main-button.active {
  
  box-shadow: none;
  outline: none;
}

.hidden {
  display: none;
}

@media screen and (max-width: 550px) {
  .clock {
    font-size: 8rem;
  }
}

@media screen and (max-width: 600px) {
  .player {
    height: 85vh;
  }
}
@media screen and (max-width: 750px) {
  .track-art {
    height: 250px;
    width: 250px;
  }
@media screen and (max-width: 600px) {
  .track-art {
    height: 200px;
    width: 200px;
  }
 
 
}
}
li {
  display: list-item;
  list-style-position: inside;
}
.song-list-header {
  font-style: italic;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  display: grid;
  /* grid-template-columns:auto auto auto auto; */
  grid-template-columns:5% 40% 25% 10%;
  padding-top: 30px;
}
.song-list {
  line-height: 2;
  font-size: small;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  display: grid;
  /* grid-template-columns:auto auto auto auto; */
  grid-template-columns:5% 40% 25% 10%;
  
}

/* button {
  text-align: left;
  background-color: orange;
  border: 0px;
  color: #fff;
} */