/* reset */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Setup Color themes */
:root {
    --color0: #333333;
    --color2: #111111;
    --color4: #111111;
    --colorf: #dddddd;
    --colorr: hsl(0, 90%, 60%);  /*pex Red*/
    --colorb: hsl(204, 90%, 60%); /*pex blue*/
    --font1: "Open Sans", sans-serif;
    
    --h1: bold  3rem/1.2em var(--font1);
    --h2: bold  2rem/1.2em var(--font1);
    --h3: bold  1rem/1.2em var(--font1);
    --p: 1rem/1.2em var(--font1);
    --links: bold 1rem/1.2em var(--font1);
    --transition: 0.3s ease-in-out;

    --spacing1: 4px;
    --spacing2: 8px;
    --spacing3: 16px;
    --spacing4: 20px;
    --spacing5: 40px;
    --spacing6: 80px;
    --spacing7: 160px;
  }
/* light or dark media qurry 
@media (prefers-color-scheme:dark){
  .root {

  }
}
*/



/* Global styles */
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font1);
  text-wrap:balance;
  background-color: var(--color0);
  color: var(--colorf);
}
h1 {
  font: var(--h1);
}
h2 {
  font: var(--h2);
  margin:var(--spacing2) 0;
}
p {
  font: var(--p);
  margin: var(--spacing2) 0;
}

a {
  color: var(--colorf);
  text-decoration: none;
}
a:hover {
  color: var(--colorr);
}


.btn,
button {
  all:unset;
  display: flex;
  margin: var(--spacing2) 0;
  background: var(--colorr);
  align-items: center;
  justify-content: center;
  font: var(--links);
  padding: var(--spacing2) var(--spacing3);
  height: var(--spacing2);
  border: solid var(--spacing2) var(--colorr);
  border-radius: var(--spacing2);
  cursor: pointer;
}

.btn:hover,
button:hover {
background-color: var(--colorb);
border: solid var(--spacing2) var(--colorb);
transition: var(--transition);
}

img {
  width: 100%;
  aspect-ratio: 1;
}

/* Utility classes */
section {
  margin: 0 auto;
  width: 80%;
  max-width: 1080px;
 
}

.center{
  text-align: center;
}

.hidden{
  display: none;
}

.flex{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap:var(--spacing5);
}

.flex > * {
  flex: 1;
  min-width: 400px;
}

.reverse{
  flex-direction: row-reverse;
}

.padding1 {
  padding: var(--spacing1) 0;
}
.padding2 {
  padding: var(--spacing2) 0;
}
.padding3 {
  padding: var(--spacing3) 0;
}
.padding4 {
  padding: var(--spacing4) 0;
}
.padding5 {
  padding: var(--spacing5) 0;
}
.padding6 {
  padding: var(--spacing6) 0;
}
.padding7 {
  padding: var(--spacing7) 0;
}
.margin1 {
  margin: var(--spacing1) auto;
}
.margin2 {
  margin: var(--spacing2) auto;
}
.margin3 {
  margin: var(--spacing3) auto;
}
.margin4 {
  margin: var(--spacing4) auto;
}
.margin5 {
  margin: var(--spacing5) auto;
}
.margin6 {
  margin: var(--spacing6) auto;
}
.margin7 {
  margin: var(--spacing7) auto;
}

/* Header */
header {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: var(--spacing4) 0;
  color: var(--colorf);
}

nav {
  display: flex;
  align-items: center;
  gap: var(--spacing5);
  
}
.ham {
  display: none;
  width: 20px;
}
@media (max-width: 800px) {
  .ham {
    display: block;
  }
  nav {
    display: none;
  }
  nav.show {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--spacing6);
    right: 0;
    background: var(--color4);
    padding: var(--spacing4);
    gap: var(--spacing5);
    border-radius: var(--spacing2);
  }
}
.logo {
  width: 48px;
}

/* main section */

.main-section {
  margin: var(--spacing7) auto var(--spacing6) auto;
  text-align: center;
  padding: var(--spacing6) 0;
  background: var(--color2);
  
}
.main-section h2 {
  font: var(--h1);
}


/* footer */
footer {
  background: var(--color2);
  padding: var(--spacing5) 0 var(--spacing6) 0;
}
.footer {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 500px) {
  .footer {
    flex-direction: column;
    gap: var(--spacing4);
  }
}
.footer-right,
.footer-left {
  display: flex;
  flex-direction: column;
}
.social-media-icons {
  display: flex;
  gap: var(--spacing4);
}
.social-media {
  width: 30px;
}


div#preloaded-images {
  position: absolute;
  overflow: hidden;
  left: -9999px; 
  top: -9999px;
  height: 1px;
  width: 1px;
}