Gemini
Trevligt Samtal Och Hjälp
Ny chatt
Mina grejer
Gems
Chattar
Trevligt Samtal Och Hjälp
Pitcha Epic Owner för molnplattform
Prästen Mikaela i Alunda Församling
Fyllningar för Ugnsbakade Champinjoner
Xbox One och DVD-filmer: Ingen fara
Förbättra affärsmail vid uppsägning
Påskäggsidéer för barn i olika åldrar
Sommarpraktik i Östhammar för åttor
Djurgården Hockey Herr: Spelare 2026/27
När byta till vinterdäck i Sverige
Mr Voon Stockholm: Stängt, men Miss Voon Kvar
Supertext: Alla ser meddelanden i gruppen
Hundens Blöta Nos: Funktioner Och Betydelse
Irans storlek jämfört med Europa
Kontaktlista Från Bild
Förbättra Styrelsepresentation På Webbplats
Rensa iPhone-lagring från bilagor
Ätbara presenter till 81-årig pappa
Slå ihop Apple-ID:n: En omöjlighet
Byta Apple-ID på iPhone
Guide: Sätta in andra SIM-kort på iPhone
Lön inom ICE i USA
SAFe-begrepp: POS, PO, och PoS
Vad är BPM och dess livscykel
Välkomnande och Hjälpsam Konversation
Integrerat Kylskåp: Kostnad och Överväganden
Svenska och engelska ord för lunch/middag
Recept: Krämig Feta- & Philadelphiapasta
Återläsa Hogia Lön Säkerhetskopia
Kreativt Projekt Med Fiona
Rostbiff: Klassiska och moderna tillbehör
Såser till rostbiff och potatis
Andapsin-behandling för hästens magsår
Rädda överskriven fil i Windows
Tapenade till torsk och potatis

Aktivitet

Inställningar och hjälp
Alunda, Sverige
Utifrån din IP-adress
•
Uppdatera plats
Konversation med Gemini
Du sa
Hejsan'

Gemini sa
Hejsan! 👋

Vad trevligt att du tittar förbi. Hur står det till idag? Finns det något speciellt jag kan hjälpa dig med, eller vill du bara snacka lite?

Du sa
Intregrera css in i denna css

/*basic css*/

* {

margin:0;padding:0;

}



/* lists */

ul {

text-decoration: none;

list-style-type:none;

}

li {

text-decoration: none;

list-style-type:square;

}

ol {

text-decoration: none;

list-style-type:none;

}

p {

    line-height: 1.8em;

    margin: 8px 5px 15px;

}



/*links, code, blockqoute*/

a:link {

color: #0066FF;

}



a:visited, a:hover {

color: #7a7a7a;

}



code, pre {

line-height:1.3em;

}



pre {

border:1px dotted #333;

padding:10px;

}

blockquote {

    color: #3D5C5C;border-left: 5px solid #BACFE9;

    font-style: italic;

    margin-bottom: 10px;

    margin-left: 3em;

    padding-left: 5px;

    visibility: inherit;

}



/* The body */

body {

    background: url(https://staticjw.com/n/templates/sweetflow/images/bg.png) repeat-x scroll 0 0 #BACFE9;

    color: #000;

    font-family: Trebuchet MS,Helvetica,Arial,Sans-serif;

    font-size: 15px;

    height: 100%;

    line-height: 22px;

    margin: 0;

    padding: 0;

    text-align: left;

    width: 100%;

}



/* headlines */

h1, h2, h3, h4, h5, h6 {

font-family: Helvetica, Trebuchet MS,Arial,Sans-serif;

}



/*Boxes*/

#container {

    background: none repeat scroll 0 0 #FFF;

    margin: 10px auto;

    position: relative;

    width: 940px;

}

#navtop {

    background: none repeat scroll 0 0 #333;

    height: auto;

    margin: 20px 0 0;

    padding: 0 0 5px;

    width: 940px;

}

#header-headlines {

    padding: 8px 0 0;

}



#navigation {

    float: right;

    font-size: 12px;

    height: 40px;

    letter-spacing: 2px;

    margin: 3px auto 0;

    text-decoration: none;

    text-transform: uppercase;

}



#user-header {

    height: auto;

    margin: 1px 0;

    width: 940px;

}

#content-box {

    display: inline-block;

}



#content {

    color: #333333;

    float: left;

    margin: 0 45px 0 15px;

    padding: 0 5px;

width: 57%;

}



