/* List all of the names of sections here so that we can just use find feature: */
/* Nav */
/* Hero image */
/* Now showing scroll */
/* General changes eg h1, h2 */
/* Showtimes */
/* Footer */

/* list colours used here: */
/*Theme color is #151517*/
/* Background colour is #26262629 */


/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

/* General Changes eg h1, h2 */
#overlay{
    font-family: Audiowide;
    color: white;
    background-color: #262629;
    font-size: xx-large;
    height: 5%;
    padding: 0.5%;
    border-radius: 10px;
}

hr{
    height:10px;
    width:100%;
    background-color: #ce3129;
    border: 0px;
    margin:0px;
    padding:0px;
}

body{
    margin:0px;
    background-color: #262629;
    color: #b1b1b1;
}

/* Nav */
nav{
    background-color: #151517;
    width:100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding:0px;
    margin:0px;
    font-family: Audiowide;
}

#nav_logo{
    padding:0px;
}

.logo_link{
    height: 68px;
}

.nav-button{
    color:#fff;
    font-weight: 600;
    margin: 0 10px;
    padding: 6px 12px;
    width: 70px;
    height: 20px;
    transition: color 0.2s;
    text-decoration: none;
    font-size: 12pt;

}

.nav-button:hover{
    color: #b1b1b1;
    cursor: pointer;
}



/* Hero image */
#hero_image {
  background-image: url("../images/cinema_exterior.png");
  /*padding-bottom: 50px;*/
  height: 800px;
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  align-self: center;
  background-repeat: no-repeat;
  background-position: center;
  margin: 10px 0 20px;
}

/* Now showing scroll 
.ticker{ 
    display:flex; 
    width:max-content; 
    animation: ticker 20s linear;
}

.ticker span{
    padding: 0 70px 0;
}

/*@keyframes ticker{
    from{ 
        transform: translateX(0); }
        to{ transform: translateX(-100%); } 
}

.scroll-rule{
    height: 50px;
    width: 100%;
    background-color: #151517;
    color: #ce3129;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
*/

/* Showtimes */
#movieGrid{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
}

.movie-card{
    background:#151517;
    border-radius:12px;
    overflow:hidden;
    color:white;
    width:260px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align: center;
}

.poster {
    height: 350px;
    width: 250px;
    position: relative;
    overflow: hidden;
    padding: 5px;
    box-sizing: border-box;
}

.poster a {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 10px;
}

.poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rate-pill{
    display:flex;
    align-items:center;
    justify-content:center;
    color: black;
    font-weight: bolder;
    width:40px;
    height:40px;
    border-radius:50%;
    margin:0 auto 20px auto;
    font-family: sans-serif;
}

.times-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom: 20px;
}

.time-chip{
    background:#262629;
    padding:8px 12px;
    border-radius:6px;
    font-family: sans-serif;
    font-weight: bold;
}

.title, 
title:visited, 
title:hover,
title:active {
    color: white;
    text-decoration: underline;
}

.movie-section-header{
    text-align: center;
    padding-top: 100px;
    font-size: 3rem;
    color: white;
}

#weekTabs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
}

.rate-G{
    background: green;
}

.rate-PG,
.rate-M{
    background:yellow;
}

.rate-R13{
    background:red;
}

.rate-R16,
.rate-R18{
    background:red;
}

.tab {
    font-family: Audiowide;
    background: none;
    border: none;
    color: white;
    padding: 5px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.tab:hover,
.tab.active{
    color: grey;
}

.tab.today{
    text-decoration: underline;
}

/* Footer */
footer{
    background-color: #151517;
    color: aliceblue;
    font-family: Audiowide;
    flex-direction: row;
    display: flex;
    align-items: center;
    padding: 20px;
     justify-content: space-between; 
}