@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root{
    --main-light-grey:#e6e6e6;
    --main-darker-grey:#141414;
    --main-green:#25d366;
    --main-blue:#00ccfa;
    
    --ff-main:  "Roboto", sans-serif;
    --ff-titles: "Jura", sans-serif;

    --fs-xxl: clamp(4rem, 8vw + 1rem, 15rem);
    --fs-xl: clamp(4rem, 6vw + 1rem, 12rem);
    --fs-xs: clamp(2rem, 4vw + 1rem, 4rem);
    --fs-titles:2rem;
    --fs-sub-titles:1.6rem;
    --fs-highlights:1.2rem;
    --fs-text:1.1rem;

    --border-one: 4px;
}
*{
    box-sizing: border-box;
    font-family: var(--ff-main);
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    color: var(--main-darker-grey);
}
*::before, *::after {
    box-sizing: border-box;
}
button:focus {
    outline: 0;
}
input:focus {
    outline: 0;
}
textarea:focus {
    outline: 0;
}
::-webkit-scrollbar {
    width: 0.4em;
}
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.2);   
} 
::-webkit-scrollbar-thumb {
    background: var(--main-blue);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--main-green);
}
::-webkit-input-placeholder { /* Edge */
    letter-spacing: 2px;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    letter-spacing: 2px;
}
::placeholder {
    letter-spacing: 2px;
}

html {
    height: 100%;
    scroll-behavior: smooth;
    width: 100%;
}
body, h1, h2, h3, p, blockquote {
	margin:0;
	padding:0;
}
body {
    color: var(--main-darker-grey);
    font-family: var(--ff-main);
    font-size: var(--fs-text);
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    width: 100%;
    background: var(--main-light-grey);
}



/******************************KEY FRAMES*******************************/

@keyframes navLinkFade {
    from{
        opacity: 0;
        transform: translateX(50px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
    
}

/*****************************MEDIA QUERIES***************************/

@media only screen and (max-width: 1200px) { }
@media only screen and (max-width: 1024px) { }
@media only screen and (max-width: 950px) { }
@media only screen and (max-width: 768px) { }
@media only screen and (max-width: 650px) { }
@media only screen and (max-width: 550px) { }
@media only screen and (max-width: 480px) { }
@media only screen and (max-width: 320px) { }