@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Chocolate+Classical+Sans&family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap');
:root {
  
            
            --dark-panel: rgba(0, 0, 0, 0.3); /* dark panels */
            --light-panel:rgba(255,255,255,0.5);
            --border-color:rgba(0,0,0,1);
            --discribe-color:rgba(0,0,0,1);
            --green:lime;
            --formLine:60px;
            --address:32px;
        }


        h1,h2,h3,p{
          padding:0px;
          margin:0px;
        }
        
        .bodoni-moda-700{
          font-family: "Bodoni Moda", serif;
          font-optical-sizing: auto;
          font-weight: 700;
          font-style: normal;
        }
        .libre-bodoni-400 {
          font-family: "Libre Bodoni", serif;
          font-optical-sizing: auto;
          font-weight: 400;
          font-style: italic;
        }

        .chocolate-classical-sans-regular {
          font-family: "Chocolate Classical Sans", sans-serif;
          font-weight: 400;
          font-style: normal;
        }

        
        
img{
      image-rendering: pixelated;
  }

body {
  margin:0px;
  padding:0px;
  padding-top: 50px;
  padding-bottom: 50px;
  background: url('image/wall.jpg') rgba(255,255,255,0.5);
  background-repeat: repeat;
  background-blend-mode: multiply;
  background-size: 120%;
  background-position: center top;
  overflow-x: clip;
 /* background-image:url("/image/desktop.png");*/
  
}

div{
  /* border:1px dotted cyan; */
  padding:0;
  /* top | left and right | bottom */
  margin: 1em 0 1em;
}

a:link, a:visited {
  text-decoration:none;
  color:inherit;
}

/*.poster{*/
/*  background:whiteSmoke;*/
/*  padding:15px;*/
/*  border:2px solid black;*/
/*  box-shadow: 5px 5px 0 black;*/
/*  margin:auto;*/
/*  margin-top:150px;*/
/*  height:fit-content;*/
/*  width:85%;*/
/*  max-width:800px;*/
/*  position:relative;*/
/*  z-index: 0;*/
/*}*/
.divider{
  
  border:none ;
  border-bottom:dotted 4px black;
  padding:2px;
  
}

.profile{
  
  display:flex;
  flex-direction:row;
  width:100%;
  height:fit-content;
  padding:0;
  gap:5px;
  justify-content: space-between;
  
}

.photo{
  flex:1;
  background-image: url('image/birb.jpg');
  background-size: cover;
  background-position: center center; 
  background-repeat: no-repeat;
  width:30%;
  min-width:100px;
  aspect-ratio:1/1;
  margin:0;
}
.intro{
  margin:0;
  flex:1.8;
  background:none;
}
.links{
position:absolute; left:auot;right:20%; top:0;  writing-mode: vertical-rl; text-orientation: upright;

}

.link-block{
  backdrop-filter: blur(10px);   
  -webkit-backdrop-filter: blur(5px);
  padding:10px;width:50%; 
  padding-bottom:30px;
  margin:auto;z-index:-1;
  margin-top:10%; 
  border-radius:30px; 
  box-shadow:inset 3px 3px 4px rgba(255,255,255,0.4), 3px 3px 10px rgba(0,0,0,0.3); 
  border:1px rgba(255,255,255,0.4) solid;
  background:linear-gradient(-45deg, rgba(0,255,0,0.3) 10%,  rgba(255,255,255,0.1) 85%);
 
}

.circles{
  
  width:50px; 
  padding:0;
  position:absolute; 
  top:-75px;display:flex;
  flex-direction:column;
  gap:10px;
}

.poster-bg{
  background-attachment: fixed;
  margin:80px auto 80px; 
  padding:10px;
  width:100%; 
  height:500px; 
  background-image: url('image/building01.jpg');
  background-size:cover; 
  background-position: center center; 
  background-repeat:no-repeat;border:none;
}
.sticker{
  position: absolute;
  z-index:2;
  width:120px;
  height: fit-content;
  border-radius:5px;
  background: rgb(12,103,166);
  background: linear-gradient(39deg, rgba(12,103,166,1) 0%, rgba(13,41,125,1) 66%);
  padding:3px;
  transform: rotate(-1deg);
  margin:3px;
  top:-20%;
  color: whitesmoke;
  right:-10%;
  text-align: center;
  overflow: hidden;
  display:flex;
  flex-direction: column;
  gap:0;
  cursor: pointer;
  font-family: "Chocolate Classical Sans", sans-serif;
}
.flyer{
  background:wheat; box-shadow: 3px 3px 5px rgba(0,0,0,0.3); width:480px; height:fit-content; padding:10px;padding-bottom:0; position:relative;margin:auto;

}

