:root{
    --black-background: #141414;
    --grey-font: #e5e5e5;
    --red-accent: #e50815;
    --grey-button: #333333;
    --grey-card: #212121;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	user-select: none;
	-webkit-user-select: none;
}
body {
    background-color: var(--black-background);
    color: var(--grey-font);
}
input {
    user-select: text;
    -webkit-user-select: text;
}

.loggin {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.loggin img {
    width: 50vw;
    max-width: 500px;
    margin-bottom: 15px;
}
.logo img {
    width: 50vw;
    max-width: 500px;
    margin-bottom: 15px;
}
.loggin input {
    width: 220px;
    margin-bottom: 15px;
    font-size: 1rem;
    background-color: var(--grey-card);
    border: var(--grey-button) 2px solid;
    color: var(--grey-font);
    border-radius: 10px;
    padding: 10px;
}
.loggin input :hover :focus-visible{
    outline: transparent;
}
button {
    margin: 10px;
    padding: 10px 50px;
    font-size: 1rem;
    background-color: var(--red-accent);
    color: var(--black-background);
    border: 0px;
    border-radius: 10px;
}
.logo {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.spinner {
    margin-bottom: 20px;
    border: 4px solid var(--red-accent);
    border-left-color: transparent;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
.d-none {
      display: none !important;
}
.grid-container {
    display: grid;
    height: 90vH;
    width: 100vw;
    grid-template-columns: auto auto auto auto auto;
    align-content: center;
    justify-content: space-evenly;
}
.grid-container img {
    width: 15vw;
}
.film {
    height: calc((85vh - 80px ) / 4);
    width: calc((100vw - 60px) / 5 ); 
    overflow: hidden;
    top:0px
}
.film img {
    width: 100%;
}
.fade-in {
opacity: 1;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.fade-in.fade{
    opacity: 0;
}
.titulo{
    grid-column: 1 / 6;
    color: var(--grey-font);
    font-weight: bold;
}
.titulo p{
    min-height: 1em;
}
.color{
    color: transparent;
}
.error {
    color: crimson;
}
#peliendsection {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}
.modal-content {
    background-image: url("/assets/img/popup.png");
    background-size: cover;
    margin: 5% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 300px;
    height: 300px; /* Could be more or less, depending on screen size */
  }

.close {
color: #fff;
float: right;
font-size: 28px;
font-weight: bold;
}
.time {
    color: #fff;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@media (orientation: portrait) {
#movies {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
#peliend {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.grid-container {
    height: 90vw;
    width: 90vh;
    margin-top: 25px;
}
.grid-container img {
    width: 15vH;
}
.film {
    height: calc((90vw - 80px ) / 4);
    width: calc((87vh - 60px) / 5 );
}
.film img {
    height: 100%;
    width: 100%;
}
}