/*
   Fixed-size web application
   Uses rem units for proportional scaling during development
   Layout is intentionally non-responsive
*/

/*   **********    SETUP OF DOCUMENT     **********     */

html {
    /* FINAL SIZE FOR MAKING IT 1920x1080 */
    font-size: 16px;
    /* SIZE FOR DEVELOPMENT */
    /* comment below out for final submission */
    /* can change based on size needed */
  font-size: 14px;
}

body {
    font-family: Roboto;
    background-color: #000;
}

/*   **********    MAIN ELEMENTS     **********     */

main {
    width: 120.0rem;
    height: 67.5rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 42.0rem 78.0rem;
    grid-template-rows: 62.5rem 5.0rem;
}

/*   **********    Container ELEMENTS     **********     */

.left-side {
    background-color: #BBB;
    display: grid;
    grid-template-rows: 12.5rem 12.5rem 37.5rem;
}

.right-side {
    background-color: #AAA;
    display: grid;
    grid-template-rows: 43.875rem 18.625rem;
}

.bottom {
    grid-column: 1 / -1;
    background-color: #ABABAB;
}

/*   **********    Content ELEMENTS     **********     */

main > div > div, .bottom {
    color: #000;
    padding: 1.0rem;
    font-size: 2.0rem;
}
/* REMOVE CSS STYLE ABOVE BEFORE STYLING BELOW */

.left-side-top {
    height: 12.5rem;
    background-color: #727272;
}

.left-side-middle {
    height: 12.5rem;
    background-color: #909090;
}

.left-side-bottom {
    height: 37.5rem;
    background-color: #bdbdbd;
}

.right-side-top {
    height: 43.875rem;
    background-color: #ABABAB;
}

.right-side-bottom {
    height: 18.625rem;
    background-color: #888;
}
/* ======================================================
   LOGO PANE (LEFT TOP) — match COMP
   ADD ONLY (no HTML/JS changes)
====================================================== */

.left-side-top{
  /* keep your pane height as-is (12.5rem) */
  background:#fff !important;
  position:relative;
  padding:0 !important;

  /* hide the literal text "Logo Pane" without removing it */
  color:transparent;
}

/* --- TOP AREA: logo (left) + faculty text (right) --- */
.left-side-top::before{
  /* change this to your actual logo path */
  --dcLogo: url("../assets/logo.png");

  content:"";
  position:absolute;
  left:2rem;
  top:1.6rem;
  width:40rem;
  height:6rem;

  background-image: var(--dcLogo);
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
}


/* --- TIME/DATE BAR (bottom of logo pane) --- */
#time-date{
  position:absolute;
  left: 0px;
  right: 0px;
  bottom:0;

  height:5.2rem;
  display:flex;
  align-items:center;

  background:#6a1f3b; /* burgundy */
  color:#fff;
  padding:0 7rem;

  font-size:5rem;
  font-weight:400;
  letter-spacing:.08rem;
  padding-left: 7.5rem;

  /* make sure it shows even though parent text is transparent */
  z-index:2;
}

  

/* Yellow divider (like comp) */
#time-date::after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  /* adjust this if your divider needs to move left/right */
  left:22.5rem;

  width:.21rem;
  height:2.1rem;
  left:11rem;
  background:#fdb515; /* yellow */
  border-radius:.2rem;
}
/* LOGO PANE clean */
.left-side-top{
    background:#fff !important;
    position:relative;
    overflow:hidden;
    padding:0 !important;
    font-size:0;
    line-height:0;
    color:transparent;
  }
  
  /* logo only (left) */
  .left-side-top::before{
    --dcLogo: url("../assets/logo.png"); /* change path */
    content:"";
    position:absolute;
    left:3rem;
    top:0.01px;
    width:60rem;
    height:10rem;
    background:var(--dcLogo) no-repeat left center;
    background-size:contain;
  }
  
  /* remove any right-side faculty text */
  .left-side-top::after{ content:none !important; }
  
  /* time/date bar like comp */
  #time-date{
    position:absolute;
    left:0;
    right: 0px;
    bottom:0;
    height:5.2rem;
  
    background:#6a1f3b;
    color:#fff;
  
    display:flex;
    align-items:center;
    justify-content:flex-start;
  
    padding:0 2.5rem;
  
    font-size:1.7rem;
    font-weight:400;
    letter-spacing:.08rem;
    line-height:1;
  
    white-space:nowrap;
    overflow:hidden;
  }
  
  /* =====================================
   FONT OVERRIDE – LATO MEDIUM
===================================== */

/* Time & date bar */
#time-date{
    font-family: 'Lato', sans-serif;
    font-weight: 300;
  }
  
  /* Faculty text if it appears anywhere later */
  .left-side-top,
  .left-side-top *{
    font-family: 'Lato', sans-serif;
    font-weight: 400;
  }
  


/* ********** MOTION GRAPHIC ADs ********** */
.left-side-bottom {
    position: relative;
    overflow: hidden;
}

#gsap-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


/* Ensure no scrollbars */
html, body {
    overflow: hidden;
}