/* COLOR VARIABLES */

:root{
--blue-dark:#0b2c4a;
--blue-light:#2f5f8f;
--gold:#d4af37;
--brown:#6b4f2a;
--white:#ffffff;
--black:#111111;
}

/* BODY */

body{

background-image:linear-gradient(135deg,#0b2c4a,#2f5f8f,#d4af37,#6b4f2a);

font-family:"Lato",sans-serif;

margin:0;

padding:1rem;

color:var(--black);

}

/* WRAPPER */

.wrapper{

background:white;

border-radius:20px;

padding:2rem;

box-shadow:0 15px 30px rgba(0,0,0,0.25);

}

/* TYPOGRAPHY */

h1{

font-family:"Poppins",sans-serif;

font-size:2.5rem;

text-align:center;

}

h1 span{

color:var(--gold);

}

h2{

font-family:"Source Sans 3",sans-serif;

font-size:1.8rem;

text-align:center;

margin-bottom:1rem;

}

p{

font-size:1rem;

line-height:1.6;

max-width:85ch;

}

/* HEADER */

header{

text-align:center;

padding:2rem;

background:

linear-gradient(rgba(11,44,74,0.8),rgba(47,95,143,0.6)),

url("../img/jacbioblitz4.jpeg");

background-size:cover;

background-position:center;

color:white;

position:relative;

}

#jac-logo{

width:200px;

margin:auto;

display:block;

filter:brightness(0) invert(1);

}

/* ABSOLUTE DECORATIVE BAR */

header::after{

content:"";

position:absolute;

bottom:-15px;

left:50%;

transform:translateX(-50%);

width:120px;

height:5px;

background:var(--gold);

border-radius:5px;

}

/* SECTIONS */

section{

margin:2rem 0;

padding:1rem;

background:#f7f9fc;

border-radius:10px;

}

section.what{border-left:6px solid var(--blue-dark);}
section.when{border-left:6px solid var(--gold);}
section.where{border-left:6px solid var(--brown);}
section.how{border-left:6px solid var(--blue-light);}
section.why{border-left:6px solid var(--gold);}

/* IMAGES */

img{

max-width:100%;

display:block;

}

picture{

margin-bottom:1rem;

display:block;

}

/* LOGOS FLEXBOX */

.logos{

display:flex;

justify-content:center;

gap:20px;

margin-top:1rem;

}

/* FOOTER */

footer{

background:var(--blue-dark);

color:white;

text-align:center;

padding:2rem;

margin-top:2rem;

}

/* -------------------------------- */
/* DESKTOP MEDIA QUERY */
/* -------------------------------- */

@media screen and (min-width:60rem){

.wrapper{

max-width:60rem;

margin:0 auto;

}

/* FLEXBOX SECTIONS */

.when .flex-container,
.why .flex-container,
.how .flex-container{

display:flex;

align-items:center;

gap:2rem;

}

.how .flex-container{

flex-direction:row-reverse;

}

.when picture,
.why picture,
.how picture{

width:50%;

}

.when div,
.why div,
.how div{

width:50%;

}

/* FLOAT SECTIONS */

.what .flex-container,
.where .flex-container{

display:flow-root;

}

.what picture{

width:50%;

float:right;

margin-left:2rem;

}

.where picture{

width:50%;

float:left;

margin-right:2rem;

}

/* DECORATIVE PSEUDO ELEMENT */

section.what{

position:relative;

}

section.what::before{

content:"";

position:absolute;

top:-20px;

left:0;

width:100%;

height:20px;

background-image:url("../img/jacbioblitz1.jpg");

background-size:cover;

opacity:0.2;

}

}