/**
load in our two primary fonts
for DMSans-Bold we must go to google's servers
since the download renders differently on iOS
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap');
@font-face {
    font-family: 'DMSans-Bold';
    src: url("../../assets/fonts/DMSans-Bold.ttf");
}

@font-face {
    font-family: 'Poppins-Regular';
    src: url("../../assets/fonts/Poppins-Regular.ttf");
}

/* General Reset */
*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/** these are the basic colours described in our brand guidelines **/
:root {
    --cardata-primary-oxford-blue: #0A122B;
    --cardata-gradient-russian-violet: #6231AA;
    --cardata-secondary-blue-violet: #7B3DD4;
    --cardata-secondary-blue-ryb: #4C40F7;
    --cardata-secondary-sky-blue-crayola: #00daf8;
    --cardata-secondary-light-grey: #E2E2E2FF;
    --cardata-border-radius: 0.5rem;
    --cardata-floating-box-shadow: -2px 4px 6px 2px rgba(0, 0, 0, 0.05);
    --cardata-title-text: #0E0E11;
    --cardata-white-text: #FFFFFF;
    --cardata-body-text: #292930;
    --cardata-sub-text: #B1B1B1;
    --cardata-red: #FF5D56;
}

/* Default style */
html, body {
    margin: 0;
    font-family: 'DM Sans', DMSans-Bold;
}

body {
    display: flex;
}

h1 {
    color: var(--cardata-title-text);
}

p, label {
    color: var(--cardata-body-text);
}

label {
    font-family: Poppins-Regular;
}

a {
    color: var(--cardata-secondary-blue-violet);
    text-decoration: none;
}

.action-button {
    border: 2px solid var(--cardata-secondary-blue-violet);
    background-color: var(--cardata-secondary-blue-violet);
    color: white;
    width: 12rem;
    cursor: pointer;
    font-family: Poppins-Regular;
    border-radius: 0.5rem;
    height: 3.5rem;
}

.action-button:hover, .action-button:focus {
    background-color: var(--cardata-gradient-russian-violet);
    border: 2px solid var(--cardata-gradient-russian-violet);
}

.cardata-logo-container {
    width: 100%;
}

.cardata-logo {
    width: 280px;
}

.home-link {
    width: 80%;
    max-width: 320px;
}