@charset "UTF-8";

@font-face {
    font-family: 'Anton-Regular';
    src: url('../font/anton_regular-webfont.woff2') format('woff2'),
         url('../font/anton_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Inter-Bold';
    src: url('../font/Inter-Bold.woff2') format('woff2'),
        url('../font/Inter-Bold.woff') format('woff'),
        url('../font/Inter-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
    --pokemon-red: #9A0018
}

html {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-family: sans-serif;
}

*,
*:before,
*:after {
	box-sizing: inherit;
    user-select: none;
  -webkit-user-select: none; /* For Safari */
  -ms-user-select: none; /* For older IE versions */
}

body {
	margin: 0;
	padding: 0;
	position: relative;
    text-align: center;
    font-size: 2.5vw;
    font-family: 'Inter-Bold';
    color: #000;
}

.button {
    color: #FFF;
    font-size: 4.5vw;
    padding: .75em 1.5em;
    text-align: center;
    display: inline-block;
    background-color: var(--pokemon-red);
    border: 0.125em solid var(--pokemon-red);
    border-radius: .25em;
    text-transform: uppercase;
    font-family: 'Anton-Regular';
}

.button.active {
    color: var(--pokemon-red);
    background-color: #FFF;
}