/* Uniform style sheet for Just A Minute */
.clearfloat { clear:both; }
div.page-logo { float:left; margin:0 6px 0 0; }
.page-logo img { max-width:180px; margin-top: 10px; }
.selectedmenu { background-color:var(--soft-cloud);
   padding: .2rem .4rem;  border-radius: 999px;
}

/* Emphasized headings */
h1.title, h2.title, h3.title, h4.title { color:var(--cinema-gold); }

/* Navigation menus */
#topnav { display: flex; align-items: center; justify-content:space-around;  }
#topnav ul {  list-style-type: none; position:relative; }
#topnav ul li { position:relative; display: inline-flex; margin: auto 2vw; white-space:nowrap }
#topnav ul li:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,180,0,0.35); }

/* Drop-down memu items */
#topnav ul ul { position:absolute; margin-left:0; top:1.5em; z-index:10; }
#topnav ul ul li { display:block; margin:auto 0; padding-left:0.4em; }
#topnavtab { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 3vw; font-size: clamp(1.4em, 3vw, 24px); 
    max-width:40em; width:100%; vertical-align:center; }
/* The Hamburger menu (https://threkk.medium.com/how-to-make-a-css-only-hamburger-menu-f7ad41e13399) */
.hamburger { font-size:3rem; }
@media (max-width: 768px) {
    #topnav {
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
    }
    /* Because we are in mobile mode, we want to display it as a
       vertical list */
    #topnav ul {
        display: block;
    }
    /* We have two lists: the first one are the always visibile items
       in the menu bar. The second one is the one that will be hidden */
    #topnav ul:last-child {
        width: 100%;
        flex-basis: 100%;
    }
    #topnav ul li {
        margin-bottom: 0;
        width: 100%;
        text-align: right;
        padding-left:0.4em;
    }
    #topnav input[type='checkbox']:not(:checked)+ul { display: none; }
/* Styling the menu icon, the checkbox stays hidden */
    #topnav label {
        text-align: right;
        display: block !important;
        padding: 0.5em;
        line-height: 1.6em;
        align-self: center;
    }
/* Drop-down memu items for small screens */
    #topnav ul ul { position:absolute; margin-left:0; left:4em; top:.1em; text-align:left; z-index:10; }
    #topnav ul ul li { display:block; margin:auto 0; padding:0; text-align:left; }
}
#topnav input[type='checkbox'], #topnav label { display: none; }
.submenu { background-color:var(--obsidian); padding-left:0.5em; }

.countdown-label { font-family: 'Bebas Neue', Impact, sans-serif; }
.socialmedia { border:0; height:32px; }
.tickertext { color:#FFFDE5; }
.tickertext a:link { color:white; }
.tickertext a:visited { color:white; }
#sponsors figure { display:inline-table; vertical-align:bottom; margin:1em; text-align:center;
/*    width:192px; max-width:25vw;  */
 }
#sponsors img {  height:60px; max-height:25vh; border:3px solid var(--soft-cloud); }
#sponsors figcaption { display:table-caption; display:none; caption-side:bottom; text-align:center; padding:1px;
    background-color:gray; font-variant: small-caps; font-size:smaller; }

/* Need to set z-index negative on the hero or the drop-down menus go behind it. Their z-index setting has no effect (maybe because of positioning?) */
.hero { margin:auto; border:2px solid cyan; z-index:-2; }
.hero-content { padding: 6vh 6vw; }
.hero-content p { margin: auto; color:var(--soft-cloud); }
.hero-overlay { text-align:center; }
.hero-overlay { background-image: url("/image/background60long.jpg"); background-size:cover; background-repeat:no-repeat;  background-position: top;
    background-blend-mode: screen; }
.countdown { text-align:center; }
.countdown p { margin:auto; }
footer img { display:unset; }
footer { text-align:center; }

.blur { background-color:rgb(128,128,128,0.4); }
.blackback { background-color:var(--obsidian); }
.centertext { text-align:center; }
.alogo { height:4em; float:left; margin-top:3px; margin-bottom:3px; margin-right:6px; border:0.5px solid silver; }