@viewport{ 
    zoom: 1.0; 
    width: device-width; 
} 

#main{
  float: left;
  display: block;
  width: 75%;
}

body{ 
 font-family: Avenir,Helvetica,Arial,sans-serif; 
 color: #000000;
 background-color: #ffffff;
 margin: 0px;
 padding: 0px;
} 

/* margin: top, right, bottom, left */

h1, h2, h3, h4, h5, h6 { 
 font-family: Century Gothic,Futura,Helvetica,sans-serif; 
 margin: 0px 15px 0px 0px;
 padding: 5px 0px 5px 10%; 
} 
 
h1{ 
 font-size: clamp(3rem,5vw,4rem); 
 color: #808080;
 padding-bottom:20px;
 padding-top:20px;
} 
 
h2{ 
 display: block; 
 background-color: #808080;
 border-bottom-right-radius: 10px; 
 border-top-right-radius: 10px; 
 font-size: 1.5rem; 
 color: #ffffff;
 margin: 30px 10% 10px 0px;
 clear: both; 
} 

h3{
 font-size: 1.2rem; 
 color: #808080;
 padding-bottom:5px;
 padding-top:5px;
}

p{
  padding: 0px 10% 0px 10%;
}

ul{
  padding: 0px 10% 0px 15%;
}

#main a{
 text-decoration: none;
 color: #808080;
 font-style: italic;
 font-weight: bold;
}

#main a:hover{
 text-decoration: underline;
}







/* figures */

img{
 float: right;
 padding-right: 11%;
 padding-left: 10px;
 padding-top: 10px;
 padding-bottom: 10px;
}





/* top info block */

#info{
 font-family: Century Gothic,Futura,Helvetica,sans-serif; 
 font-size: 2rem; 
 font-weight: bold;
 color: #808080;
 padding: 4% 0px 5% 10%;
 display: block;
 float: left;
 width: 50%
}

#info ul{
 list-style: none;
 margin: 0px; 
 padding: 0px;
}

#logo img{
  padding: 2% 20% 2% 0px;
  display: block;
  float:right;
  width: clamp(150px,20%,300px);
}








/* programme block */

#schedule{
  padding: 0px 10% 0px 10%;
}

.day{
  display: block;
  float: left;
  width: clamp(250px,30%,1000px);
  margin: 5px 3% 5px 0px;
}

.day h3{
 padding: 0px;
 margin: 0px 0px 10px 0px;
}

.day ul{
 padding: 0px 0px 0px 15px;
 margin: 20px 0px 10px 0px;
 list-style: none;
}

#chair{
  font-weight: bold;
}









/* side block */

#extra{
 float: right;
 display: block;
 width: 25%;
 margin: 0px;
 padding: 0px;
 background-color: #808080;
 color:#ffffff;
 font-weight: bold;
 border-bottom-left-radius: 10px; 
}

#extra h3{
 padding-left: 10px;
 margin: 20px 0px 10px 0px;
 background-color: #ffffff;
 color: #808080;
}

#extra ul{
 list-style: none;
 margin: 0px 0px 10px 0px;
 padding: 0px;
}

#extra li{
 border-bottom: none;
}

#extra a{
 display: block;
 color: #ffffff;
 text-decoration: none;
 padding: 5px 0px 5px 10px;
}

#extra b{
 display: block;
 color: #ffffff;
 text-decoration: none;
 padding: 5px 0px 5px 10px;
}

#extra a:hover{
 background-color: #ffffff;
 color: #808080;
}






/* mobile version */

@media only screen and (max-width: 1000px) { 

  #main{
  float:none;
  width:100%;
  }

  h1{
   text-align:center;
   font-size:3rem;
   display:block;
   width:80%;
   padding-left:10%;
   padding-right:10%;
  }

  #extra{
  float:none;
  width:100%;
  border-bottom-left-radius: 0px; 
  padding: 1px 0px 1px 0px;
  }

  #extra h3{
   padding-left:10%;
  }
  #extra a{
   display: block;
   padding: 5px 0px 5px 10%;
  }
  #extra b{
   display: block;
   padding: 5px 0px 5px 10%;
  }

  #logo img{ 
  float:none; 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  padding: 10px 10% 10px 10%;
  width: 300px;
  } 
  
  #info{
   width:80%;
   float:none;
   display:block;
   font-size: 2rem; 
  }
  
  #info ul{
  text-align:center;
  padding-left:10%;
  padding-right:10%;
  }
   
  .day{
   display: block;
   float: none;
   width: 100%;
   padding: 0px;
   margin: 15px 3% 15px 0px;
  }
  
  img{
   display: block;
   float: none;
   margin-left: auto;
   margin-right: auto;
   padding:0;
  }
  
  /* This block is hidden when viewed on a narrow screen. */
  .notonmobile{
    display: none;
  }
} 



/* This block is always hidden. */
.hidden{
 display: none;
}





/* dark mode */

@media (prefers-color-scheme: dark) { 
  body {  
    color: #cccccc;
    background-color: #000000;
  } 
   
  h2{
    color: #000000;
  }
  
  #extra a{
   background-color: #808080;
   color:#000000;
  }
  #extra b{
   background-color: #808080;
   color:#000000;
  }
  #extra h3{
   background-color: #000000;
  }
  #extra a:hover{
   background-color: #000000;
   color: #808080;
  }
}