@font-face {
    font-family: 'Josefin Sans';
    src: url('/assets/JosefinSans-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('/assets/JosefinSans-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

* {
    box-sizing: border-box;
}

html, body {
    background: #000;
    margin: 0;
    padding: 0;
    font-family: "Josefin Sans", sans-serif;
    color: #fff;
    user-select: none;
	height: 100%;
	overflow: hidden;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
}

.center {
	width: 600px;
	max-width: 95%;
	text-align: center;
	padding-bottom: 100px;
}

.logo-container {
    display: inline-flex;
    height: 120px;
	max-height: 18vw;
	margin: 50px auto;
    cursor: pointer;
    align-items: center;

    transform: skewY(-5deg);

    text-decoration: none;

    img {
        height: 100%;
        transition: height .5s ease;
    }

    .prefix {
        margin-right: 8px;
        height: 0px;
    }

    &:hover {
        .prefix {
            height: 100%;
        }
        .suffix {
            height: 0px;
        }
    }
}

a, .contact-link {
    transition: color .2s, text-decoration .2s;
    color: #bbb;
    text-decoration: underline wavy #fff0;
    &:hover {
        text-decoration: underline wavy #fff;
        color: #fff;
    }
}

.subtext {
	font-size: 28px;
}

.contact-link {
	display: block;
	margin: 0 auto;
	font-family: "Josefin Sans", sans-serif;
	background: none;
	outline: none;
	border: none;
	cursor: pointer;
	margin-top: 40px;
	font-size: 35px;
	font-weight: 200;
}

@media only screen and (max-width: 660px) {
	.contact-link {
		font-size: 28px;
	}
	.subtext {
		font-size: 22px;
	}
}