@font-face {
    font-family: blackops;
    font-style: normal;
    font-weight: 600;
    src: url('../assets/BlackOpsOne-Regular.ttf') format('opentype'); 
}

@font-face {
    font-family: blackopsreg;
    font-style: normal;
    font-weight: 300;
    src: url('../assets/BlackOpsOne-Regular.ttf') format('opentype'); 
}


* {
    margin: 0;
    padding: 0;
    font-family: blackops;
    box-sizing: border-box;
    list-style: none;
    border: none;
}

body {
    /* color */
    --background-secondary: #252525;
    --badges: #BFFB4F;
    --secondary: #BFFB4F;
    --background-primary: #EDEDED; 
    --button-text: #BFFB4F;
	--black: #000000;
    --white: white;

    /* font sizes */
    --paragraph: clamp(1rem, 2vw, 1.3rem);
	--heading-small: clamp(1.2rem, 2vw, 1rem);
	--heading-medium: clamp(1.4rem, 2.7vw, 2.2rem);
	--heading-big: clamp(1.4rem, 3vw, 2.5rem);

    /* margings */
    --reg-margin: 1rem;
    --card-margin: .5rem;
    --large-margin: 1rem;
    --space-margin: 4rem;

    /* padding */
    --reg-padding: 1rem;
    --button-padding: 1.5rem;
    --card-padding: .5rem;
    --large-padding: 4rem;

    /* border-radius */
    --border-round: 100%;
    --border-button: 2.5rem;
    --border-small: 1rem;
    --border-medium: 1.5rem;
    --border-big: 2rem;

}

h1, h2 {
    font-size: var(--heading-big);
}

h3, h4 {
    font-size: var(--heading-medium);
}

h5, h6 {
    font-size: var(--heading-small);
}

a, p, button {
    font-family: blackopsreg;
    font-size: var(--paragraph);
}

img, video {
    width: 100%;
    height: auto;
}

main {
    margin: 1rem;
}

/* styling for badge */

.badge {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-secondary); 
    border-radius: var(--border-small);
    width: fit-content;
    padding: .5rem 1rem;
    color: var(--white);
    text-decoration: none;
    box-shadow: 5px 5px 5px var(--background-secondary);
    transition: transform .3s ease ;

    &.decorative {
        background-color: var(--badges);
        color: var(--black);
    }

    &.link:hover {
        transform: translateY(.5rem);
    }

    &.link:active {
        transform: translateY(.7rem);
    }

    &.link.active {
        background-color: var(--badges);
        box-shadow: 5px 5px 5px var(--badges);
        color: var(--black);
    }

}