#name {
font-size: 32px;
width: 700px;
text-align: center;
position: relative;
margin: 40px auto 40px;
font-family: "Raleway", serif;
}

#description {
width: 700px;
text-align: center;
position: relative;
margin: 40px auto 80px;
font-size: 19px;
color: var(--gray);
}

#video_block {
max-width: 700px;
margin: 20px auto;
position: relative;
overflow: hidden;
opacity: 0;
visibility: hidden;
background: white;
transition: .4s;
border: 1px solid #cdcdcd;
}

#video {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
}

#first_play {
position: absolute;
width: 100%;
top: 0;
height: 100%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
transition: .4s;
background: linear-gradient(to bottom, white 50%, var(--dark) 50%);
}

#first_play_name {
font-family: "Raleway", serif;
position: absolute;
height: 50%;
font-size: 24px;
text-align: center;
padding: 20px;
box-sizing: border-box;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}

#first_play_logo {
height: 50%;
position: absolute;
bottom: -10px;
padding: 0;
box-sizing: border-box;
width: 200px;
}

#first_play_go {
background: var(--dark);
width: 80px;
border-radius: 50%;
padding: 11px;
border: 4px solid white;
box-sizing: border-box;
transition: .25s;
}

#first_play_go:hover {
background: var(--hover);
}

#controller {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
opacity: 0;
visibility: hidden;
background: linear-gradient(to top, #0000005e, transparent);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}

#line {
position: relative;
width: calc(100% - 30px);
height: 16px;
cursor: pointer;
}

#line>div:nth-child(1) {
height: 5px;
background: white;
position: absolute;
border-radius: 12px;
top: 50%;
transition: height .2s linear;
transform: translate(0, -50%);
}

#line>div:nth-child(2) {
background: #ffffff8c;
border-radius: 12px;
width: 100%;
height: 8px;
top: 50%;
position: absolute;
transition: height .2s linear;
transform: translate(0, -50%);
}

#controller_under_line {
position: relative;
width: 100%;
display: flex;
height: 50px;
align-items: center;
}

#time {
font-size: 15.5px;
position: absolute;
text-align: center;
color: white;
left: 65px;
}

#stop_play {
width: 48px;
position: absolute;
cursor: pointer;
padding: 5px;
box-sizing: border-box;
margin-left: 10px;
}

#screen {
width: 48px;
position: absolute;
cursor: pointer;
padding: 5px;
box-sizing: border-box;
right: 10px;
}

#picture_in_picture {
width: 48px;
position: absolute;
cursor: pointer;
padding: 5px;
box-sizing: border-box;
right: 50px;
}

#preview_time {
width: calc(100% - 30px);
position: absolute;
left: 50%;
transform: translate(-50%);
bottom: 80px;
visibility: hidden;
color: white;
opacity: 0;
}

#preview_time>div {
background: var(--dark);
padding: 5px;
position: relative;
border-radius: 12px;
width: 80px;
text-align: center;
}

#stop_block {
width: 100%;
position: absolute;
height: 100%;
top: -63px;
}

#speed {
right: 105px;
position: absolute;
color: white;
cursor: pointer;
background: #ffffff3d;
border-radius: 100px;
font-size: 15px;
padding: 6px 12px;
}

#breadcrumbs {
margin: 60px auto 0;
}

@media (max-width: 768px) {
#first_play_name {
font-size: 19px;
}

#first_play_go:hover {
background: var(--dark);
}

#video_block {
width: calc(100% - 2px);
}

#first_play_logo {
width: 160px;
}

#first_play_go {
width: 65px;
}

#description,
#name {
width: calc(100% - 40px);
}

#name {
font-size: 28px;
}
}