:root{font-size:16px}* {margin:0}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul,ol{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1; margin: 0; paddding: 0;}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}

    html {
      min-width: 400px;
      padding: 0px 0px 0px 0px;
      background:
linear-gradient(160deg, rgba(20, 180, 130, 1.00) 10%, rgba(0, 0, 0, 0.00) 80%),
linear-gradient(90deg, rgba(0, 125, 150, 1.00) 10%, rgba(0, 0, 0, 0.00) 80%),
linear-gradient(200deg, rgba(217, 255, 0, 1.00) 10%, rgba(0, 0, 0, 0.00) 80%),
linear-gradient(20deg, rgba(20, 200, 101, 1.00) 10%, rgba(0, 0, 0, 0.00) 80%),
linear-gradient(200deg, rgba(0, 245, 245, 1.00) 10%, rgba(0, 0, 0, 0.00) 80%);
background:
radial-gradient(ellipse at 54% 0%, rgba(2, 45, 15, 0.76) 0%, rgba(0, 0, 0, 0.00) 100%),
linear-gradient(330deg, rgba(5, 2, 45, 1.00) 10%, rgba(0, 0, 0, 0.00) 80%),
linear-gradient(30deg, rgba(0, 255, 120, 1.00) 10%, rgba(0, 225, 255, 1.00) 90%);
    }
    body {
      display: flex;
      flex-direction: column; 
      width: 80%;
      margin-inline: auto;  
      max-width: 1200px; 
      border-radius: 16px ;
     
      background-position: top;
      
    }

    .wrapper {
      margin-top: 20px;
      margin-bottom: 40px;
      box-shadow: 0 0 20px rgba(0,60,30,0.5);
      border-radius: 20px ;
      background-image: url('images/rochdaleoutline.png');
    }

    header, main > *, footer {
      padding:  0px; 
    }

    header {
  container: header / inline-size;
      display: flex;
      flex-direction: column;

      height: 359px;  
      border-radius: 12px 12px 0 0 ;

      background-image:  url('images/Pixel2.png'),
        linear-gradient(167deg, rgba(5,2,45,1)  0.71%, rgba(0,0,0,0) 90.71%),
        linear-gradient(297deg, rgba(19,146,96,1)  0.71%, rgba(0,0,0,0) 90.71%),
        linear-gradient(59deg, rgba(8,64,68,1)  0.71%, rgba(0,0,0,0) 90.71%) ;
      background-size: contain; background-position: bottom; background-repeat: no-repeat;
        } 

    header h1 {
      padding: 0;
      width: fit-content; text-align: right;  
      --logo: 40cqi;
      width: var(--logo);
      height: calc(var(--logo) * .44);
      
      background-image: url('images/RochdaleArtists.png');
      background-size: cover;
     /*
      font-family: "Times New Roman", sans-serif;
      font-weight: 400;
      font-style: normal;
      color: rgba(255, 255, 255, 1.0); 
      
       
    
      font-size: clamp(7rem,13cqi,2cqi)  ;   font-size: calc(4rem + 6cqi);
      line-height: clamp(5rem,10cqi,20cqi);
      margin-bottom:  clamp(-.6rem ,-.6rem ,20cqi) ;
      margin-right:   clamp(4cqi ,8cqi,20cqi)  ;

      */   
      margin-left: auto; 
      margin-right: 9cqi;
      margin-top: auto ;
      margin-bottom: -1px;
      /* -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: linear-gradient(145deg, yellowgreen, cyan, mediumpurple);*/
  
 
  letter-spacing: -0.25rem;  
    }   

 

    article { 
    position: relative;  
padding: 20px; 
      background: 
        linear-gradient(240deg, rgba(19,146,96,0.25)  0.71%, rgba(0,0,0,0) 50.71%),
        linear-gradient(180deg, rgba(255,255,255,1)  0.71%, rgba(0,0,0,0) 60.71%),
        linear-gradient( 120deg, rgba(198,221,202,0.75)  0.71%, rgba(0,0,0,0) 80.71%),
        linear-gradient( 60deg, rgba(198,221,202,0.75)  0.71%, rgba(0,0,0,0) 80.71%)  ;
      background: #fff;
    }

    article i {
       position: absolute; 
       top: 0;
       left: 0;
  z-index: 100;    
      width: 100%;
      aspect-ratio: 1920/334; 
  background:  url('images/Pixel2.png')  ;
      background-size: contain; background-position: top; background-repeat: no-repeat;
      rotate: 180deg;
}  

 .wide {  
  container: gallery / inline-size;
      width:100%; 

      color: #fff;
      background: 
        linear-gradient(330deg, rgba(5,2,45,1)  0.71%, rgba(0,0,0,0) 80.71%),
        linear-gradient(250deg, rgba(19,146,96,1) 30.71%, rgba(0,0,0,0) 90.71%),
        linear-gradient(160deg, rgba(8,64,68,1)  0.71%, rgba(0,0,0,0) 80.71%),
        linear-gradient(80deg, rgba(8,64,68,1)  0.71%, rgba(0,0,0,0) 80.71%)  ;
        border: 1px solid rgba(255,255,255,1);
        
    }

    .wide p {

      color: #fff;
    }

    .wide h3 {

      color: #fff;
      color: rgba(198,221,202,0.15);
      font-family: "Times New Roman", sans-serif;
    font-weight: 700;
      font-style: normal;
       padding: 0 0 0 0;
       width: fit-content;
       margin: -10px auto 10px;
      font-size: 10cqi;
      letter-spacing: -0.25rem;
  user-select: none;
/*  text-shadow: 0 0 11px rgba(0,11,0,.66); */
    }

    section {
      
    }

     aside {
      width: 15%;
      background:#c5ed77;
    } 

    footer {
       height: fit-content;
      background: rgba(244,239,207,0.9);
      font-family: "Roboto", sans-serif;
      font-size: 1rem;
      border-radius: 0 0 12px 12px;
      overflow: hidden;
padding: 20px; 
    }
 

