body, html { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; } header { background-color: #2E7D32; color: white; padding: 20px; text-align: center; } header h1 a { color: white; text-decoration: none; } nav ul { list-style-type: none; padding: 0; margin: 0; text-align: center; } nav ul li { display: inline-block; margin: 0 5px; } nav ul li a { display: inline-block; padding: 8px 12px; } nav ul li a { color: white; text-decoration: none; font-weight: bold; transition: color 0.3s ease; } nav ul li a:hover { color: #FFD700; } main { padding: 20px; max-width: 1900px; margin: 0 auto; text-align: justify; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 8px; margin-bottom: 60px; } footer { background-color: #333; color: white; text-align: center; padding: 10px; position: sticky; bottom: 0; width: 100%; } footer a { color: white; text-decoration: none; } footer a:visited { color: white; } section { margin-bottom: 40px; } #cases, #files { display: flex; flex-wrap: wrap; justify-content: space-around; } .case, .file { display: flex; flex-direction: column; flex-basis: 45%; margin-bottom: 20px; background-color: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .case img { width: 100%; height: auto; border-radius: 8px; } .file-content { margin-bottom: 20px; overflow: hidden; } .file img { float: left; width: 280px; max-width: 45%; height: auto; margin: 0 20px 10px 0; border-radius: 8px; } @media (max-width: 600px) { .file img { float: none; width: 100%; max-width: 100%; margin: 0 0 10px 0; } } .file p { flex: 2; margin: 0; } @media (max-width: 600px) { .file-content { flex-direction: column; align-items: flex-start; } .case .file img { width: 100%; height: auto; margin-right: 0; margin-bottom: 10px; } .case .file{ flex-basis: 100%; } } h2 { text-align: center; } #cases h3, #files h3, .file h3 { font-size: 1.5em; color: black; margin-top: 20px; text-align: center; } #files .address-container { display: inline-flex; align-items: center; flex-wrap: wrap; } #files .address-span { display: block; margin-top: 10px; word-wrap: break-word; word-break: break-all; max-width: 100%; } #files .address-container code { display: inline-block; white-space: pre-wrap; } ul li { display: flex; align-items: center; justify-content: center; } ul li .address-container { margin-left: 10px; } .show-btn, .copy-btn { background-color: #2E7D32; color: white; border: none; cursor: pointer; border-radius: 5px; font-size: 14px; transition: background-color 0.3s ease; display: flex; align-items: center; justify-content: center; height: 30px; padding: 0 10px; } .show-btn:hover, .copy-btn:hover { background-color: #45a049; } .copy-btn { width: 30px; height: 30px; padding: 0; } .file-container { border: 1px solid #ddd; background-color: #f8f9fa; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 20px; height: 100%; } .additional-info { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 20px; border-top: 1px solid #ccc; } .info-section { flex: 1; padding: 10px; text-align: center; border-right: 1px solid #ccc; } .info-section:last-child { border-right: none; } .info-section i { margin-bottom: 10px; color: #4CAF50; } .info-section p { margin-bottom: 10px; font-weight: bold; } @media (max-width: 768px) { #cases .case { display: flex; flex-direction: column; margin-bottom: 20px; background-color: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #cases .case .file-content { display: flex; flex-direction: column; align-items: flex-start; } #cases .case img { width: 390px; height: auto; margin-bottom: 10px; border-radius: 8px; } #cases .case h3 { font-size: 1.5em; color: black; margin-top: 20px; text-align: center; } #cases .case p { margin: 0; } }