scss/get.scss
@import "globals";
#fullscreen {
margin-top: 25vh;
width: 100%;
height: 100%;
display: table;
background-size: cover;
}
#fullscreen .fullscreen-content {
display: table-cell;
text-align: center;
vertical-align: middle;
max-width: 100vw;
}
#fullscreen .fullscreen-content .title {
display: block;
width: 55%;
padding: 15px;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 20px;
color: #fff;
}
#fullscreen .fullscreen-content .title h1 {
font-size: 3em;
margin: 5px 0;
text-overflow: ellipsis;
overflow: hidden;
}
#fullscreen .fullscreen-content .title p {
font-size: 2em;
}
h1 a {
text-decoration: none;
color: white;
}
@media only screen and (min-width: 700px) {
iframe#ytplayerSide {
width: 100%;
height: 65vh;
}
}
@media only screen and (max-width: 700px) {
iframe#ytplayerSide {
display: none;
}
}
@media only screen and (max-width: 1000px) {
#fullscreen .fullscreen-content .title {
display: block;
width: 100vw;
padding: 0;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 20px;
color: #fff;
overflow: hidden;
}
}
@media only screen and (min-width: 1000px) {
#fullscreen .fullscreen-content .title {
display: block;
width: 55%;
padding: 15px;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 20px;
color: #fff;
}
}
img {
width: 80%;
height: auto;
}