/* Grundläggande reset för att ta bort marginaler och padding */ * { margin: 0; padding: 0; box-sizing: border-box; /* Säkerställer att padding och border inkluderas i elementets totala storlek */ } /* Stilar för */ body { display: flex; flex-direction: row; height: 100vh; background-color: #f5f5f5; color: #333; font-family: 'Helvetica Neue', sans-serif; } /* Bildbehållaren */ .image-container { flex: 1; /* Tar upp halva skärmen */ position: relative; width: 50vw; /* 50% av skärmbredden */ background-size: cover; background-position: center; height: 100vh; /* Full höjd */ opacity: 1; transition: opacity 0.5s ease-in-out; /* Mjuk övergång vid ändringar */ } .nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; color: white; border: none; padding: 10px 15px; cursor: pointer; font-size: 20px; transition: all 0.3s ease; opacity: 0.8; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } .nav-arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.1); text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); } .prev { left: 15px; } .next { right: 15px; } /* Textbehållare */ .text-container { flex: 1; padding: 25px 25px; /* Jämn padding på sidorna */ overflow-y: auto; /* Scrollbar vid behov */ text-align: left; /* Se till att texten är vänsterjusterad */ /* text-align: justify; */ text-align_left; display: flex; flex-direction: column; align-items: flex-start; /* Förhindra att texten centrerar sig */ font-size: clamp(1rem, 2vh, 2rem); /* Anpassar textstorleken dynamiskt efter skärmhöjd */ line-height: clamp(1.4, 2vh, 2.2); /* Anpassar radavståndet efter skärmhöjd */ max-width: 100%; /* Säkerställ att texten verkligen fyller bredden */ word-spacing: 0.1vw; /* Små ordavståndsjusteringar om nödvändigt */ } /* Stilar för rubriker och text */ h1, h2, p { text-align: left; /* Försäkrar att alla rubriker och paragrafer är vänsterjusterade */ } /* Stilar för rubriker och text, storlek */ h1 { font-size: 1.3rem; /* Stor huvudrubrik */ margin-bottom: 5px; } h2 { font-size: 1.3rem; margin-top: 10px; margin-bottom: 5px; position: relative; } p { font-size: 1rem; margin-bottom: 15px; /* Ökar avstånd mellan stycken */ } .text_orgnum { font-size: 1rem; /* Justera storleken efter behov */ } /* Responsiv design för mindre skärmar */ @media (max-width: 768px) { body { flex-direction: column; /* Staplar innehållet vertikalt */ } .image-container { width: 100%; /* Tar upp hela bredden */ height: 40vh; /* Mindre höjd för att ge plats åt text */ } .text-container { height: 60vh; padding: 30px 40px; /* Mindre sidomarginaler på mobilen */ font-size: 1rem; /* Ökad storlek för bättre läsbarhet */ line-height: 1.5; /* Ökat radavstånd för bättre läsbarhet */ text-align:left; } }