Spaces:
Runtime error
Runtime error
| @import url("https://fonts.googleapis.com/css?family=Arimo:400,700"); | |
| section.main[tabindex="0"] { | |
| overflow: scroll; | |
| } | |
| body { | |
| height: 100%; | |
| width: 100%; | |
| background: #e9e9e9; | |
| font-family: 'Arimo', Arial, sans-serif; | |
| font-weight: 400; | |
| font-size: 14px; | |
| color: #010b26; | |
| } | |
| * { | |
| -webkit-transition: 300ms; | |
| transition: 300ms; | |
| } | |
| .intro { | |
| text-align: center; | |
| } | |
| ul { | |
| list-style-type: none; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| p { | |
| font-weight: 400; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| a:hover { | |
| color: #6ABCEA; | |
| } | |
| .container { | |
| display: -webkit-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| max-width: 100%; | |
| margin-top: 10vh; | |
| margin-left: auto; | |
| margin-right: auto; | |
| -webkit-box-pack: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| } | |
| .movie-card { | |
| background: #ffffff; | |
| box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1); | |
| width: 100%; | |
| max-width: 315px; | |
| margin: 2em; | |
| border-radius: 10px; | |
| display: inline-block; | |
| } | |
| .movie-header { | |
| padding: 0; | |
| margin: 0; | |
| height: 367px; | |
| width: 100%; | |
| display: block; | |
| border-top-left-radius: 10px; | |
| border-top-right-radius: 10px; | |
| } | |
| .header-icon-container { | |
| position: relative; | |
| } | |
| .header-icon { | |
| width: 100%; | |
| height: 367px; | |
| line-height: 367px; | |
| text-align: center; | |
| vertical-align: middle; | |
| margin: 0 auto; | |
| color: #ffffff; | |
| font-size: 54px; | |
| text-shadow: 0px 0px 20px #6abcea, 0px 5px 20px #6ABCEA; | |
| opacity: .85; | |
| } | |
| .header-icon:hover { | |
| background: rgba(0, 0, 0, 0.15); | |
| font-size: 74px; | |
| text-shadow: 0px 0px 20px #6abcea, 0px 5px 30px #6ABCEA; | |
| border-top-left-radius: 10px; | |
| border-top-right-radius: 10px; | |
| opacity: 1; | |
| } | |
| .movie-card:hover { | |
| -webkit-transform: scale(1.03); | |
| transform: scale(1.03); | |
| box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.08); | |
| } | |
| .movie-content { | |
| padding: 18px 18px 24px 18px; | |
| margin: 0; | |
| } | |
| .movie-content-header, | |
| .movie-info { | |
| display: table; | |
| width: 100%; | |
| } | |
| .movie-title { | |
| font-size: 24px; | |
| margin: 0; | |
| display: table-cell; | |
| } | |
| .movie-info { | |
| margin-top: 1em; | |
| } | |
| .info-section { | |
| display: table-cell; | |
| text-transform: uppercase; | |
| text-align: center; | |
| } | |
| .info-section:first-of-type { | |
| text-align: left; | |
| } | |
| .info-section:last-of-type { | |
| text-align: right; | |
| } | |
| .info-section label { | |
| display: block; | |
| color: rgba(0, 0, 0, 0.5); | |
| margin-bottom: .5em; | |
| font-size: 9px; | |
| } | |
| .info-section span { | |
| font-weight: 700; | |
| font-size: 11px; | |
| } |