body {
                font-family: "courier-std", courier, monospace;
                font-size: 14px;
                margin: 0;
                background-color: #c6c6c6;
                color: #000;
            }
            
            
      a {
        
  text-decoration: none;      
  display: inline-block;
  vertical-align: middle;
  -ms-webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -ms-webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -ms-webkit-transition-property: transform;
  transition-property: transform;
        
      }
      
      a:hover {
        
  -ms-webkit-transform: translateX(8px);
  transform: translateX(8px);
        
      }

            #container {
                max-width: 600px;
                margin: 0 auto;
            }

            #container a {
                color: #0000ff;
                font-weight: bold;
            }


            #flex {
                display: flex;
            }

           
            main {
                background-color: #efefef;
                flex: 1;
                padding: 20px;
                order: 2;
                overflow-y: scroll;
                height: auto;
                scrollbar-width: thin;
            }

            h1 {
                font-size: 25px;
            }

            strong {
                color: #000;
            }

            .box {
                background-color: #a1a100;
                border: 1px solid #000;
                padding: 10px;
            }
            
            p {
            font-weight: bold;  
            }


            @media only screen and (max-width: 800px) {
                #flex {
                    flex-wrap: wrap;
                }

                main {
                    order: 1;
                }




            }
            
            #art2020, #art2021, #art2022, #art2023, #art2024, #art2026 {
   display: none;
   width: 500px;
   height: 0px;
   text-align: left;
   animation: fadeEffect 1s;
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

img {
    max-height: 50vh;
}

#faq-box {
  background: #e6e6e6;
  border: 1px solid #bdbdbd;
  padding: 15px;
  margin-top: 20px;
}

.faq-item {
  margin-bottom: 10px;
}

.faq-q {
  width: 100%;
  text-align: left;
  background: #dcdcdc;
  border: 1px solid #b0b0b0;
  padding: 8px;
  cursor: pointer;
  font-family: inherit;
}

.faq-q:hover {
  background: #cfcfcf;
}

.faq-a {
  display: none;
  padding: 8px;
  background: #f2f2f2;
  border-left: 2px solid #b0b0b0;
}