:root{
    --color-0: rgb(10,10,25);
    --color-1: rgb(25,25,25);
    --color-2: rgb(51,51,51);
    --color-3: rgb(76,76,76);
    --color-4: rgb(102,102,102);
    --color-5: rgb(127,127,127);
    --color-6: rgb(153,153,153);
    --color-7: rgb(179,179,179);
    --color-8: rgb(205,205,190);
    --color-9: rgb(220,220,220);
    --color-10: rgb(255,255,255);
    --color-11: #F0E6D2;/*gold 1*/
    --color-12: #C8AA6E;/*gold 2*/
    --color-13: rgb(255,255,0);
}



* {
    background-color: var(--color-0);
    color: var(--color-8);    
    font-family: "Pixelify Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 550;/* <weight>: Use a value from 400 to 700*/
    font-style: normal;
}

/* --- general text styling --- */

h1 {
  color: var(--color-10); 
  font-size: clamp(3rem, 5.9vw, 6rem); /* original: 6rem */
  text-align: center;
  margin: 1rem auto 2px;
  letter-spacing: -1px;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.1;
  box-sizing: border-box;
  padding: 0 1rem 1rem;
}

h2 {
  color: var(--color-10);
  font-size: clamp(1.8rem, 5vw, 5rem); /* original: 5rem */
  text-align: right;
  letter-spacing: -1px;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.1;
  padding: 0 1rem;
}

h3 {
  color: var(--color-10);
  font-size: clamp(1.5rem, 4vw, 4rem); /* original: 4rem */
  text-align: right;
  letter-spacing: -1px;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.1;
  padding: 0 1rem;
}

h4 {
  color: var(--color-10);
  font-size: clamp(1.2rem, 3vw, 3rem); /* original: 3rem */
  text-align: right;
  margin-bottom: 1rem;
  letter-spacing: -1px;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.1;
  padding: 0 1rem;
}

p {
  font-size: clamp(1rem, 1.5vw, 1.5rem); /* original: 1.5rem */
  margin: 2px auto 1rem;
  letter-spacing: 0px;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.4;
  padding: 0 1rem;
}

.right {
  text-align: right;
}

.coloured {
  color: var(--color-13);
}

/* --- Navigation bar --- */

ul.navbar {
    list-style-type: none;
    margin: 0 0 0.5rem;
    padding: 0;
    overflow: hidden;
    background-color: var(--color-1);
}

ul.navbar li {
    float: left;
}

ul.navbar li a {
    display: inline-block;
    color: var(--color-10);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.navbar li a:hover:not(.active) {
    background-color: var(--color-6);
}

ul.navbar li a.active {
    background-color:var(--color-2);
}

/* --- Body --- */

/*Welcome section*/
section {
  padding: 0 30px;
  border-style: dashed;
  border-width: 0.5rem;
  border-color: var(--color-10);
  width: 80%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 1rem auto;
  box-sizing: border-box;
  overflow-x: hidden;
}

.welcome {
    max-width: 900px;
    color: var(--color-10);
    margin:20px auto;
    padding: 0px 30px;
    font-size: 17px;
    text-align: left;

    border-style: dashed;
    border-width: 0.5rem;
    border-color: var(--color-10);
    margin:20px auto;

    box-sizing: border-box;
    overflow-x: hidden;
  }

.welcome-gif{
  display: block;
  height: auto;
  width: 20%;
  margin: 2rem auto 1rem;
  align-items: center;
}

/*type writer effect*/

/*https://www.sitepoint.com/css-typewriter-effect/*/

.typed-out {
    color:#0000;
    background:
      linear-gradient(-90deg,var(--color-10) 5px,#0000 0) 10px 0,
      linear-gradient(var(--color-10) 0 0) 0 0;
    background-size:calc(var(--n)*1ch) 200%;
    -webkit-background-clip:padding-box,text;
    background-clip:padding-box,text;
    background-repeat:no-repeat;
    animation: 
      b .7s infinite steps(1),   
      t calc(var(--n)*.05s) steps(var(--n)) forwards;
  }
  @keyframes t{
    from {background-size:0 200%}
  }
  @keyframes b{
    50% {background-position:0 -100%,0 0}
  }
  
  /*button*/
  /*https://codepen.io/ssinya123/pen/GRMBwLM*/
  button {
    color: #fff;
    background-color: var(--color-0);
    padding: 0;
    margin: 0.5rem;
    font-size: 2rem;
    border: 0;
    box-shadow: 0px 5px var(--color-10), 0px -5px var(--color-10), 5px 0px var(--color-10), -5px 0px var(--color-10), 0px 10px var(--color-5), 5px 5px var(--color-5), -5px 5px var(--color-5), inset 0px 10px var(--color-8) ;
    cursor: pointer;
}
button:active {
    transform: translateY(5px);
    box-shadow: 0px 5px var(--color-10), 0px -5px var(--color-10), 5px 0px var(--color-10), -5px 0px var(--color-10),inset 0px 5px var(--color-5);
}
/* --- articles --- */



/* --- Footer --- */

/* keep the social icons in bottom, and at the end of the page */

/* keeps the body at least 100% of the height of the screen*/
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* make the spacer adapt if the body content doesn't fill 100% of the height of the screen*/
.spacer {
  flex-grow: 1;
  /* No fixed height here — spacer fills available space */
}


/* Socials icon setting*/
.socials {
  text-align: center;
  display: block;
  box-pack:center;
  box-align:center; 
  width: 32px;
  height: 32px;
}

.icon
{
  height:100%;
  width:auto;
}