#sidebar {

    background: none repeat scroll 0 0 #EEE;

    color: #000000;

    float: left;

    padding: 0;

    width: 33%;

}

#footer {

    border-top: 1px dashed #CCC;

    clear: both;

    color: #000000;

    height: 30px;

    text-align: center;

    width: 100%;

}



/*Header*/

#header-headlines h3 {

    margin: 0 11px;

}

#header-headlines h3 a {

    color: #FFFFFF;

    font-size: 28px;

line-height:30px;

    text-decoration: none;

}



#header-headlines h4 {

    color: #DEEDFB;

    font-size: 12px;

    margin: 0 23px;

    text-decoration: none;

}



/*Menu/Navigation */

#nav ul , #nav li {

text-decoration: none;

list-style-type:none;

}



ul#nav {

    height: 36px;

    list-style: none outside none;

}

ul#nav li {

    float: left;

    margin-right: 7px;

}



ul#nav li#active a{

    background: url(https://staticjw.com/n/templates/sweetflow/images/arrow.png) no-repeat;

    color: #ffffff;

}



ul#nav li a {

    color: #DEEDFB;

    display: block;

    height: 35px;

    margin-top: 5px;

    padding: 1px 10px;

    text-decoration: none;

}

ul#nav a:hover {

    color: #7a7a7a;



 }



/*Content */

#content h1 {

    font-size: 23px;

    margin: 4px 0 5px;

}

#content h2 {

    font-size: 20px;

    margin: 4px 0 5px;

}

#content h3 {

    font-size: 15px;

    margin: 25px 0 5px;

}



#content h4 {

    font-size: 13px;

    margin: 25px 0 5px;

}



#content p {

margin-left:5px;

}



#content ul {

    line-height: 1.5em;

    margin: 0 0 1.571em 1.571em;

}



#content ul li {

margin-bottom: 15px;

}



#content ol {

    line-height: 1.5em;

    margin: 0 0 1.571em 1.571em;

}

#content ol li {

margin-bottom: 0.6em;

list-style:decimal outside none;

}

#content img {

    border:1px solid #aaa;

    padding:1px;height: auto;

    max-width: 100%;

}

/*Sidebar*/

#sidebar h4 {

    background: url(https://staticjw.com/n/templates/sweetflow/images/h4bg.png) no-repeat scroll 0 0 transparent;

    border-bottom: 3px solid;

    color: #224166;

    font-size: 15px;

    margin-bottom: 8px;

    padding: 3px 5px 3px 11px;

}



#sidebar p {

    margin: 0 5px 10px 15px;

}



#sidebar ul {

    margin: 0 0 5px 15px;

}



#sidebar ul li {

    list-style: circle outside none;

    margin-left: 35px;

    padding: 0 0 5px 5px;margin-bottom: 10px;

}

#sidebar ol {

    margin: 0 0 1.571em 4.571em;

}



#sidebar ol li {

list-style:decimal outside none;

}



#sidebar p img {

    border: none;

    margin: 7px;

}



/*Footer*/



#footer a {

color:#7a7a7a;

}



/* The contact - form */

fieldset#contact-form {

    background: none repeat scroll 0 0 #EEEEEE;

    border: 1px dashed #3D5C82;

    color: #7A7A7A;

    margin: 20px 0;

    padding: 10px;

    width: 400px;

}

fieldset#contact-form label {

font-size:13px;

}



fieldset#contact-form input {

    background: none repeat scroll 0 0 #CCCCCC;

    font-size: 13px;

    height: 20px;

    margin-bottom: 15px;

    padding: 5px;

    width: 240px;

}

fieldset#contact-form textarea {

background: none repeat scroll 0 0 #CCCCCC;

    font-size: 16px;

    margin-bottom: 15px;

    padding: 10px;

    width: 94%;

}

fieldset#contact-form #contact-button {

    font-size: 15px;

    height: 39px;

    margin-left: 1%;

    padding: 0 0 2px;

}

#content hr {margin:30px 10px;border:1px solid #BBCFEA;}

@media (max-width:1024px) {

#navtop {

    background: #333 none repeat scroll 0 0;

    height: auto;

    margin: 2% 0 0;

    padding: 0 0 5px;

    width: 100%;

}



#navigation {

    float: right;

    font-size: 12px;

    height: auto;

    letter-spacing: 2px;

    margin: 3px auto 0;

    text-decoration: none;

    text-transform: uppercase;

    width: 100%;

}



#container {

    width: 93%;

}

