@font-face {
font-family: "Interface";
src: url("../fonts/InterFace-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Interface";
src: url("../fonts/InterFace-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}

:root {
/* Color styles */
--blue-1: #00CCFF;
--blue-2: #009FE3;
--blue-3: #2D50CE;
--black-1: #000000;
--black-2: #3A3D42;
--gray-1: #9598B0;
--gray-2: #EFF3F6;
--white: #FFFFFF;

/* Padding and margin */   
--W1: 2%;
--W4: 4%;
--W5: 5%;
--H1: 2%;
--H4: 4%;
--H5: 5%;

/* Text */
--h1: 4vw;
--h2: 2.4vw;
--h3: 1.7vw;
--title: 1.5vw;
--normal: 1.1vw;
--medium: 1vw;
--small: 0.9vw;
}

h1{font-size: var(--h1); font-weight: normal;}
h2{font-size: var(--h2); font-weight: bold;}
h3{font-size: var(--h3); font-weight: normal;}
p{font-size: var(--normal); font-weight: normal;}
.normal{font-size: var(--normal); font-weight: normal;}
.title{font-size: var(--title); font-weight: bold;}
.medium{font-size: var(--medium);}
.small{font-size: var(--small);}