.sdfg { 
  --cor: 10px;
  width: fit-content; 
  font-size: 2.5rem; 
   color: rgba(100,0,0,0.55); 
   text-align: right; 
   letter-spacing: -0.06rem; 
   margin-top: 116px;  
   margin-left: auto;  
   position: relative;
      font-family: "Times New Roman", sans-serif;
      font-weight: 400;
      font-style: normal;
    }

.uyikuiu {
  width: fit-content;
  padding: 15px;
  border-radius: var(--cor) 0 var(--cor) var(--cor);
  background: rgba(238,197,58,1);
  line-height: 1.2;
  text-shadow: 0 0 3px rgba(50,0,0,0.2); 
  box-shadow: 0 0 10px rgba(0,0,0,0.55);  
}



hr { margin: 0; 
border: none;
border-top: 1px solid rgba(100,0,0,0.25); 
border-bottom: 1px solid rgba(255,255,255,0.44);
 }

.sdfsdgf { 
 padding: 0 15px 0 25px;
 white-space: nowrap;
  width: fit-content; 
  line-height: 70px; 
  border-radius:  var(--cor) var(--cor) 0 0;
  background:  rgba(238,197,58,1);
  color: rgba(10,0,0,0.8);
  margin-left: auto;
  position: relative; 
  box-shadow: 0 -5px 5px rgba(0,0,0,0.25);  
}

.sdfsdgf c-t {

  position: absolute;
  overflow: hidden;
  width: var(--cor);
  height: var(--cor);

  bottom: 0px;
  left: calc(0px - var(--cor));
}

.sdfsdgf c-t:before { 
 content: "";
  display: block;
  width: calc(var(--cor) * 2);
  height: calc(var(--cor) * 2);
  position: absolute;
  border-radius: 50%;
  top: calc(0px - var(--cor));
  left: calc(0px - var(--cor));
  box-shadow: calc(var(--cor) / 2) calc(var(--cor) / 2) 0 0  rgba(238,197,58,1);
} 





    article h3 {
      font-family: "Times New Roman", sans-serif;
    font-weight: 700;
      font-style: normal;
      color:  rgba(0,0,0,0.25);  
      padding: 15px 0;
      font-size: 4rem;
      letter-spacing: -0.25rem; 
    }
    article h4 {
      font-family: "Times New Roman", sans-serif;
      font-weight: 700;
      font-style: normal;
      color:  rgba(0,0,0,0.6);  
      padding: 15px 0 15px 0;
      font-size: 2.6rem;
      letter-spacing: -0.15rem; 
    }

    article p {
      font-family: "Roboto", sans-serif; 
      color:  rgba(0,0,0,0.9);  
line-height: 1.6;
text-shadow: 0 0 3px rgba(0,0,0,0.3);  
      padding: 0 0 15px 0;
    }

    article strong {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: 1.2rem;
      color:  rgba(0,0,0,0.75);  
line-height: 1.5; 
text-shadow: 0 0 3px rgba(0,0,0,0.3); 

    }

    main {


      container: list-grid / inline-size;
    }

    article.list {   
 
      padding-top:  40px; 
      padding: 0 20px 0px 20px;  

      @container list-grid (min-width: 700px) {  
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: 1fr fit-content; 
        grid-gap: 10px;
      }

    }
      

    article.list section { 
      padding: 0 10px;
      background: ;
    }

    article.list h3 { 
      font-size: 10cqi; 

      @container list-grid (min-width: 700px) {  
        font-size: 6cqi; 
      }
    } 

    article.list h4 { 
      font-size: 8cqi; 

      @container list-grid (min-width: 700px) {  
        font-size: 4cqi; 
      }
    }



    article.list section p {
      display: grid; 
     grid-template-columns: 80px auto;
     gap: 20px;
     align-self: center;
     align-items: center;
     line-height: 1.2;
     margin-bottom: 15px;
      font-stretch: 75%;
      font-size: 1.5rem;
      color: #555;    
      border-bottom: 4px dashed #fafafa; 
    }

    article.list section p:last-child {   
      border-bottom: none;
    }

    article.list section p time {
      font-family: "Times New Roman", sans-serif; 
      font-weight: 700;
      font-size: 4rem;
      color: #ddd;    
      margin-top: -3px;   
      letter-spacing: -0.15rem; 
      text-align: right; 
      align-self: center; 
      text-shadow: none;  


      font-size: 10cqi; 

      @container list-grid (min-width: 700px) {  
        font-size: 5cqi; 
      }

    }

    article.list section p span {  
      flex-grow: 1; 
      width: fit-content;

    }

    article.list section time sup { 
      font-size: 2rem; 

    }

    nav {
      width: fit-content;
      background-blend-mode: ; 
    }

    nav ul {
      display: flex;
      justify-content: space-evenly;
      gap: 10px;
    }


    nav ul li {
      background: rgba(0,200,200,0.75);
      border-radius: 5px;
      width: fit-content;
      padding: 2px 10px 0 10px;
      height: 30px;
      align-content: center;
      color: #fff; 
       box-shadow: 0 0 10px rgba(0, 0, 0,0.75); 
    }

    nav ul li a {
      font-family: Roboto;
      text-decoration: none;
      text-shadow: 0 0 28px rgba(0, 0, 0, 1.0);
    }


 