#user-header {

    height: auto;

    margin: 1px 0;

    width: 100%;

}

}

@media (max-width:900px) {

#sidebar {

    background: #eee none repeat scroll 0 0;

    color: #000;

    float: left;

    padding: 0;

    width: 31%;

}

#content {

    color: #333;

    margin: 0 25px 0 15px;

    width: 60%;

}}

@media (max-width:767px) {

#sidebar {

    background: #eee none repeat scroll 0 0;

    color: #000;

    float: none;

    padding: 0;

    width: 100%;

}

#content {

    color: #333;float:none;

    margin: 15px;

    width: 94%;

}

#sidebar h4 {

    background: transparent url(https://staticjw.com/n/templates/sweetflow/images/h4bg.png) no-repeat scroll 0 0 / 100% auto;

    border-bottom: 3px solid;

    color: #224166;

    margin-bottom: 8px;

    padding: 3px 5px 3px 11px;

}

}

@media (max-width:700px) {

body {

    background: #bacfe9 url(https://staticjw.com/n/templates/sweetflow/images/bg.png) repeat-x scroll 0 0 !important;

}

#content-box {

    padding: 0 10px;

    width: 94%;

}

#content {

 padding-left: 10px;

    padding-right: 10px;

    width: 96%;

}

#sidebar {

    margin-left: 1%;}

blockquote {

    margin-left: 1em;

}

#footer {

    height: auto;}


fieldset#contact-form {

    width: 72%;

}

fieldset#contact-form textarea {

    width: 93%;

}

}

@media (max-width:480px) {

#content img {

    float: none !important;

clear:both;

}

#content {

    float: none;

    margin: 10px 0;

}

#content h1 {

    font-size: 21px;

    line-height: 20px;

    margin: 4px 0 5px;

}

fieldset#contact-form {

    width: 90%;

}



fieldset#contact-form input {

    width: 74%;

}

#content h2 {

    font-size: 18px;

}

#header-headlines h3 a {

    color: #fff;

    font-size: 25px;

    line-height: 25px;

}

#header-headlines h4 {

    margin: 0 13px;

}

}

@media (max-width:375px) {

fieldset#contact-form input {

    width: 95%;

}

#sidebar {

    margin-left: 0;

}

.blog-date {

    color: #888;

    padding-right: 4px;

}

}





Inkludera detta

