:root{

--blue:#005293;
--dark:#003A6D;
--yellow:#FECB00;

}

/* PAGE */

body{

margin:0;
font-family:Arial, Helvetica, sans-serif;

color:white;

background:linear-gradient(
135deg,
var(--dark),
var(--blue)
);

}

/* CENTERED COLUMN */

.content{
max-width:800px;
margin:auto;
padding:0 40px 40px 40px;
}

/* HEADER */

/* HEADER */

.hero{
padding:60px 20px 10px 20px;
}

.hero-grid{

max-width:800px;

margin:auto;

display:grid;

grid-template-columns:250px 1fr;

gap:40px;

align-items:center;

}

/* PHOTO */

.photo img{

width:250px;
height:250px;

object-fit:cover;


border:1px solid var(--yellow);

}

/* TEXT */

.hero-text{

text-align:left;

}

.hero-text h1{

margin:0;

font-size:42px;

}

.hero-text h2{

margin:8px 0 12px 0;

color:var(--yellow);

font-weight:normal;

}

.hero-text p{

line-height:1.6;

}

/* SECTIONS */

section{

margin-bottom:50px;

}

section h2{

border-bottom:3px solid var(--yellow);

padding-bottom:6px;

margin-bottom:15px;

}

/* LISTS */

ul{

padding-left:20px;

line-height:1.8;

}

/* TABLE */

table{

width:100%;

border-collapse:collapse;

}

th{

text-align:left;

color:var(--yellow);

padding:8px;

}

td{

padding:8px;

border-top:1px solid rgba(255,255,255,0.2);

}


.gallery3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  gap: 20px; /* space between images */
  max-width: 800px;
  margin: auto; /* center the gallery */
}

.imgbox3 {
  width: 100%;
  height: 250px; /* fixed height */
  object-fit: cover; /* keeps aspect ratio and fills the box */
}


/* IMAGE GALLERY */

.gallery{

display:flex;

gap:20px;

}

.imgbox{

flex:1;

height:120px;

display:flex;
align-items:center;
justify-content:center;

border:2px dashed white;

}

/* FOOTER */

footer{

text-align:center;

padding:20px;

opacity:0.8;

}

/* LANGUAGE SWITCH */

.lang-switch{

position:fixed;

top:20px;
right:20px;

display:flex;

gap:8px;

z-index:1000;

}

.lang-switch label {
  display: flex;
  align-items: center;   /* Vertically center text relative to checkbox */
  font-size: 16px;
}

.lang-switch img{

width:98px;
height:61px;

cursor:pointer;

border-radius:0px;

border:0px solid rgba(255,255,255,0.5);

transition:transform 0.2s;

}

.lang-switch img:hover{

transform:scale(1.1);

border-color:var(--yellow);

}

.flag-en:hover {
content: url("english.png");
}

.flag-sv:hover {
content: url("swedish.png");
}

.back-corner:hover {
content: url("back_on.png");
}

.strike{
color:white;
text-decoration-line:line-through;
text-decoration-color:#E53935;
text-decoration-thickness:2px;
}


.speech {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 20px auto;  /* centers horizontally, adds vertical spacing */
  padding: 20px;
  background: white;
  color: black;
  border-radius: 20px;
}

.speech::after {
  content: "";
  position: absolute;
  left: 40px;  /* adjust arrow horizontal position if needed */
  bottom: -20px;
  border-width: 20px 20px 0 20px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}

.skills-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:12px;

}

.badge{

background:#00457A;

color:white;

padding:6px 12px;

border-radius:18px;

border:1px solid rgba(255,255,255,0.85);

font-size:0.9rem;

line-height:1.25;

height:48px;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

box-shadow:0 2px 6px rgba(0,0,0,0.25);

}
#email-container a,
#email-container a:visited {
    color: white !important;
    text-decoration: underline !important;   /* ingen understrykning normalt */
}

#email-container a:hover,
#email-container a:active {
    text-decoration: underline !important;  /* understrykning vid hover */
}