:root { 
    --ff-heading: system-ui, sans-serif;
    --ff-body: system-ui, sans-serif;

	--bg-clr:#eef2ef;/*hsl(41, 100%, 65%);*/
	--accent-clr:rgb(197, 150, 50);
	--txt-clr:#333;
  
    --shadow-small: 3px 3px 6px 0px rgba(0,0,0,0.25);
    --shadow-large: 6px 6px 12px 0px rgba(0,0,0,0.25);

    --lead-left-margin:clamp(1rem, 15vw + 1rem, 40rem);

    --section-padding:0 0 clamp(4rem, 40vh, 20rem) 0;  

    --spider-web-lenght:clamp(25px, 10vh, 200px);  

    --font-size: clamp(16px, 2.5vw, 20px);
}

/*reset*/
*,*::before,*::after {  box-sizing: border-box;min-height: 0;}
* {  margin: 0;  padding: 0;  font: inherit;}
html{   overflow-x: hidden;min-height:100%;  scroll-behavior: smooth;  hanging-punctuation: first last;}
body {min-height:100%;  min-height: 100svh;background-color:var(--bg-clr);color:var(--txt-clr);font-family:var(--ff-body);  }
form{min-height:100%;display: flex;flex-direction: column;position: relative;}
img,picture,svg,video {  display: block;  max-width: 100%;}
h1,h2,h3,h4,h5,h6 {  text-wrap: balance;}
p,li {line-height: 150%;margin-bottom:1rem; text-wrap: pretty;}

/*scrollbars*/
.vertical-scroll::-webkit-scrollbar {width: 2em;  height: 1em;}
.vertical-scroll::-webkit-scrollbar-track {  background:var(--bg-clr);  border-radius: 100vw;  margin-block: 0.5em;}
.vertical-scroll::-webkit-scrollbar-thumb {  background:var(--txt-clr);  border: 0.25em solid var(--accent-clr);  border-radius: 100vw;}
.vertical-scroll::-webkit-scrollbar-thumb:hover {  background: var(--txt-clr); }

.error{margin:auto;width:90%;max-width:800px;padding:2rem 0;}

/* General */
a,a:hover,a.active{ color: var(--txt-clr); text-decoration:none;}
a:focus{outline:auto;}

h1 {font-family: var(--ff-heading); line-height: 1.35;font-size: clamp(1.75rem, 5vw, 2.25rem); margin-bottom:1.5rem;font-weight: 400;}
h2{font-family: var(--ff-heading);line-height: 1.15; font-size: clamp(2.5rem, 3vw, 1.75rem); line-height:1.25; margin-bottom:1rem; font-weight: 600;   }
p {font-size: var(--font-size);}

a.btn,a.btn:hover,a.btn:focus {font-size: var(--font-size);padding:1rem 2rem;display: inline-block;
  background: transparent;line-height: 2;vertical-align: middle;text-decoration: none;
  box-shadow: var(--shadow-small); border-radius: 0.2rem; font-weight: 500;
 background-color: var(--txt-clr);color: var(--bg-clr); box-shadow: var(--shadow-small);}

header {width: 96%;max-width: 1600px;margin: auto;padding: 0 1em;display:flex;justify-content:space-between;align-content:center;align-items:center;height:5rem;}
header .brand{font-size: 1.5rem;
  text-decoration: none;
  color: var(--txt-clr);
  }
header .language-link,.language-link:hover,.language-link:active{color:var(--txt-clr);text-decoration:none;font-weight:600;}

.hero{max-width: 1600px;margin: auto;width: 90%; min-height:95svh; display: grid;       grid-template-columns: repeat(2, 1fr);height: 95svh;align-items: center;gap:1rem }
 
@media screen and (max-width:640px) { 
    .hero{margin: 3rem auto;width: 90%;min-height: 0;min-height:auto;}
}

