/*
   _____      _   _   _                 
  / ____|    | | | | (_)                
 | (___   ___| |_| |_ _ _ __   __ _ ___ 
  \___ \ / _ \ __| __| | '_ \ / _` / __|
  ____) |  __/ |_| |_| | | | | (_| \__ \
 |_____/ \___|\__|\__|_|_| |_|\__, |___/
                               __/ |    
                              |___/     
*/

/* **************************** Fonts **************************** */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800&display=swap");

/* **************************** Site General Settings **************************** */

* {
    margin: 0;
    padding: 0;
}

/* **************************** Responsive Font Size **************************** */

html {
    font-size: 62.5%;
}

@media (max-width: 992px) {
    html {
        font-size: 60%;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 55%;
    }
}

/* **************************** Body Settings **************************** */

body {
    background: var(--darkwhite);
    font-family: var(--mainfont);
}

/* **************************** Root Variables **************************** */

:root {
    /* Default Colors */
    --darkblack: #222831;
    --lightblack: #3c434e;
    --darkwhite: #ffffff;
    --lightwhite: #f7fafc;
    --darkgrey: #787a91;
    --lightgrey: #9ba4b4;

    /* Theme Colors */
    --primaryoff: #99feff;
    --primarylight: #385cf0;
    --primarydark: #1d4cb0;
    --highlight: #f7f0c2;
    --lightorange: #ff8d01;
    --lightgreen: #20ce65;

    /* Default Fonts */
    --mainfont: "Inter", sans-serif;
    --codefont: "Outfit", sans-serif;
    --curlfont: "Quicksand", sans-serif;
}

/* **************************** Scroll Bar **************************** */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--darkblack);
    border-radius: 2px;
}

/* **************************** Selection **************************** */

::selection {
    color: var(--darkblack);
    background: var(--highlight);
}

/* **************************** User Select None **************************** */

img,
.noselect {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    pointer-events: none;

    -webkit-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

button.btn:active,
button.btn:focus,
a.btn:active,
a.btn:focus {
    box-shadow: none;
}

/* **************************** Section Divider **************************** */

section#divider div.skewed {
    position: relative;
    width: 100%;
    height: 10rem;
    background: linear-gradient(315deg, #0d1524 0%, #0f1927 80%);
    transform: skewY(2deg);
    transform-origin: top right;
    z-index: -1;
}

/* **************************** Custom Fonts **************************** */

@font-face {
    font-family: "Blanka";
    src: url(../../assets/font/Blanka.otf);
}

@font-face {
    font-family: "Anurati";
    src: url(../../assets/font/Anurati.otf);
}

/* **************************** Styles End **************************** */