/* Landing page */


:root{
  --sidebar: 260px;      /* width of the grey strip */
}


.leftbox{
  position: relative;
  width: var(--sidebar);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 1rem;
  background: var(--bg);         
}


.rightimg{
  position: absolute;
  top: 0;
  left: var(--sidebar);
  width: calc(100% - var(--sidebar));
  height: 100%;
  object-fit: cover;
}


.leftbox-cta{
  margin: auto 0;                /* centre in column */
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* centre heading and subtitle */
.leftbox-header{ text-align: center; }


.credits{
  position: static;    
  margin-top: 2rem;            
  margin-bottom: 2.5rem;        
  font-size: .85rem;
  opacity: .8;
}


@media (max-width: 600px){
  
  .leftbox{
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    background: url('../images/homepage-rocks.jpg') center/cover no-repeat;
  }

  .rightimg{ display: none; }

  
  p, h1, h2, h3{ width:100%; text-align:center; } /* centre text */

  .credits{
    margin-top: 2rem;
    margin-bottom: 2.5rem;  
    width: 100%;
    text-align: center;
    color: #fff;
  }
}