.addr { 
  --cor: 10px;
  --addrcolour: rgba(0,200,200,1);
  width: fit-content; 
  font-size: 1.8rem; 
  color: rgba(255,255,255,1); 
   letter-spacing: -0.025rem;    
   position: relative;
      font-family: "Times New Roman", sans-serif;
      font-weight: 400;
      font-style: normal;
    }
    
.addr_info {
  width: fit-content;
  padding: 15px;
  border-radius: 0 var(--cor) var(--cor) var(--cor);
  background: var(--addrcolour);
  line-height: 1.2;
text-shadow: 0 0 3px rgba(0,0,0,0.7);   box-shadow: 0 0 7px rgba(0,0,0,0.5);  
}



hr { margin: 0; 
border: none;
border-top: 1px solid rgba(0,0,0,0.22); 
border-bottom: 1px solid rgba(255,255,255,0.33);
 }

.addr_title { 
  font-size: 2.2rem; 
 padding: 5px 15px 0 15px ;
 white-space: nowrap;
  width: fit-content; 
  line-height: 40px; 
  border-radius: var(--cor) var(--cor) 0 0;
  background: var(--addrcolour);
  color: rgba(255,255,255,1);  
  position: relative; 
  box-shadow: 0 -3px 3px rgba(0,0,0,0.15);
  text-shadow: 0 0 3px rgba(0,0,0,0.7); 
}

.addr_title c-t {

  position: absolute;
  overflow: hidden;
  width: var(--cor);
  height: var(--cor);

  bottom: 0px; 
  right: calc( 0px - var(--cor));
}

.addr_title c-t:before { 
 content: "";
  display: block;
  width: calc(var(--cor) * 2);
  height: calc(var(--cor) * 2);
  position: absolute;
  border-radius: 50%;
  top: calc(0px - var(--cor));
  right: calc( 0px - var(--cor));
  box-shadow: calc(( 0px - var(--cor)) / 2) calc(var(--cor) / 2) 0 0 var(--addrcolour);
} 








    ul.gallery { display: flex; align-items: center; width: fit-content; margin: 0 auto; padding: 0 0 3cqi 0;  }
    ul.gallery li { aspect-ratio: 3/4; border-radius: 1.25cqi; border: 0.3cqi solid rgba(255,255,255,0.5); background-size: cover; position: relative; box-shadow: 0 0 2cqi rgba(0,0,0,0.55);  margin-inline: -1cqi ;  }

    ul.gallery li:is(:first-child,:last-child) { height: 22cqi; }
    ul.gallery li:not(:first-child,:last-child) { height: 27cqi; z-index: 50; }
    ul.gallery li:nth-child(3) { height: 32cqi; z-index: 100; }


@media (width < 1000px) {

  body {
         width: 96%;
      
    }   
   
}





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

  
 /**/
  body, html{ 
  
   padding: 0;
   width: 100%;
   border-radius: 0;

    } 

    header, footer {

   border-radius: 0;
    }


  nav {
      display: none;
   }

    header {
  container: header / inline-size;
      display: flex;
      flex-direction: column;

      height: 260px;   
      } 


 header h1 {
       
          font-size: calc(3.5rem + 6cqi);
      line-height: 16cqi;  
      margin-left: auto; 
      margin-top: auto ;
      margin-bottom:  clamp(-.6rem ,-.6rem ,20cqi) ;
      margin-bottom: 0  ;
      margin-right:   clamp(4cqi ,8cqi,20cqi)  ;
      margin-right:   4cqi  ;

  
    }   




    article.list {   
  
      padding: 0  ;  
 
    }
      
  header {  
      background-image:  url('images/Pixel2.png'),
        linear-gradient(167deg, rgba(5,2,45,1)  0.71%, rgba(0,0,0,0) 90.71%),
        linear-gradient(297deg, rgba(19,146,96,1)  0.71%, rgba(0,0,0,0) 90.71%),
        linear-gradient(59deg, rgba(8,64,68,1)  0.71%, rgba(0,0,0,0) 90.71%) ;
      background-size: 120%; background-position: 80% 100%; background-repeat: no-repeat;
        } 



  }