.hero .hero-lead {max-width:80ch; display: flex;align-content: center;}
.hero .hero-tags {max-width:80ch; }
.hero .hero-tags ul.tags {padding: 0; display: flex; flex-wrap: wrap;}
.hero .hero-tags ul.tags li {padding:0.5rem 0.75rem ;margin:0 0.5rem 0.5rem 0;  font-size:var(--font-size); background-color: var(--bg-clr);color: var(--txt-clr); box-shadow: var(--shadow-small); list-style: none; border-radius: 0.25rem;
border: 1px solid var(--txt-clr); border: 0.1em solid var(--txt-clr);}

@media screen and (max-width:640px) { 
    .hero .hero-tags ul.tags li {padding:0.25rem 0.5rem ;margin:0 0.5rem 0.5rem 0;  font-size:10px; background-color: var(--bg-clr);color: var(--txt-clr); box-shadow: var(--shadow-small); list-style: none; border-radius: 0.25rem;
        border: 1px solid var(--txt-clr); border: 0.1em solid var(--txt-clr);}
        
}


@media screen and (max-width:1000px) {
  .hero{margin: auto;width: 90%;display: grid; align-content: center;grid-template-columns: 1fr;}
  .hero .hero-lead {max-width:100%;}
  .hero .hero-tags {max-width:100%; }
}

section{max-width:1200px;width:90%; margin:auto;height: 100svh;  scroll-margin-top: 1rem; display: grid; align-items: center;}
section:last-child{height: 50svh;} 
@media screen and (max-width:640px) { 
    section{max-width:max-content;width:90%; margin:4rem auto;height: auto;  scroll-margin-top: 1rem; display: grid; align-items: center;}
}
    
    
.container{border-top: 1px solid var(--accent-clr);padding-top:2rem;display: grid;grid-template-columns: 
    repeat(auto-fit,minmax(50ch,1fr));}


.container-one-col{border-top: 1px solid var(--accent-clr);padding-top:2rem;display: grid;grid-template-columns:1fr;}


    @media screen and (max-width:640px) { 
.container{border-top: 1px solid var(--accent-clr);padding-top:2rem;display: grid;grid-template-columns:1fr;}
    }

.container-title{margin: 0 auto;max-width: 96%;width: 100%;}
.container-content{margin: 0 auto;max-width: 96%;width: 100%;}

/*websites scroller*/
.container-websites{display: grid;gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(320px,1fr));}

.container-websites > * {
  position: relative;
  height:auto;
  filter: grayscale();
  box-shadow: var(--shadow-small);
}

.container-websites > a:hover {
    z-index:1000;
  height:auto;
  filter: none;
transform:scale(1.125);
  transition: transform 0.73s ease;
}

.overlay-text {
  border-radius: 0.25rem;
  position: absolute;
  bottom: 5%;
  left: 5%;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 0.5rem;
}


footer {border-top:1px solid var(--accent-clr);padding-block:2rem;overflow: hidden;}
footer .footer-container{padding: 1rem; max-width:1200px;width:96%; margin:auto;    display: grid;gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(400px,1fr));}


footer a,a:hover,a:focus{text-decoration:underline;color: var(--txt-clr);}
footer small{font-size: calc(var(--font-size) * 0.65);}

address{font-size: var(--font-size);font-style: normal;}
address a{text-decoration:none;font-style: normal;}
address a:hover,a:focus{text-decoration:underline;color: var(--txt-clr);}

/*uptime*/
.container-server-status{margin: auto; padding: 0.5rem 0 0 0;  font-size: var(--font-size);}
.container-server-status .status-indicator {  margin-top: 0.25rem;  display: flex;  align-items: center;justify-content:start;gap:0.5rem;}
.container-server-status .status-indicator .server-step {  width: 8px;  height: 20px;  background-color: var(--txt-clr);  transition: background-color 0.3s;}