<style>

  :root {

    --primary-color: #468faf;    /* Mörkblå */

    --accent-color: #64b5f6;     /* Himmelblå */

    --text-color: #444;          /* Grå text */

    --wheel-sky-dark: #a9d6e5;   /* Hjulets gradient botten */

    --wheel-sky-light: #e3f2fd;  /* Hjulets gradient topp */

    --bg-white: #ffffff;

    --distance: 210px;           /* Avstånd för boxarna i hjulet */

  }



  /* GEMENSAM CONTAINER */

  .byalag-main-card {

    max-width: 950px;

    margin: 40px auto 100px auto;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    background-color: var(--bg-white);

    border: 1px solid #e1f5fe;

    border-radius: 20px;

    box-shadow: 0 15px 45px rgba(70, 143, 175, 0.1);

    overflow: hidden; /* Håller allt snyggt innanför rundade hörn */

    position: relative;

  }



  /* ÖVRE DELEN: VÄLKOMSTTEXT */

  .welcome-part {

    padding: 60px 50px 20px 50px;

    text-align: center;

  }



  .welcome-part h1 {

    color: var(--primary-color);

    font-size: 2.2rem;

    font-weight: 300;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin: 0 0 30px 0;

  }



  .welcome-text-content {

    max-width: 750px;

    margin: 0 auto;

    line-height: 1.8;

    color: var(--text-color);

    font-size: 1.1rem;

    text-align: left;

  }



  .welcome-text-content p {

    margin-bottom: 20px;

  }



  /* AVGRÄNSARE */

  .section-divider {

    width: 60%;

    height: 1px;

    background: linear-gradient(90deg, transparent, #e3f2fd, transparent);

    margin: 40px auto;

  }



  /* NEDRE DELEN: ÅRSHJUL */

  .wheel-part {

    padding-bottom: 120px; /* Plats för boxarna längst ner */

    position: relative;

    text-align: center;

  }



  .wheel-part h2 {

    color: var(--primary-color);

    font-size: 1.6rem;

    font-weight: 300;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 0;

  }



  .year-wheel {

    position: relative;

    width: 240px;

    height: 240px;

    margin: 180px auto; /* Skapar luft för boxarna som svävar runt */

    border: 10px solid #bbdefb;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--wheel-sky-light) 0%, var(--wheel-sky-dark) 100%);

    box-shadow: 0 10px 40px rgba(70, 143, 175, 0.1);

  }



  .wheel-center-text {

    font-weight: bold;

    color: var(--primary-color);

    font-size: 1rem;

    line-height: 1.2;

    text-align: center;

  }



  /* AKTIVITETSBOXAR */

  .activity-item {

    position: absolute;

    width: 145px;

    padding: 10px;

    background: rgba(255, 255, 255, 0.98);

    border: 1px solid #e0e0e0;

    border-radius: 12px;

    font-size: 0.8rem;

    box-shadow: 0 4px 12px rgba(0,0,0,0.06);

    color: #555;

    text-align: center;

    z-index: 10;

  }



  .month-label {

    display: block;

    font-weight: bold;

    color: var(--accent-color);

    text-transform: uppercase;

    font-size: 0.7rem;

    margin-bottom: 3px;

  }



  /* POSITIONERING (Använder variabeln --distance) */

  .pos-1 { transform: rotate(-90deg) translate(var(--distance)) rotate(90deg); } /* Dec */

  .pos-2 { transform: rotate(-45deg) translate(var(--distance)) rotate(45deg); } /* Feb */

  .pos-3 { transform: rotate(0deg) translate(var(--distance)) rotate(0deg); }   /* Apr 1 */

  .pos-4 { transform: rotate(45deg) translate(var(--distance)) rotate(-45deg); }/* Apr 2 */

  .pos-5 { transform: rotate(90deg) translate(var(--distance)) rotate(-90deg); }/* Maj */

  .pos-6 { transform: rotate(135deg) translate(var(--distance)) rotate(-135deg); }/* Jun */

  .pos-7 { transform: rotate(180deg) translate(var(--distance)) rotate(-180deg); }/* Aug */

  .pos-8 { transform: rotate(225deg) translate(var(--distance)) rotate(-225deg); }/* Sep */



  /* MOBILANPASSNING */

  @media (max-width: 850px) {

    .welcome-part { padding: 40px 20px 10px 20px; }

    .welcome-part h1 { font-size: 1.6rem; }

    .welcome-text-content { font-size: 1rem; }

    .wheel-part { padding-bottom: 60px; }

    .year-wheel { transform: scale(0.5); margin: 100px auto; }

    .byalag-main-card { --distance: 230px; margin: 10px; }

  }

</style>

Gemini sa
Här är din sammanslagna CSS-fil. Jag har organiserat den så att de nya variablerna ligger överst och den nya funktionaliteten för "Årshjulet" hamnar under din befintliga layout-kod.

Jag har också rensat bort <style>-taggarna så att koden är redo att klistras direkt in i en .css-fil.

CSS
/* --- CSS VARIABLER (Nya) --- */
:root {
    --primary-color: #468faf;    /* Mörkblå */
    --accent-color: #64b5f6;     /* Himmelblå */
    --text-color: #444;          /* Grå text */
    --wheel-sky-dark: #a9d6e5;   /* Hjulets gradient botten */
    --wheel-sky-light: #e3f2fd;  /* Hjulets gradient topp */
    --bg-white: #ffffff;
    --distance: 210px;           /* Avstånd för boxarna i hjulet */
}

/* --- BASIC CSS --- */
* {
    margin:0; padding:0;
}

/* lists */
ul {
    text-decoration: none;
    list-style-type:none;
}
li {
    text-decoration: none;
    list-style-type:square;
}
ol {
    text-decoration: none;
    list-style-type:none;
}
p {
    line-height: 1.8em;
    margin: 8px 5px 15px;
}

/*links, code, blockqoute*/
a:link {
    color: #0066FF;
}

a:visited, a:hover {
    color: #7a7a7a;
}

code, pre {
    line-height:1.3em;
}

pre {
    border:1px dotted #333;
    padding:10px;
}
blockquote {
    color: #3D5C5C; border-left: 5px solid #BACFE9;
    font-style: italic;
    margin-bottom: 10px;
    margin-left: 3em;
    padding-left: 5px;
    visibility: inherit;
}

/* The body */
body {
    background: url(https://staticjw.com/n/templates/sweetflow/images/bg.png) repeat-x scroll 0 0 #BACFE9;
    color: #000;
    font-family: Trebuchet MS, Helvetica, Arial, Sans-serif;
    font-size: 15px;
    height: 100%;
    line-height: 22px;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

/* headlines */
h1, h2, h3, h4, h5, h6 {
    font-family: Helvetica, Trebuchet MS, Arial, Sans-serif;
}

/* Boxes */
#container {
    background: none repeat scroll 0 0 #FFF;
    margin: 10px auto;
    position: relative;
    width: 940px;
}
#navtop {
    background: none repeat scroll 0 0 #333;
    height: auto;
    margin: 20px 0 0;
    padding: 0 0 5px;
    width: 940px;
}
#header-headlines {
    padding: 8px 0 0;
}

