/* Alla element får box-sizing: border-box så padding och border inkluderas i elementets totala bredd och höjd */
* {
    box-sizing: border-box;
}

/* Grundinställningar för body: nollställer marginaler, sätter typsnitt, bakgrundsfärg, textfärg och radavstånd */
body 
{
    margin: 0;
    font-family: 'Times New Roman', Times, serif;
    background-color: #111;
    color: #fff;
    line-height: 1.6;
}

/* Gör att alla bilder anpassas till 100% av sin förälders bredd */
img
{
    width: 100%;
}

/* Header: bakgrundsfärg, padding, centrerar texten, positioneras relativt (för ev. positionerade barn) */
header 
{
    background-color: #222;
    padding: 20px 0;
    text-align: center;
    position: relative;
}

/* Rubriken i header: sätter typsnitt, färg, storlek och nollställer marginal */
header h1 
{
    font-family: "Tagesschrift", system-ui;
    color: #fff;
    font-size: 36px;
    margin: 0;
}

/* Navigation: flexbox för horisontell centrering, marginal upptill och större textstorlek */
nav 
{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    font-size: x-large;
}

/* Navigationslänkar: färg, padding, ingen understrykning, mellanrum och rundade hörn, med transition */
nav a 
{
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    margin: 0 15px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

/* Hovereffekt för länkar: ändrar bakgrundsfärg */
nav a:hover
{
    background-color: #444;
}

/* Formuläret i header: flexboxcentrerat med marginal ovanför */
.header-form 
{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* Inputfält i formuläret: padding, mellanrum, rundade hörn, färginställningar */
.header-form input 
{
    padding: 10px;
    margin: 0 10px;
    border-radius: 5px;
    border: 1px solid #444;
    background-color: #222;
    color: #fff;
} 

/* Gridcontainer: två kolumner, 40% och 60%, med vit kantlinje och rundade hörn */
.container
{
    display: grid;
    grid-template-columns: 40% 60%;
    border-radius: 10px;
}

/* Klass för logobild som ska ta upp båda kolumnerna */
.loggaImg{
     grid-column: 1/3; 
}

/* Nyhetssektion: spänner över båda kolumner, använder grid med tre kolumner och styling */
.main-news 
{
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #222;
    padding: 35px;
    border-radius: 8px;
    row-gap: 8px;
    column-gap: 12px;
    font-family: "Orbitron", sans-serif;
}

/* Första nyhetsbilden: placeras i första kolumnen */
.mainNews-pic1
{
    grid-column: 1/2;
}

/* Andra nyhetsbilden: placeras i andra kolumnen och tar hela höjden */
.mainNews-pic2
{
    height: 100%;
    grid-column: 2/3;
}

/* Tredje nyhetsbilden: placeras i sista kolumnen */
.mainNews-pic3
{
    grid-column: 3/-1;
}

/* Rubrik i nyhetssektion: sträcker sig över hela raden, centrerad, med nytt typsnitt och storlek */
.main-news h2 
{
    grid-column: 1/-1;
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    font-size: 32px;
    text-align: center;
}

/* Info-container under nyhetssektion: sträcker sig över hela grid-raden */
.info-container
{
    grid-column: 1/-1;
}

/* Bilder i nyhetssektion: rundade hörn och marginal upptill */
.main-news img 
{
    width: 100%;
    border-radius: 8px;
    margin-top: 15px;
} 

/* Text i nyhetssektion: större fontstorlek och marginal upptill */
.main-news p 
{
    font-size: 18px;
    margin-top: 15px;
}

/* Sidfoten: tar upp tre kolumner, bakgrundsfärg, centrerad text, padding och textstorlek */
footer 
{
    grid-column: 1/4;
    background-color: #222;
    text-align: center;
    padding: 20px;
    color: #fff;
    font-size: large;
}

/* Länkar i sidfoten: vit färg, padding, ingen understrykning, rundade hörn och övergångseffekt */
footer a
{
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    margin: 0 15px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

/* Hovereffekt på länkar i footer */
footer a:hover
{
    background-color: #444;
}

/* Sociala medielänkar i footer: mellanrum mellan ikoner/länkar */
footer .social-media a 
{
    margin: 0 10px;
} 

/* Produktersektion: fyra kolumner, ljus bakgrund, padding, rundade hörn, centrerad text och färginställningar */
.mainProducts
{
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: rgba(255, 255, 255, 0.85);
    padding: 35px;
    border-radius: 8px;
    row-gap: 8px;
    column-gap: 12px;
    gap: 2rem;
    color: #111;
    text-align: center;
}

/* Rubrik för produktersektion: klassiskt typsnitt och färg, sträcker sig över hela raden */
.mainProducts-Rubrik 
{
    font-family: 'Times New Roman', Times, serif;
    color: #111;
    grid-column: 1/-1;
}  

/* H3-rubriker: centrerad och med lite större text */
h3
{
    text-align: center;
    font-size: large;
}

/* H4-rubriker: lite större text */
h4
{
    font-size: large;
}

/* Huvudsektion för produkter: tar upp tre kolumner */
.Produkter-main
{
    grid-column: 1/4;
}

/* Sektion för senaste trådar: hel bredd, mörk bakgrund, vit text, padding och centrerad text */
.latest-threads
{
    grid-column: 1/-1;
    background-color: #222;
    color: #fff;
    padding: 35px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: center;
}

/* Forumtabell: tar hela bredden, tar bort dubbla kanter mellan celler, och marginal ovanför */
.forum-table 
{
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

/* Tabellen: padding och bottenram på celler, vänsterjusterad text */
.forum-table th, .forum-table td
{
    padding: 12px;
    border-bottom: 1px solid #444;
    text-align: left;
}

/* Varannan rad i tabellen får olika bakgrundsfärg för tydlighet */
.forum-table tr:nth-child(even) 
{
    background-color: #333;
}
.forum-table tr:nth-child(odd) 
{
    background-color: #222;
}

/* Länkar i tabellen: ljusblå färg utan understrykning */
.forum-table a 
{
    color: lightblue;
    text-decoration: none;
}

/* Hovereffekt på länkar i tabellen: lägger till understrykning */
.forum-table a:hover 
{
    text-decoration: underline; 
}  

/* Footeretiketter: centrerar innehållet (antagligen ett flexbox-element) */
.Label-foot
{
    justify-content: center;
}