.menu{
  display:flex;flex-direction:row; margin:auto; width:100%;height: var(--formLine);
z-index: 2;
}
.menu:hover{
  color:wheat;
  background: #000;
  cursor: pointer;
  box-shadow:inset 0px 0px 0px 2px  wheat;
}

.form-titles{
margin:0;flex:2; 
padding:5px;
padding-left:0px;
text-align: right;
-webkit-font-smoothing:none;

}
.form-contents{
  margin:0;flex:3; 
  text-align:right;
  padding:5px;
  padding-left:0px;
  border-left:1px black solid;
  -webkit-font-smoothing:none;
}

.dotted-box{

  background-image: radial-gradient(
              circle at center,
              black 0.05rem,
                transparent 0
              ), radial-gradient(circle at center, black 0.05rem, transparent 0);
            background-size: 3px 3px;
            background-position: 0 0, 1.5px 1.5px;
}

.開電{
  --redWidth:100px;
  width: var(--redWidth);
  transform: rotate(2deg);
  }
  


.torn-off{
  webkit-writing-mode: vertical-lr; 
  writing-mode: vertical-lr; 
  font-size:32px;margin:0;
  padding:15px;
  margin-top:5px;
  padding-right:5px;
  padding-left:5px;
  border-right: solid 2px #000;
  border-top: dotted 2px #000;
  border-bottom: none;
  box-shadow: 3px 3px 4px rgba(0,0,0,0.3);
  position: relative;
}

.torn-off::after{
position:absolute;
content: "";  /* Unicode for U+2702 (scissors symbol) */
font-family: "Segoe UI", "Helvetica Neue", sans-serif; 
-webkit-font-smoothing: antialiased;
font-feature-settings: "liga" 0; /* Disables ligatures (in case any weird ligatures are being applied) */
top: -6px;
left:0em;
font-size: 14px;
text-rendering: optimizeLegibility;
}

.panel{
  
  --pgap:8px;
  --panelWidth:320px;
  --p1:108px;
  --p2:32px;
  --letterSpace:0.3em;
  --zoneSpace:0.2em;
      display: flex;
      flex-direction: row;
      background-color: whitesmoke;
      width: var(--panelWidth);
      height: calc(var(--panelWidth)*3/4);
      /* aspect-ratio: 4/3; */
      border-radius: 10px; 
      background-color: green;
      padding:var( --pgap);
      gap:var( --pgap);
      align-content:stretch;
      box-shadow: 3px 3px 5px rgba(0,0,0,0.4), -3px -3px 5px rgba(255,255,255,0.3),
      inset 1px 1px 3px rgba(255,255,255,0.9);
}


#num{

  padding:0px;margin:0px;
  font-size: var(--p1);
}

#num:after{
  content:"???";
  animation: spin 0.5s linear infinite;
}

@keyframes spin {
  0% { content:"127"; }
  20% { content:"824"; }
  40% {content:"004"; }
  60% { content:"237"; }
  80% { content:"700"; }
  
}