#navigation {
    float: right;
    font-size: 12px;
    height: 40px;
    letter-spacing: 2px;
    margin: 3px auto 0;
    text-decoration: none;
    text-transform: uppercase;
}

#user-header {
    height: auto;
    margin: 1px 0;
    width: 940px;
}
#content-box {
    display: inline-block;
}

#content {
    color: #333333;
    float: left;
    margin: 0 45px 0 15px;
    padding: 0 5px;
    width: 57%;
}

#sidebar {
    background: none repeat scroll 0 0 #EEE;
    color: #000000;
    float: left;
    padding: 0;
    width: 33%;
}
#footer {
    border-top: 1px dashed #CCC;
    clear: both;
    color: #000000;
    height: 30px;
    text-align: center;
    width: 100%;
}

/* --- BYALAG / ÅRSHJUL KOMPONENTER (Nya) --- */
.byalag-main-card {
    max-width: 950px;
    margin: 40px auto 100px auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-white);
    border: 1px solid #e1f5fe;
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(70, 143, 175, 0.1);
    overflow: hidden;
    position: relative;
}

.welcome-part {
    padding: 60px 50px 20px 50px;
    text-align: center;
}

.welcome-part h1 {
    color: var(--primary-color);
    font-size: 2.2rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 30px 0;
}

.welcome-text-content {
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.8;
    color: var(--text-color);
    font-size: 1.1rem;
    text-align: left;
}

.section-divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e3f2fd, transparent);
    margin: 40px auto;
}

.wheel-part {
    padding-bottom: 120px;
    position: relative;
    text-align: center;
}

.year-wheel {
    position: relative;
    width: 240px;
    height: 240px;
    margin: 180px auto;
    border: 10px solid #bbdefb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wheel-sky-light) 0%, var(--wheel-sky-dark) 100%);
    box-shadow: 0 10px 40px rgba(70, 143, 175, 0.1);
}

.activity-item {
    position: absolute;
    width: 145px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    font-size: 0.8rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    color: #555;
    text-align: center;
    z-index: 10;
}

.month-label {
    display: block;
    font-weight: bold;
    color: var(--accent-color);
    text-transform: uppercase;
    font-size: 0.7rem;
    margin-bottom: 3px;
}

/* Positionering av hjulet */
.pos-1 { transform: rotate(-90deg) translate(var(--distance)) rotate(90deg); }
.pos-2 { transform: rotate(-45deg) translate(var(--distance)) rotate(45deg); }
.pos-3 { transform: rotate(0deg) translate(var(--distance)) rotate(0deg); }
.pos-4 { transform: rotate(45deg) translate(var(--distance)) rotate(-45deg); }
.pos-5 { transform: rotate(90deg) translate(var(--distance)) rotate(-90deg); }
.pos-6 { transform: rotate(135deg) translate(var(--distance)) rotate(-135deg); }
.pos-7 { transform: rotate(180deg) translate(var(--distance)) rotate(-180deg); }
.pos-8 { transform: rotate(225deg) translate(var(--distance)) rotate(-225deg); }

/* --- ÖVRIG TIDIGARE DESIGN --- */
#header-headlines h3 { margin: 0 11px; }
#header-headlines h3 a { color: #FFFFFF; font-size: 28px; line-height:30px; text-decoration: none; }
#header-headlines h4 { color: #DEEDFB; font-size: 12px; margin: 0 23px; text-decoration: none; }

#nav ul , #nav li { text-decoration: none; list-style-type:none; }
ul#nav { height: 36px; list-style: none outside none; }
ul#nav li { float: left; margin-right: 7px; }
ul#nav li#active a{ background: url(https://staticjw.com/n/templates/sweetflow/images/arrow.png) no-repeat; color: #ffffff; }
ul#nav li a { color: #DEEDFB; display: block; height: 35px; margin-top: 5px; padding: 1px 10px; text-decoration: none; }
ul#nav a:hover { color: #7a7a7a; }