@media screen and (max-width:640px) { 
.container-server-status .status-indicator {  margin-top: 0.25rem;  display: flex;  align-items: center;justify-content:start;gap:0.5vw;}

.container-server-status .status-indicator .server-step {  width: 1vw;  height: 20px;  background-color: var(--txt-clr);  transition: background-color 0.3s;}
}
.container-server-status .status-indicator .server-step.active {  background-color: var(--txt-clr);}


@keyframes blink {
    50% { background-color: var(--bg-clr); }
  }

.server-step.blink {
  animation: blink 1s infinite;
}


a.scroll-to-top,
a.scroll-to-top:hover {
    color: var(--bg-clr);
    background-color: var(--txt-clr);
    text-decoration: none;
    border: 1px solid var(--txt-clr);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display:flex; /* Changed to inline-flex */
    justify-content: center; /* Horizontally center content */
    align-items: center; /* Vertically center content */
  box-shadow: var(--shadow-small);
margin: 0 auto;
}

/*scroll down link*/
a.animated-link {
    position: fixed;
    bottom: 20px;
    left: calc(50% - 30px);
    text-decoration: none;
        border-radius: 50%;

    /*overflow: hidden;*/
    text-decoration: none;
        color: var(--bg-clr);
    background-color: var(--txt-clr);
        width: 3rem;
    height: 3rem;
    display: inline-flex; /* Changed to inline-flex */
    justify-content: center; /* Horizontally center content */
    align-items: center; /* Vertically center content */
}

  


/*spider*/
.spider {
    position: absolute;
    display: inline-block;
    top: 0;
    right: 30%;

    /* 4. Animatie */
    animation: swing 2s infinite;
    transform-origin: top;

    /* Bonus */
    transition: 1s ease-in-out;
}


.spider:hover {
    position: absolute;
    display: inline-block;
    top: -150px;
    right: 30%;

    /* 4. Animatie */
    animation: swing 2s infinite;
    transform-origin: top;

    /* Bonus */
    transition: 0.5s ease-in-out;
}



.spider .spiderweb {
    width: 2px;
    height: var(--spider-web-lenght);
    margin-left: 49px;
    background: rgba(0,0,0, .7);
}

.spider .body {
    width: 100px;
    height: 80px;
    background: var(--txt-clr);
    position: relative;
    border-radius: 50%;
}

.spider .body .eye {
    width: 33px;
    height: 33px;
    position: absolute;
    bottom: 20px;
    background: var(--bg-clr);
    border-radius: 50%;
}

.spider .body .eye.left {left: 15px;}
.spider .body .eye.right {right: 15px;}

.spider .body .eye:after {
    background: var(--txt-clr);
    width: 7px;
    height: 7px;
    content: '';
    display: block;
    margin: 55%;
    border-radius: 50%;

    /* 3. Animatie */
    animation: look 8s infinite;
} 

.spider .legs .leg {
    width: 80px;
    height: 40px;
    margin-top: -20px;
    border: 5px solid transparent;
    border-top-color: var(--txt-clr);
    border-radius: 40px 40px 0 0;
}

.spider .legs {position: absolute; bottom: -10%;    z-index: -1;}
.spider .legs.left {left: -70%;}
.spider .legs.right { right: -60%;}

.legs.left .leg:nth-child(1){    transform: rotate(10deg);    margin-left: 10px;}
.legs.right .leg:nth-child(1){    transform: rotate(-10deg);    margin-left: -10px;}
.legs.left .leg:nth-child(2){    transform: rotate(-20deg);    margin-left: 20px;}
.legs.right .leg:nth-child(2){    transform: rotate(20deg);    margin-left: -20px;}
.legs.left .leg:nth-child(3){    transform: rotate(-50deg);    margin-left: 30px;}
.legs.right .leg:nth-child(3){    transform: rotate(50deg);    margin-left: -30px;}

@keyframes look {    0%, 40%, 100% { transform: translateX(0);} 45%, 95% {transform: translateX(-110%);}}

@keyframes swing { 0%, 100% { transform: translateY(0); } 50% {transform: translateY(-20px); }}