/* font-family: 'Outfit', sans-serif;
font-family: 'Roboto', sans-serif; */

:root {
  /* Color */
  --dark-grey: #212121;
  --white: #ffffff;
  --black: #000000;
  --light-grey: #9e9e9e;
  --shadow-grey: #424242;

  /* Font size */
  --small: 10px;
  --regular: 15px;
  --large: 18px;

  /* Space */
  --padding-top: 8px;
  --padding-side: 11px;
  --margin-top: 8px;
  --margin-side: 11px;
}

* {
  margin: 0;
  padding: 0;
  background-color: var(--dark-grey);
  color: var(--white);
  font-family: "Roboto", sans-serif;
}

a {
  text-decoration: none;
  cursor: pointer;
}

button {
  cursor: pointer;
}

ul {
  list-style: none;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: var(--padding-side);
  padding-left: var(--padding-side);
  font-size: var(--large);
  font-weight: bold;
}

.logo {
  display: inline-flex;
  align-items: center;
}

#logo_img {
  width: 2em;

  margin: 4px;
}

.search_input {
  border: none;
  background-color: var(--black);
  height: 2em;
  padding-left: var(--padding-side);
}

.search_btn {
  font-size: var(--large);
  border: none;
  padding: 5px;
}

/* Video */
.videoArea {
  display: flex;
  justify-content: center;
}

.player {
  position: sticky;
  top: 0;
  width: 100vw;
  aspect-ratio: 16 / 9;
  max-width: 1000px;
}
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Info */

.info {
  display: flex;
  flex-direction: column;
}
.metadata {
  display: flex;
  flex-direction: column;
}

#metadata_titleAndBtn {
  display: flex;
  margin: var(--margin-top) var(--margin-side) 0;

  font-size: var(--regular);
}
#metadata_title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
#moreBtn {
  height: 100%;
  border: none;
}

#views {
  margin: var(--margin-top) var(--margin-side);
  font-size: var(--small);
  color: var(--light-grey);
}

.actions {
  display: flex;
  justify-content: space-evenly;
  list-style: none;
  margin-top: var(--margin-top);
  margin-bottom: var(--margin-top);
}

.actions > li {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--margin-top);
}

.actions > li > button {
  border: none;
  padding: var(--padding-top);
}

.actions > li > span {
  font-size: var(--small);
}

.channelInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: solid var(--shadow-grey) 1px;
  border-bottom: solid var(--shadow-grey) 6px;
}

.channel {
  display: inline-flex;
  margin-left: var(--margin-side);
}

#channel_name {
  padding-left: var(--padding-side);
  font-size: var(--regular);
}

#channel_name > span {
  font-size: var(--small);
}
#channel_avatar {
  width: 2em;
}

.subscribe {
  margin-right: var(--margin-side);
}

.subscribe > button {
  font-size: var(--regular);
  color: var(--light-grey);
  border: none;
  padding: var(--padding-top) var(--padding-side);
}

#subscribe_btn {
  text-transform: uppercase;
  font-family: "Outfit", sans-serif;
}

.upNext_item {
  /* display: flex; */
}

#upNext_thumbnail {
  width: 100%;
}

#upNext_channel {
  display: inline-flex;
  align-items: center;
  margin-top: var(--margin-top);
  margin-left: var(--margin-side);
}

#UpNext_title {
  font-size: var(--regular);
}

#UpNext_title > span {
  font-size: var(--small);
  color: var(--light-grey);
}

#upNext_avatar {
  width: 2em;
  padding: var(--padding-top);
}

@media screen and (min-width: 768px) {
  .videoArea {
    position: relative;
  }
  .infoAndUpNext {
    display: flex;
    margin: auto;
    max-width: 1000px;
  }

  .info {
    margin-left: var(--margin-side);
    margin-right: var(--margin-side);
    flex: 1 1 65%;
  }

  .UpNext {
    margin: var(--margin-side);
    flex: 1 1 35%;
  }
  #upNext_channel {
    margin: 0;
  }
}