:root{
    /* Website Colours */
    /* 2 shades of light blue = ~ off-white background, black (and lighter shade) for 
    text, shade colour and accent colour (with desaturated for differentiation but to
    still draw the eye) */
    --bg-color: #B1D2F3;
    --accent-color: #194C79;
    --shade-color: #042B4C;

    --light-color: #D8E9F9;
    --medium-color: #7CB1E0;

    --white-text: #FFFFFF;
    --black-text: #000000;

    /* Font families */
    --ff-header: "Figtree", sans-serif;
    --ff-text: "Figtree", sans-serif;

    --header-height: max(8vh, 60px);
}

html{
    scroll-behavior: smooth;
}

body{
    background: var(--bg-color);

    margin: 0;

    font-family: var(--ff-text);
    overflow-x: clip;
}

.cta-btn{
    border-radius: 150px;

    padding: 15px 60px;
    margin-bottom: 24px;
    
    text-align: center;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-family: var(--ff-header);
    font-weight: 700;
    letter-spacing: 0.05rem;
    color: var(--white-text);
    
    text-decoration: none;
    
    background: var(--accent-color);
}
.cta-btn:hover{
    transform: scale(1.04);
}