html, body {
  size: portrait;
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto; /* Changed from hidden to auto */
  }

  #searchlink {
  width: 100%;
  }

  .search {
  display:flex;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 25px;
  width: 70%;
  border: 1px solid grey;
  border-radius: 22px;
  box-shadow: 4px 0 0 0 grey; /* Border right */
  box-shadow: 0 0 4px 0 grey; /* Border bottom */
  padding: 5px;
  }
  .left {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  }

  .middle {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  }

  #search-bar{
  padding-left: 12px;
  width:70%;
  height:50px;
  border: 0;
  font-size: 20px
  }

  #search-button{
  height:50px;
  width: 23%;
  background-color: lightgrey;
  color: white;
  border: none;
  border-radius: 22px;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
  }

  .titlebox {
  width: 100%;
  height: 60px;
  text-align: center;
  vertical-align: middle;
  }

  .flex {
  display:flex;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  flex-direction: row;
  gap: 10px;
  justify-content: space-between;
  flex-wrap:wrap;
  }

  .flex > a {
  margin:2px;
  background:rgb(255, 255, 255);
  border:1px solid #bbb;
  text-decoration: none;
  font-size:10pt;
  color:#666;
  }

  .flex > a > DIV {
  display:block;
  padding:10px;
  }

  .flex > .desc {
  margin: 5px 0;
  text-align: center;
  align-items: center;
  }

  .flex > a:hover {
  animation:scaling 0.2s;
  }

  .container:active{  

  background-color:red;

}

  .linkpic {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50px;
    }

    .linkpic2 {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 60%;
    }
    .linkpic3 {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 30%;
    }

  h1 {
    color:rgb(234, 14, 14);
    font-size:14pt;
    margin-top: 25px;
  }

  h2 {
    text-align: center;
    color:rgb(0, 0, 0);
    font-size:10pt;
    font-weight: bold;
  }

  h3 {
    text-align: center;
    color:rgb(0, 0, 0);
    font-size:8pt;
  }

  a:link { text-decoration: none;
  }

  /* animation keyframes */
  @keyframes scaling {
        0% { transform:scale3d( 1, 1, 1 ); }
       25% { transform:scale3d( 0.98, 0.98, 0.98 ) rotate(5deg); }
       50% { transform:scale3d( 0.95, 0.95, 0.95 ) rotate(10deg); }
       75% { transform:scale3d( 0.98, 0.98, 0.98 ) rotate(5deg); }
      100% { transform:scale3d( 1, 1, 1 ); }
  }

  .container {
    display: flex;
    flex-direction: row;
    align-content: stretch;
    height: 100%;
  }

  .column{
    background: #fffefe;
    max-height: 100%;
    flex: 1 0 0;
    padding: 10px;
  }

  .block{
    background: white;
    border-radius: 12px;
    margin: 5px;
    padding: 12px;
    border:1px solid #bbb;
  }

  .block:hover {
    animation:scaling 0.2s;
  }

  .video-popup-btn {
position: relative;
border: none;
background: none;
cursor: pointer;
padding: 0;
display: inline-block;
}

.video-popup-btn:hover .play-icon {
transform: translate(-50%, -50%) scale(1.1);
}

.play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
color: white;
background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}

.video-popup-overlay {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
animation: fadeIn 0.3s ease;
}

.video-popup-overlay.active {
display: flex;
align-items: center;
justify-content: center;
}

.video-popup-content {
position: relative;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
max-width: 90vw;
max-height: 90vh;
}

.video-popup-close {
position: absolute;
top: -10px;
right: -10px;
color: white;
background: #ff4444;
border-radius: 50%;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
cursor: pointer;
font-size: 20px;
font-weight: bold;
z-index: 10000;
}

.video-popup-close:hover {
background: #cc0000;
}

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

/* Responsive Design */
@media (max-width: 768px) {
.video-popup-content iframe {
width: 90vw;
height: calc(90vw * 0.5625); /* 16:9 Aspect Ratio */
}
}