@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');


html {

  box-sizing: border-box;

}

body {

  margin: 0;

  min-height: 100vh;

   background-image: linear-gradient(
    0deg,
    rgba(247, 247, 247, 1) 23.8%,
    rgba(252, 221, 221, 1) 92%
);

  display: flex;

  justify-content: center;

  align-items: center;

  font-family: Nunito, sans-serif;

  font-size: 12px;

}

.bg-container {

  position: fixed; 

  top: -50%; 

  left: -50%; 

  width: 200%; 

  height: 200%;

  z-index: -1;

}

/*.bg-container img {

  position: absolute; 

  top: 0; 

  left: 0; 

  right: 0; 

  bottom: 0; 

  margin: auto; 

  min-width: 50%;

  min-height: 50%;

  filter: blur(15px);

  -webkit-filter: blur(50px);

  transform: scale(1.1); 

}*/

.player-container {

  height: 500px;

  width: 400px;

  background: #e7e7e7;

  border-radius: 20px;

  box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);
  position: relative;
  left: -450px;

}

.img-container {

  width: 300px;

  height: 300px;

  position: relative;

  top: -50px;

  left: 50px;

  display: flex;

  justify-content: center;

  align-items: center;

}

.img-container img {

  height: 0;

  width: 0;

  opacity: 0;

  object-fit: cover;

  border-radius: 20px;

  box-shadow: 0 5px 30px 5px rgba(0, 0, 0, 0.5);

  transition: .5s;

}

.img-container img.active {

  transition: .5s;

  opacity: 1;

  width: 100%;

  height: 100%;

}

h2 {

  font-size: 25px;

  text-align: center;

  margin: 0;

}

h3 {

  font-size: 20px;

  text-align: center;

  font-weight: 400;

  margin: 5px 0 0;

}


/* Progress */

.progress-container {

  background: #fff;

  border-radius: 5px;

  cursor: pointer;

  margin: 40px 20px;

  height: 4px;

  width: 90%;

}

.progress {

  background: #ff0303;

  border-radius: 5px;

  height: 100%;

  width: 0%;

  transition: width 0.1s linear;

}

.duration-wrapper {

  position: relative;

  top: -25px;

  display: flex;

  justify-content: space-between;

}


/* Controls */

.player-controls {

  position: relative;

  top: -15px;

  left: 120px;

  width: 200px;

}

.fas {

  font-size: 30px;

  color: rgb(129, 129, 129);

  margin-right: 30px;

  cursor: pointer;

  user-select: none;

}

.fas:hover {

  filter: brightness(80%);

}

.main-button {

  font-size: 40px;

  position: relative;

  top: 3px;

}


/* Media Query: iPhone (Vertical) */

@media screen and (max-width: 376px) {

  .player-container {

    width: 95vw;

  }

  .img-container {

    left: 29px;

  }

  h2 {

    font-size: 20px;

  }

  h3 {

    font-size: 15px;

  }

  .player-controls {

    top: -10px;

    left: 100px;

  }

}
.tag{
    position: relative;
    left: 500px;
    top: -200px;
    display: flex;
    flex-direction: column;
    font-size: medium;
}

.image img{
    width: 50%;
    height: 50%;
}
.streak{
    height: 100px;
    width: 600px;
    background-color: aqua;
    position: relative;
    left: 850px;
    
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    row-gap: 60px;
    align-items: center;
}
.info{
    margin: 15px;
    align-content: center;
}








html {
    background-color: #D0F1FF;
    height: 100%;
}

h1 {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

#container {
    height: 200px;
    width: 700px;
    background-color: #D0F1FF;
    margin: 0 auto;
    border: 5px solid #ffffff00;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

/*label*/
.label {
    margin: 0;

    justify-self: center;
    align-self: center;
    font-size: 30px;
}

#hour-label {
    grid-area: 1 / 2 / 1 / 3;
}

#min-label {
    grid-area: 1 / 3 / 1 / 4;
}

#sec-label {
    grid-area: 1 / 4 / 1 / 5;
}

/*times*/
.time {
    justify-self: center;
    align-self: center;

    border: none;
    background-color: #ffffff00;
    font-size: 50px;
    width: 70px;
    height: 50px;
}

#hour {
    grid-area: 2 / 2 / 2 / 3;
}

.semicolon {
    justify-self: center;
    align-self: center;

    font-size: 30px;
    margin: 0;
}
#p1 {
    grid-area: 2 / 2 / 2 / 4;
}

#minute {
    grid-area: 2 / 3 / 2 / 4;
}

#p2 {
    grid-area: 2 / 3 / 2 / 5;
}

#sec {
    grid-area: 2 / 4 / 2 / 5;
}

/*buttons*/

.btn {
    align-self: center;
    
    width: 100px;
    height: 40px;

    font-size: 30px;
    justify-self: center;
}

#start {
    grid-area: 3 / 2 / 3 / 4;
}

#reset {
    grid-area: 3 / 3 / 3 / 5;
}