/* Content Details */
#content h1 { font-size: 23px; margin: 4px 0 5px; }
#content h2 { font-size: 20px; margin: 4px 0 5px; }
#content h3 { font-size: 15px; margin: 25px 0 5px; }
#content h4 { font-size: 13px; margin: 25px 0 5px; }
#content p { margin-left:5px; }
#content ul { line-height: 1.5em; margin: 0 0 1.571em 1.571em; }
#content ul li { margin-bottom: 15px; }
#content ol { line-height: 1.5em; margin: 0 0 1.571em 1.571em; }
#content ol li { margin-bottom: 0.6em; list-style:decimal outside none; }
#content img { border:1px solid #aaa; padding:1px; height: auto; max-width: 100%; }

/* Sidebar Details */
#sidebar h4 { background: url(https://staticjw.com/n/templates/sweetflow/images/h4bg.png) no-repeat scroll 0 0 transparent; border-bottom: 3px solid; color: #224166; font-size: 15px; margin-bottom: 8px; padding: 3px 5px 3px 11px; }
#sidebar p { margin: 0 5px 10px 15px; }
#sidebar ul { margin: 0 0 5px 15px; }
#sidebar ul li { list-style: circle outside none; margin-left: 35px; padding: 0 0 5px 5px; margin-bottom: 10px; }
#sidebar ol { margin: 0 0 1.571em 4.571em; }
#sidebar ol li { list-style:decimal outside none; }
#sidebar p img { border: none; margin: 7px; }

#footer a { color:#7a7a7a; }

/* Contact Form */
fieldset#contact-form { background: none repeat scroll 0 0 #EEEEEE; border: 1px dashed #3D5C82; color: #7A7A7A; margin: 20px 0; padding: 10px; width: 400px; }
fieldset#contact-form label { font-size:13px; }
fieldset#contact-form input { background: none repeat scroll 0 0 #CCCCCC; font-size: 13px; height: 20px; margin-bottom: 15px; padding: 5px; width: 240px; }
fieldset#contact-form textarea { background: none repeat scroll 0 0 #CCCCCC; font-size: 16px; margin-bottom: 15px; padding: 10px; width: 94%; }
fieldset#contact-form #contact-button { font-size: 15px; height: 39px; margin-left: 1%; padding: 0 0 2px; }
#content hr { margin:30px 10px; border:1px solid #BBCFEA; }

/* --- RESPONSIVITET (Sammanslagen) --- */
@media (max-width:1024px) {
    #navtop { width: 100%; margin: 2% 0 0; }
    #navigation { float: right; font-size: 12px; height: auto; width: 100%; }
    #container { width: 93%; }
    #user-header { width: 100%; }
}

@media (max-width:900px) {
    #sidebar { width: 31%; }
    #content { width: 60%; }
}

/* Mobilanpassning för Byalag-kortet specifikt */
@media (max-width: 850px) {
    .welcome-part { padding: 40px 20px 10px 20px; }
    .welcome-part h1 { font-size: 1.6rem; }
    .welcome-text-content { font-size: 1rem; }
    .wheel-part { padding-bottom: 60px; }
    .year-wheel { transform: scale(0.5); margin: 100px auto; }
    .byalag-main-card { --distance: 230px; margin: 10px; }
}

@media (max-width:767px) {
    #sidebar { float: none; width: 100%; }
    #content { float:none; margin: 15px; width: 94%; }
    #sidebar h4 { background-size: 100% auto; }
}

@media (max-width:700px) {
    #content-box { width: 94%; padding: 0 10px; }
    #content { width: 96%; padding-left: 10px; padding-right: 10px; }
    #sidebar { margin-left: 1%; }
    blockquote { margin-left: 1em; }
    #footer { height: auto; }
    fieldset#contact-form { width: 72%; }
    fieldset#contact-form textarea { width: 93%; }
}

@media (max-width:480px) {
    #content img { float: none !important; clear:both; }
    #content { float: none; margin: 10px 0; }
    #content h1 { font-size: 21px; line-height: 20px; }
    fieldset#contact-form { width: 90%; }
    fieldset#contact-form input { width: 74%; }
    #content h2 { font-size: 18px; }
    #header-headlines h3 a { font-size: 25px; line-height: 25px; }
}

@media (max-width:375px) {
    fieldset#contact-form input { width: 95%; }
    #sidebar { margin-left: 0; }
}