@charset "utf-8";

/* © Peter Nilsson 2026-08-20 LePeNet */

/*	Wipes out web browsers default margins and padding so a website
	looks identical across all browsers!				*/
* {
	margin: 0;
	padding: 0;
}

/*	Forces web browsers to include padding and borders *inside* the
	element's specifies width, making layouts much easier to manage! */
*, *::before, *:: after {
	box-sizing: border-box;
}


/* ====================================
   1. BASSTIL (Gäller för alla skärmar)
   ==================================== */

body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 20px;
/*	background-color: #f4f4f4;	*/
}

/* Bildsäkring: Gör att inga bilder blir bredare än skärmen */
img {
   	 max-width: 100%;
   	height: auto;
}

strong {
	color: darkred;
}

	.layout {
		border: medium solid black;
		border-radius: 8px;
		font-size: 18px;
		text-align: left;
		padding: 8px;
		max-width: 150px;
	}


.box {
	background-color: #ffffff;
	padding: 25px;
/*	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);	*/
	text-align: center;
	max-width: 90%;
}

.box_01 {
	grid-area: box_01;
}

.box_02 {
	grid-area: box_02;
}

.box_03 {
	grid-area: box_03;
}

.box_04 {
	grid-area: box_04;
}

.box_05 {
	grid-area: box_05;
}

.box_06 {
	grid-area: box_06;
}

.box_07 {
	grid-area: box_07;
}

.box_08 {
	grid-area: box_08;
}

.box_09 {
	grid-area: box_09;
}

.box_10 {
	grid-area: box_10;
}

.box_11 {
	grid-area: box_11;
}

.blinking_green {
   animation: mymove 1.7s ease-in-out infinite alternate;
  opacity: 1;
}

.blinking_red {
   animation: mymove 1.3s ease-in-out infinite alternate;
  opacity: 1;
}

@keyframes mymove {
   from {opacity: 0;}
   to {opacity: 1;}
}

#openpgp {
	position: relative;
}

#openpgp_bot_secured {
	font-family: "Comic Sans MS";
	position: absolute;
	left: 130px;
	top: 0px;
	color: #00DD00;
	font-size: 18px;
	font-style: normal;
}

#menu {
	font-family: "Comic Sans MS";
	padding: 10px;
	color: #FFFFFF;
	max-width: 280px;
	border: thin solid #999;
	border-color: #000000;
	font-size: 18px;
	font-style: normal;
	background-color: #C1FFCF;
}

#download {
	position: relative;
}

#download_bot_secured {
	font-family: "Comic Sans MS";
	position: absolute;
	left: 132px;
	top: 0px;
	color: #FF0000;
	font-size: 18px;
	font-style: normal;
}

.menu_item {
	background-color: #FFFDBB;
	padding: 5px;
        max-width: 260px;
	margin: 3px;
	border: thin solid #999;
	border-color: #000000;
	font-size: 18px;
	font-style: normal;
}

#revision {
	position: relative;
	max-width: 320px;
	font-family: "Comic Sans MS";
	background-color: #00FFFF;
	color: black;
        border-style: double solid;
	border-width: medium;
	border-color: black;
        padding: 5px;
	font-size: 16px;
}

#visitor_count {
	font-family: "Comic Sans MS";
	background-color: #FFFF00;
	position: relative;
	max-width: 320px;
	color: black;
        border-style: double solid;
        border-width: medium;
	border-color: black;
        padding: 5px;
	font-size: 18px;
}


/*
.se_flag-anim {
	grid-area: se_flag_anim;
}

.EU_flag-anim {
	grid-area: EU_flag_anim;
}

.NATO_flag-anim {
	grid-area: NATO_flag_anim;
}

.linux {
	grid-area: linux;
}

.nginx {
	grid-area: nginx;
}

.postfix {
	grid-area: postfix;
}

.dovecot {
	grid-area: dovecot;
}

.letsencrypt {
	grid-area: letsencrypt;
}

.he_logo {
	grid-area: he_logo;
}

.bullseye {
	grid-area: bullseye;
}

.nyx {
	grid-area: nyx;
}

.tor {
	grid-area: tor;
}

.roundcube {
	grid-area: roundcube;
}

.spamassassin {
	grid-area: spamassassin;
}
*/


/* ===================================
   2. MOBIL (Skärmar mindre än 1000px)
   =================================== */

@media (max-width: 999px) {

	.layout {
		background-color: lime;
	}

	.text_mobile {
		display: inline;
		font-size: 1.1rem;
		border: none;
	}

	.text_notepad {
		display: none;
	}

	.text_computer {
		display: none;
	}

	.postfix {
		margin: 50px;
	}

	.dovecot {
		margin: 50px;
	}

	.he_logo {
		margin: 50px;
	}

	.nyx {
		margin: 50px;
	}

	/* Grid-containern visar 1 kolumn som standard (mobil) */
	.grid-container {
   		display: grid;
   		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-rows: repeat(auto-fit, minmax(150px, 1fr));
   		gap: 20px;

		grid-template-areas:
		"box_03"
		"box_01"
		"box_02"
		"box_04"
		"box_05"
		"box_06"
		"box_07"
		"box_08"
		"box_09"
		"box_10"
		"box_11";

		.flags {
			display: grid;
			grid-template-columns: subgrid;
			grid-template-areas:
			"se_flag_anim EU_flag_anim NATO_flag_anim";
		}


	}	/* End of grid-container */

}		/* End of @media */


