/* ---------------------------- Fonts --------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Changa:wght@200;300;400;500;600;700;800&display=swap');

/*----------------------------------- Root ----------------------------------*/
:root{
    /*------------- Font Weight -------------*/
    --normal-font: 400;
    --bold-font: 600;
    --bolder-font: 800;
    --text-light: rgba(255,255,255,0.6);
    --text-lighter: rgba(255,255,255,0.9);
    /*-------- Font Colors---------------------*/
    --font-clr1: #000000;
    --font-clr2: #ffffff;
    --font-clr3: #0e4e13;
    --font-clr4: #004d4d;
    --font-clr5: #ec5800;
    /*----------- Background Color ------------*/
    --background-clr1: #0e0707;
    --background-clr2: #ccc5c5;
    --background-clr3: #0e4e13;
    --background-clr4: #004d4d;
    --background-clr5: #ec5800;
    --background-clr6: #1d2951;
    --background-dark: #2d3548;
    /*-------------------------- Shades of Grey ---------------------------*/
    --grey-clr1: #c0c0c0;
    --grey-clr2: #808080;   
    --grey-clr3: #404040;
    --grey-clr4: #989898;

    /*------------- Rest of the crew here:------------------*/
    
    
    --spacing-s: 8rem
    --spacing-m: 1.6rem;
    --spacing-l: 2.4rem;
    --spacing-xl: 3.2rem;
    --spacing-xxl: 6.4rem;
    --width-container: 1200px;

}

html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}

/*------------------------------ Generalarization of Media Queries -----------------------------------*/

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

body{
    margin: 0;
    font-family: 'Changa', sans-serif;
    font-size: 2rem;
}

section{
    display: block;
}

.welcome-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: #436d41;
    background: linear-gradient(90deg, rgb(13, 15, 13) 100%, rgba(0,212,255,1) 100%);
    color: var(--font-clr2);
}

.welcome-section{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    font-size: 4rem;
    font-weight: 100;
  }
  
  a {
    color: var(--font-clr5);
    text-decoration: none;
  }
  a span {
    font-weight: 100;
    transition: all 0.5s;
    border-bottom: 1px solid;
  }
  a span:nth-child(2) {
    transition-delay: 0.1s;
  }
  a span:nth-child(3) {
    transition-delay: 0.2s;
  }
  a span:nth-child(4) {
    transition-delay: 0.3s;
  }
  a:hover span {
    font-weight: 700;
  }
  a:hover span:nth-child(4) {
    transition-delay: 0.3s;
  }
  a:hover span:nth-child(3) {
    transition-delay: 0.2s;
  }
  a:hover span:nth-child(2) {
    transition-delay: 0.1s;
  }
  a:hover span:nth-child(1) {
    transition-delay: 0s;
  }
  a.hover-shadow:hover {
    text-shadow: 1px 1px 0px rgb(15, 10, 10), 2px 2px 0px rgb(22, 18, 18), 3px 3px 0px rgb(15, 9, 9);
  }
  a.hover-color:hover {
    border-color: darkmagenta;
  }