@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@600&display=swap');
 .container h1, h4, p {
     margin: 0;
}
 .container{
     margin-right: 10px;
}
 .container h1 {
     margin-top: 8%;
}
 body {
     font-family: 'Noto Sans JP', sans-serif;
     background-color: #1a1a1a;
     color: #ddd;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100%;
     margin: 0;
     padding-bottom: 8%;
    /*margin-bottom: 8%;
     */
     padding: 0;
     box-sizing: border-box;
     position: relative;
     min-height: 100vh;
    /* Make sure the body is at least as tall as the viewport */
}
 h1 {
     margin: 10px;
     padding-top: 5%;
}
 .top-text {
     padding-right: 75px;
}
 .top {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 20px;
}
 .video-container {
     position: relative;
     width: 60%;
     margin: 20px;
     padding: 20px;
}
 h2, video, p {
     margin: 10px;
}
 p {
     opacity: 0.7;
     line-height: 1.25;
}
 video {
     width: 100%;
     max-height: 100%;
     object-fit: contain;
     box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
     cursor: pointer;
}
 .video-card {
     display: none;
     position: fixed;
     top: 25%;
     left: 25%;
     transform: translate(-16%, -20%);
     z-index: 9999;
     background-color: rgba(0, 0, 0, 0.85);
     border-radius: 20px;
     padding: 20px;
     max-width: 100%;
     max-height: 100%;
}
 .video-card.open {
     display: flex;
     flex-direction: column;
     align-items: center;
     animation: fadeIn 0.5s forwards;
}
 .video-card.close {
     animation: fadeOut 0.5s forwards;
}
 .video-card video {
     width: 100%;
     max-height: 100%;
     object-fit: contain;
     margin-bottom: 10px;
}
 .video-card p {
     color: #fff;
     margin-bottom: 0;
}
 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 150%;
     height: 150%;
     background-color: rgba(0, 0, 0, 0.83);
     z-index: 9998;
     display: none;
     animation: fadeIn 0.5s forwards;
}
 .overlay.close {
     animation: fadeOut 0.5s forwards;
}
 .overlay.open {
     display: block;
}
 @keyframes fadeIn {
     from {
         opacity: 0;
    }
     to {
         opacity: 1;
    }
}
 @keyframes fadeOut {
     from {
         opacity: 1;
    }
     to {
         opacity: 0;
    }
}
 a {
     color: #ff7f00;
     text-decoration: none;
     transition: color 0.3s ease;
}
 a:hover {
     color: #ffa500;
}
 h4 {
     font-family: 'Roboto', sans-serif, 'arial';
     font-weight: 400;
     font-size: 20px;
     color: #9b9b9b;
     line-height: 1.5;
}
/* Inputs */
 input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
     font-size: 0.75em;
     color: #999;
     top: -5px;
     -webkit-transition: all 0.225s ease;
     transition: all 0.225s ease;
}
 .styled-input {
     float: left;
     margin: 1rem 0;
     position: relative;
     border-radius: 4px;
}
 .styled-input label {
     color: #999;
     padding: 1.3rem 30px 1rem 30px;
     position: absolute;
     top: 10px;
     left: 0;
     -webkit-transition: all 0.25s ease;
     transition: all 0.25s ease;
     pointer-events: none;
}
 .styled-input.wide {
     width: 650px;
     max-width: 100%;
}
 input, textarea {
     padding: 30px;
     border: 0;
     width: 100%;
     font-size: 1rem;
     background-color: #2d2d2d;
     color: white;
     border-radius: 4px;
}
 input:focus, textarea:focus {
     outline: 0;
}
 input:focus ~ span, textarea:focus ~ span {
     width: 100%;
     -webkit-transition: all 0.075s ease;
     transition: all 0.075s ease;
}
 textarea {
     width: 100%;
     min-height: 15em;
}
 .submit-btn {
     padding: 7px 35px;
     border-radius: 60px;
     display: inline-block;
     background-color: #4b8cfb;
     color: white;
     font-size: 18px;
     cursor: pointer;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.06), 0 2px 10px 0 rgba(0, 0, 0, 0.07);
     -webkit-transition: all 300ms ease;
     transition: all 300ms ease;
     width: 20%;
     float: none;
     text-align: center;
     transform: translateX(30px);
}
 .input-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     transform: translateX(-25px);
}
 .submit-btn:hover {
     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.10), 0 1px 1px 0 rgba(0, 0, 0, 0.5);
}
 input[type=checkbox] + label {
     color: #ccc;
     font-style: italic;
}
 input[type=checkbox]:checked + label {
     color: #f00;
     font-style: normal;
}
 textarea {
     resize: none;
}
 .back-to-top {
     position: fixed;
     bottom: 70px;
     right: 20px;
     text-decoration: none;
     color: white;
     background-color: #2D2D2D;
     padding: 10px;
     display: none;
     box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
}
 .contact-button {
     position: fixed;
     bottom: 20px;
     right: 20px;
     text-decoration: none;
     color: white;
     background-color: #2D2D2D;
     padding: 10px;
     box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
}
 .video-card .card-content {
     display: flex;
}
 .video-card .card-content .description {
     flex: 1;
     padding-left: 5%;
     padding-right: 5%;
     padding-bottom: 4%;
     display: flex;
     justify-content: center;
     overflow-y: auto;
     max-height: 25vw;
     min-width: 50px;
}
 .video-card .card-content .video-content {
     flex: 3;
}
 .container-title .card-title{
     transform: translate(0px, -20%);
}
 .close-button {
     position: absolute;
     padding-top: 15px;
     top: 10px;
     right: 10px;
     color: #fff;
     font-size: 20px;
     cursor: pointer;
}
 .video-card .card-content .description::-webkit-scrollbar {
     width: 8px;
}
/* Apply dark-themed scrollbars to all scrollable elements */
 ::-webkit-scrollbar {
     width: 15px;
}
 ::-webkit-scrollbar-track {
     background-color: rgba(255, 255, 255, 0.1);
}
 ::-webkit-scrollbar-thumb {
     background-color: #666;
}
 ::-webkit-scrollbar-thumb:hover {
     background-color: #888;
}
 footer{
     margin-top: 6%;
     margin-bottom: 1%;
}
 @media screen and (orientation: portrait) {
     .top {
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column-reverse;
         margin: 0px;
    }
     .top-text{
         padding-right: 0px;
    }
     .video-container {
         position: relative;
         width: 100%;
         margin: 0px;
         padding: 0px;
         padding-top: 25px;
    }
     body {
        /* You may want to adjust these properties to better fit on small screens */
         padding-bottom: 5%;
    }
     h1 {
         margin: 0px;
         margin-top: 10%;
         margin-bottom: 5%;
         padding-top: 0%;
        /* Adjusting the size of your headers may help too */
         font-size: 24px;
    }
     h2{
         font-size: 21px;
         padding-bottom: 5px;
    }
     p {
         font-size: 16px;
    }
     .video-card {
        /* Adjust position and size of the video card for small screens */
         top: 5%;
         left: 5%;
         right: 5%;
         transform: translateY(0%);
    }

     .video-card .card-content {
        all: initial;
    }
     .video-card .card-content .description {
        all: initial;    
    }
     .video-card .card-content .description p{
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 13px;
        text-align: center;
         opacity: 0.7;
         line-height: 1.25;
    }

     .styled-input {
         float: left;
         width: 100%;
         margin: 0px;
         margin-top: 1%;
         margin-bottom: 1%;
         position: relative;
         border-radius: 0px;
    }
     .styled-input label {
         color: #999;
         padding: 1.3rem 30px 1rem 30px;
         position: absolute;
         top: 10px;
         left: 0;
         width: 10%;
         -webkit-transition: all 0.25s ease;
         transition: all 0.25s ease;
         pointer-events: none;
    }
     .styled-input.wide {
         width: 100%;
         transform: translateX(0%);
    }
     .input-container {
        /*left: 0;
        */
         width: 100%;
         max-width: 100%;
         padding-top: 5%;
         display: flex;
         flex-direction: column;
        /*align-items: center;
        */
        /*justify-content: center;
        */
         transform: translateX(0px);
    }
     .submit-btn {
         padding: 0px;
         padding-top: 7px;
         padding-bottom: 7px;
         border-radius: 0px;
         display: inline-block;
         background-color: #4b8cfb;
         color: white;
         font-size: 18px;
         cursor: pointer;
         box-shadow: 0;
         -webkit-transition: all 300ms ease;
         transition: all 300ms ease;
         width: 100%;
         float: none;
         text-align: center;
         transform: translateX(0px);
    }

     .container-title .card-title {
        /* Adjust transformation */
         transform: translate(0px, -10%);
    }
     .back-to-top, .contact-button {
        /* Adjust position of fixed elements */
         bottom: 10px;
         right: 10px;
         display: none !important;
    }
     footer {
        /* Adjust margin */
         margin-top: 3%;
        /*debug code*/
    }
     footer p {
         font-size: 12px;
    }
     .container{
         width: 100%;
         max-width: 100%;
         margin-right: 0px;
         padding-bottom: 3%;
        /*debug code*/
    }
     h2, video, p {
         margin: 0px;
    }

}