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

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root{
    /* COLOURS */
    --white: #ffffff;
    --black: #000000;
    /* --primary-color: #F6F9FD;
    --secondary-color: #EFF3FD;
    --tertiary-color: #29ABE2;
    --accent-color: #0A4DDA; */
    --primary-color: #F6F9FD;
    --secondary-color: #EFF3FD;
    --tertiary-color: #6D4886;
    --accent-color: #8b5fc7;

    /* FONT FAMILIES */
    --main-font: "Roboto", sans-serif;
}

html, body{
    overflow-x: hidden;
}

body{
    font-family: var(--main-font);
    width: 100%;
    background: var(--primary-color);
}

.primary-btn{
    padding: 15px 30px;
    background: var(--accent-color);
    cursor: pointer;
    border: none;
    color: var(--white);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease-in-out;
}

.secondary-btn{
    padding: 15px 30px;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid var(--black);
    color: var(--black);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease-in-out;
}

.tertiary-btn{
    padding: 15px 30px;
    background: var(--black);
    cursor: pointer;
    border: none;
    color: var(--white);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease-in-out;
}

.primary-btn:hover,
.secondary-btn:hover,
.tertiary-btn:hover{
    transform: scale(102%);
}