@import url('https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Istok+Web:ital,wght@0,400;0,700;1,400;1,700&display=swap');

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

:root{
    --primary: #6385FF;
    --primary-light: #6F8EFF;
    --primary-dark: #3A57BD;
    --secondary: #885FDE;
    --secondary-light: #9F77F4;
    --secondary-dark: #6943BB;
    --tertiary: #FF6B62;
    --tertiary-light: #FF8F88;
    --tertiary-dark: #DD4D44;
    --quarternary: #28BA97;
    --quarternary-light: #46D3B1;
    --quarternary-dark: #1B9C7D;
    --orange: #FF9B26;
    --orange-light: #FFB053;
    --orange-dark: #D77D15;
    --gray-100: #F5F5F5;
    --gray-200: #7E8999;
    --gray-300: #505965;
    --gray-400: #343A43;
    --gray-500: #24282E;
    --gray-600: #1C1F25;
    --gray-700: #15171B;
}

h1, h2, h3, h4{
    font-family: "Smooch Sans", sans-serif;
    font-weight: 600;
    color: var(--gray-100);
    line-height: 1;
    text-transform: uppercase;
}

h1{
    font-size: 48px;
}

h2{
    font-size: 40px;
}

h3{
    font-size: 32px;
}

h4{
    font-size: 24px;
}

p{
    font-size: 16px;
    font-family: "Istok Web", sans-serif;
    color: var(--gray-100);
    line-height: 140%;
}

p + p{
    margin-top: 15px;
}

.card li + li{
    margin-top: 10px;
}

:is(h1, h2, h3, h4) + p {
    margin-top: 16px;
}

:is(h1, h2, h3, h4) + ul{
    margin-top: 16px;
}

body{
    background-color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

main{
    width: min(90%, 1180px);
    min-height: calc(100svh - 80px - 160px); /*full screen - header - footer*/
    padding: 50px 0px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
}

section{
    width: 100%;
}

a{
    text-decoration: none;
}

p a{
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
}

/* width */
::-webkit-scrollbar {
    width: 12px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: var(--gray-400);
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--gray-300);
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--gray-200);
  }

@media (max-width: 800px) {
    h1{
        font-size: 48px;
    }
    
    h2{
        font-size: 32px;
    }
    
    h3{
        font-size: 32px;
    }
    
    h4{
        font-size: 20px;
    }
    
    p{
        font-size: 16px;
    }
    
    main{
        padding: 24px 0px;
        min-height: calc(100svh - 60px - 160px); /*full screen - header - footer*/
    }    
}