/* style sheet for studio page */

main 
{
  background: #fec; 
  padding: 4vw;
}

h2 { text-align: center }

h2, h3 { margin: 0; padding: 0;}

/* relocatable panel */
div.panel
{
  display: inline-block;
  vertical-align: top;
  margin: 5px;
  padding: 5px;
  border-radius: 7px;
  background: #fec;
}



div.subnavmenu
{
  margin: 5px auto; /* centred */
  width: 290px;
  background: white;
  border-radius: 5px;
}

a.subnav
{
  display: inline-block;
  border-radius: 5px;
  background: #fec;
  color: black;
  text-decoration: none;
  padding: 2px 10px;
  margin: 2px 5px;
}

a.subnav.self, a.subnav.self:hover
{
  color: #fec;
  background: black;
}

a.subnav:hover
{
  background: #f96;
}

h2, h3 { margin: 0; padding: 0}


div.projects
{ 
  margin: auto; 
  max-width: 800px;
}

ul.equipment li
{
  margin-top: 10px;
  margin-bottom: 10px;
}

div.comments 
{
  display: block;
}
div.clearfloats { clear: both; height: 0 }
div.captioned_image
{
  text-align: center;
  margin: 10px auto;
  background: white;
  max-width: 600px;
}
div.captioned_image img
{
  display: block;
  width: 100%;
}

@media (max-width: 800px)
{
  div.text-with-image 
  { 
    display: block;
  }

  div.text-with-image div.captioned_image
  {
    max-width: 400px;
  }
}

div.twocolumns
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  padding: 0;
  margin: 20px 0;
}

div.twocolumns.project
{
  max-width: 800px;
  grid-template-columns: 1fr 2fr;
  gap: 0;
}

div.twocolumns.project div
{
  background: white;
  padding: 5px;
}

div.project div.name
{
  font-size: 110%;
  padding-bottom: 10px;
}

/* div.project div.description 
{
  padding-top: 10px;
}
*/

@media (max-width: 800px)
{
  div.twocolumns div
  {
    grid-column-start: 1;
    grid-column-end: 3;
  }


}




/* Mustafa page */

div.mustafa
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin: 40px auto;
  width: 100%;
}

@media (max-width: 1000px)
{
  div.mustafa
  {
    grid-template-columns: 1fr 0.8fr;
  }
}

@media (max-width: 800px)
{
  div.mustafa
  {
    grid-template-columns: 1fr;
  }
}

div.mustafa div
{
  max-width: 600px;
}



video { width: 100%; max-width: 480px }

/* projects */
div.projlist_item
{
  background: #fed;
  color: black;
  margin: 5px 0;
  padding: 5px;
}

div.projlist
{
  display: inline-block;
  vertical-align: top;
  width: 30%;
  margin: 0;
  padding: 1px;
}
div.projdesc
{
  border-top: 1px solid #c96;
  margin-top: 5px;
  padding-top: 5px;
}
@media screen and (max-width: 800px)
{
  div.projlist.projdesc { width: 100%; }
}

div.projlist.cat { width: 30%; min-width: 120px }
div.projlist.name { width: 60%; min-width: 200px }

@media screen and (max-width: 400px)
{
  div.projlist.cat, div.projlist.name { width: 100%; }
}