/* ==============================================================
   3. SURFPLATTA (Skärmar bredare än 999px men mindre än 1300px)
   ============================================================== */

@media (min-width: 1000px) and (max-width: 1299px) {

	body {
		padding: 10px; /* Mer luft på stor skärm */
	}

	.layout {
		background-color: pink;
	}

	.text_mobile {
		display: none;
	}

	.text_notepad {
		display: inline;
		font-size: 1.1rem;
	}

	.text_computer {
		display: none;
	}


    /* Ändrar till 2 jämna kolumner sida vid sida på datorn */
    .grid-container {
	display: grid;
        grid-template-columns: repeat(2, 1fr);
/*	grid-template-rows: auto;	*/
	grid-template-rows: repeat(auto-fit, minmax(150px, 1fr));

		grid-template-areas:
		"box_03 box_03"
		"box_01 box_02"
		"box_04 box_04"
		"box_05 box_05"
		"box_06 box_06"
		"box_07 box_07"
		"box_08 box_08"
		"box_09 box_09"
		"box_10 box_10"
		"box_11 box_11";

		.flags {
			display: grid;
			grid-template-columns: subgrid;
			grid-template-areas: "se_flag_anim EU_flag_anim NATO_flag_anim";
		}

		.program_ads_00 {
			display: grid;
			grid-template-columns: subgrid;
			grid-template-areas: "linux nginx";
		}

		.program_ads_01 {
			display: grid;
			grid-template-columns: subgrid;
			grid-template-areas: "postfix dovecot";
		}

		.program_ads_02 {
			display: grid;
			grid-template-columns: subgrid;
			grid-template-areas: "letsencrypt he_logo";
		}


		.program_ads_03 {
			display: grid;
			grid-template-columns: subgrid;
			grid-template-areas: "roundcube spamassassin";
		}

		.bullseye_nyx {
			display: grid;
			grid-template-columns: subgrid;
			grid-template-areas: "bullseye nyx tor";
		}


        max-width: 1200px; /* Förhindrar att sidan blir för bred på jätteskärmar */
       /*margin: 0 auto;*/    /* Centrerar hela layouten */
       margin: 0 10;    /* Lägger layouten längst upp samt 10px från vänsterkant */
    }
}


/* =============================================
   4. LAPTOP & DATOR (Skärmar bredare än 1299px)
   ============================================= */

@media (min-width: 1300px) {

	body {
		padding: 10px; /* Mer luft på stor skärm */
	}

	.layout {
		background-color: lightcyan;
	}

	.text_mobile {
		display: none;
	}

	.text_notepad {
		display: none;
	}

	.text_computer {
		display: inline;
	}


	/* 260813: Definierar en grid med automatiska rader och 3 kolumner plus subgrids */
	.grid-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
/*		grid-template-rows: repeat(9, 1fr);	*/
		grid-template-rows: repeat(auto-fit, minmax(150px, 1fr));

		grid-template-areas:
		"box_03 box_03 ."
		"box_01 box_02 ."
		"box_04 box_04 ."
		"box_05 box_06 box_06"
		"box_05 box_07 box_07"
		"box_08 box_08 box_08"
		"box_09 box_09 box_09"
		"box_10 box_10 ."
		"box_11 box_11 .";

		text-align: center;

		/* === Subgrid definitions === */
		.flags {
			display: grid;
			grid-template-columns: subgrid;
			grid-template-areas: "se_flag_anim EU_flag_anim NATO_flag_anim";
		}

		.program_ads_01 {
			display: grid;
			grid-template-columns: subgrid;
			grid-template-areas: "postfix dovecot";
		}

		.program_ads_02 {
			display: grid;
			grid-template-columns: subgrid;
			grid-template-areas: "letsencrypt he_logo";
		}

		.program_ads_03 {
			display: grid;
			grid-template-columns: subgrid;
			grid-template-areas: "roundcube spamassassin";
		}

		.bullseye_nyx {
			display: grid;
			grid-template-columns: subgrid;
			grid-template-areas: "bullseye nyx tor";
		}

		max-width: 1600px; /* Förhindrar att sidan blir för bred på jätteskärmar */
		/*margin: 0 auto;*/    /* Centrerar hela layouten */
		margin: 0 10;    /* Lägger layouten längst upp samt 10px från vänsterkant */

	}	/* End of grid-container */

}	/* End of @media */