@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=Playwrite+IT+Moderna:wght@100..400&display=swap');
@import url('https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css');

/* Importing the other style sheets */

@import './cards.css';
@import './header.css';
@import './img.css';
@import './about.css';
@import './cube.css';
@import './top.css';
@import './timeline.css';
@import './project.css';

:root {
    --prime-100: #9affbd;
    --prime-200: #6af7a1;
    --prime-300: #3ef58c;
    --prime-400: #1ae577;
    --prime-500: #00d97a;
    --prime-600: #00c76e;

    --background: #222;
    

    /* BODY COLORS */
    --body-100: #888;
    --body-200: #777;
    --body-300: #666;
    --body-400: #555;
    --body-500: #444;
    --body-600: #333;
    --body-700: #222;
    --body-800: #111;
    --body-900: #000;

    /* TEXT COLORS */
    --text-100: #fff;
    --text-200: #eee;
    --text-300: #ddd;
    --text-400: #ccc;
    --text-500: #bbb;

    /* FONTS */
    --font-main: 'Titillium Web', sans-serif;
    --font-gill: 'Gill Sans', sans-serif;
    --font-roboto: 'Roboto', sans-serif;
    --font-fancy: "Playwrite IT Moderna",serif;
    --font-full: "Funnel Sans", serif;


}

* {
    z-index: 10;
}




body {
    display: grid;
    place-items: center;
    background: var(--body-800);
    min-height: 100vh;
    font-family: 'Geist', 'SF Pro Text', 'SF Pro Icons', 'AOS Icons',
      'Helvetica Neue', Helvetica, Arial, sans-serif, system-ui;
  }

  body::before {
    --size: 45px;
    --line: #474747;
    content: '';
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: linear-gradient(
          90deg,
          var(--line) 1px,
          transparent 1px var(--size)
        )
        50% 50% / var(--size) var(--size),
      linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
        var(--size) var(--size);
    mask: linear-gradient(-20deg, transparent 50%, white);
    top: 0;
    transform-style: flat;
    pointer-events: none;
    z-index: -1;
  }




/* body,
html {
  margin: 0;
  padding: 0;
  background-color: #111;
} */
canvas {
  display: block;
  z-index: 1;
  position: fixed;
}

footer {
    width: 100%;
    position: relative;
    text-align: center;
    color: var(--text-500);
    font-family: var(--font-gill);
    padding: 5px;
    font-size: 10px;
    border-top: 1px solid var(--text-500);
    background-color: #111;
}


/* Scroll bar */

::-webkit-scrollbar {
    width: 7px;
    border-radius: 10px;
    margin: 2px;
}
  
::-webkit-scrollbar-track {
    background: var(--body-400);
    border-radius: 10px;
    margin: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--body-300);
    border-radius: 10px;
    margin: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--body-200);
}


/* Defult Classes */
.text-center {
    text-align: center;
}
.flexed {
    display: flex;
    gap: 5px;
}
.no-style {
    list-style-type: none;
    text-decoration: none;
}
.no-shadow {
    box-shadow: none;
}

.big-gap {
    gap: 50px !important;
}