@font-face {
    font-family: 'Gilroy';
    src: url('../css/fonts/Gilroy-Bold.eot');
    src: url('../css/fonts/Gilroy-Bold.eot?#iefix') format('embedded-opentype'),
        url('../css/fonts/Gilroy-Bold.woff2') format('woff2'),
        url('../css/fonts/Gilroy-Bold.woff') format('woff'),
        url('../css/fonts/Gilroy-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../css/fonts/Gilroy-SemiBold.eot');
    src: url('../css/fonts/Gilroy-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../css/fonts/Gilroy-SemiBold.woff2') format('woff2'),
        url('../css/fonts/Gilroy-SemiBold.woff') format('woff'),
        url('../css/fonts/Gilroy-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../css/fonts/Gilroy-Medium.eot');
    src: url('../css/fonts/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
        url('../css/fonts/Gilroy-Medium.woff2') format('woff2'),
        url('../css/fonts/Gilroy-Medium.woff') format('woff'),
        url('../css/fonts/Gilroy-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../css/fonts/Gilroy-Light.eot');
    src: url('../css/fonts/Gilroy-Light.eot?#iefix') format('embedded-opentype'),
        url('../css/fonts/Gilroy-Light.woff2') format('woff2'),
        url('../css/fonts/Gilroy-Light.woff') format('woff'),
        url('../css/fonts/Gilroy-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../css/fonts/Gilroy-Heavy.eot');
    src: url('../css/fonts/Gilroy-Heavy.eot?#iefix') format('embedded-opentype'),
        url('../css/fonts/Gilroy-Heavy.woff2') format('woff2'),
        url('../css/fonts/Gilroy-Heavy.woff') format('woff'),
        url('../css/fonts/Gilroy-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../css/fonts/Gilroy-Regular.eot');
    src: url('../css/fonts/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
        url('../css/fonts/Gilroy-Regular.woff2') format('woff2'),
        url('../css/fonts/Gilroy-Regular.woff') format('woff'),
        url('../css/fonts/Gilroy-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*
DM Sans 18pt Regular
font-family: "dm-sans-18pt", sans-serif;
font-weight: 400;
font-style: normal;

DM Sans 18pt Medium
font-family: "dm-sans-18pt", sans-serif;
font-weight: 500;
font-style: normal;

DM Sans 18pt Bold
font-family: "dm-sans-18pt", sans-serif;
font-weight: 700;
font-style: normal;

DM Sans 24pt SemiBold
font-family: "dm-sans-24pt", sans-serif;
font-weight: 600;
font-style: normal;

DM Sans 24pt Bold
font-family: "dm-sans-24pt", sans-serif;
font-weight: 700;
font-style: normal;

DM Sans 36pt SemiBold
font-family: "dm-sans-36pt", sans-serif;
font-weight: 600;
font-style: normal;

DM Sans 36pt Bold
font-family: "dm-sans-36pt", sans-serif;
font-weight: 700;
font-style: normal;
*/

* {
    margin: 0px;
    padding: 0px;
}

body {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.hold {
    margin-top: -120px;
    width: 500px;
    text-align: center;
}

h2 {
    font-weight: bold;
    color: #373737;
    margin-top: 33px;
    font-family: 'Gilroy';
    font-size: 36px;
    font-style: normal;
    font-display: swap;
}

img {
    width: 100%;
    display: block;
    margin: auto;
}

p {
    font-family: "dm-sans-18pt", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #545454;
    margin-top: 11px;
}

a {
    position: relative;
    font-family: "dm-sans-18pt", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: white;
    background-color: #33CC66;
    text-decoration: none;
    padding: 0px 0px;
    display: block;
    width: 187px;
    margin: auto;
    margin-top: 31px;
    display: flex;
    height: 60px;
}

.sqn {
    display: block;
    vertical-align: top;
    margin-top: 18px;
}

.sqh {
    display: flex;
}

.sqh span {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
}

.sq1 {
    background-color: #56EF89;
    top: 0px;
    left: 0px;
}

.sq2 {
    background-color: #0F9F3F;
    top: 20px;
    left: -10px;
}

.sq3 {
    background-color: #1A7438;
    top: 40px;
    left: -20px;
}

.sq4 {
    background-color: white;
    bottom: 0px;
    right: 0px;
}

@media screen and (max-width: 768px) {
    img {
        width: 300px;
        display: block;
        margin: auto;
    }
    
    body {
        overflow: hidden;
    }
    
    .hold {
        width: 100%;
        padding: 0px 20px;
        box-sizing: border-box
    }
    
    h2 {
        font-size: 24px;
    }
}