/* phone */
 @media (max-width: 599px) {
    h1 {
        font-size: 54px;
        line-height: 1.2em;
    }
    h2{
      font-size: 24px;
      margin:0 auto 0.4em ;
    }
    p {
        font-size: 1em;
    }
      
  .coffee{
    width:400px;
     
   }
    
  .header{
    width:90%; z-index:1;position:absolute;
    top:-125px;left:5px;
    }
  .intro{
  margin:0;
  flex:1;
  background:none;
}


.poster{
  background:whiteSmoke;
  padding:15px;
  border:2px solid black;
  box-shadow: 5px 5px 0 black;
  margin:auto;
  margin-top:100px;
  height:fit-content;
  width:85%;
  max-width:800px;
  position:relative;
  z-index: 0;
  
}

.photo{
  flex:1;
  background-image: url('image/birb.jpg');
  background-size: cover;
  background-position: center center; 
  background-repeat: no-repeat;
  width:30%;
  min-width:100px;
  aspect-ratio:1/1;
  margin:0;
}
   
  .trivia{
  width:56%;
  aspect-ratio:4/3;
  padding:15px 10px 5px;
  border:2px solid black;
  background: var(--green);
  box-shadow:5px 5px 1px black;
  /*align-content: center;*/
  position:absolute;
  bottom:-90%;
  left:10px;
} 

.links{
position:absolute; left:auto;right:-2%; top:0;  writing-mode: vertical-rl; text-orientation: upright;

}
.link-block{
 
  padding:10px;
  width:75%; 
  margin:10% auto auto 5%;
  z-index:-1;
  
}
.circles{
  
  width:30px; 
  padding:0;
  position:absolute; 
  top:-5%;
  left:-45px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.poster-bg{
  height:500px;
  background-image:url('image/building01.jpg');
}
.panel{
  --pgap:5px;
  --panelWidth:180px;
  --letterSpace:0.3em;
  --zoneSpace:0.1em;
  --p1:54px;
  --p2:18px;
}


.開電{
--redWidth:60px;
width: var(--redWidth);
}


.flyer{
  --address:20px;
  --formLine:40px;
  width: 80%;
}
.flyer .torn-off{

  font-size: 18px;
}
.flyer p{

font-size: 10px;
}
.form-titles{
  font-size: 10px;
}
.form-contents{
  font-size: 10px;
}

}

/* Tablet */
@media (min-width: 600px) and (max-width: 899px) {
  
      h1{
          font-size: 56px;
          line-height: 1.2em;
        }
      h2{
          font-size: 36px;
          margin:0 auto 0.8em ;
        }
        
        
  .header{
    width:90%; z-index:1;position:absolute;
    top:-125px;left:5px;
    }
  .poster{
  background:whiteSmoke;
  padding:15px;
  border:2px solid black;
  box-shadow: 5px 5px 0 black;
  margin:auto;
  margin-top:140px;
  height:fit-content;
  width:85%;
  max-width:800px;
  position:relative;
  z-index: 0;
  
}

.trivia{
  width:30%;
  aspect-ratio: 4/3;
  padding:15px 10px 5px;
  border:2px solid black;
  background: var(--green);
  
  box-shadow:5px 5px 1px black;
  position:absolute;
  bottom:-40%;
  left:30px;
}

.link-block{
 
  padding:10px;width:70%; 
  margin:10% auto auto 10%;
  z-index:-1;
  
}
.links{
  position:absolute; left:auot;right:6%; top:0;  writing-mode: vertical-rl; text-orientation: upright;
  
  }
  
.circles{
  
  width:50px; 
  padding:0;
  position:absolute; 
  top:35%;
  left:-8vw;
  display:flex;
  flex-direction:column;
  gap:10px;
}
  
.coffee{
  width:400px;
   
 }

}

/* Desktop */
@media (min-width: 900px) {

     h1{
          
          font-size: 62px;
          line-height: 1.2em;
        }
      h2{
           font-size: 36px;
          margin:0 auto 0.8em ;
        }
        
.header{
    width:90%; z-index:1;position:absolute;
    top:-135px;left:5px;
    }
        
  .poster{
  background:whiteSmoke;
  padding:15px;
  border:2px solid black;
  box-shadow: 5px 5px 0 black;
  margin:auto;
  margin-top:150px;
  height:fit-content;
  width:85%;
  max-width:800px;
  position:relative;
  z-index: 0;
  
}

.trivia{
  width:250px;
  aspect-ratio:4/3;
  padding:15px 10px 5px;
  border:2px solid black;
  background:var(--green);
  box-shadow:5px 5px 1px black;
  /*align-content: center;*/
  position:absolute;
  bottom:-25%;
  left:30px;

  z-index:2;
}
.links{
  position:absolute; left:auot;right:10%; top:0;  writing-mode: vertical-rl; text-orientation: upright;
  
  }
  
  .coffee{
   width:600px;
    
  }

}