<script setup>
import { RouterView } from 'vue-router'
</script>

<template>
    <RouterView />
</template>

<style>
@import url('https://fonts.googleapis.com/css2?family=Knewave&family=Pinyon+Script&display=swap');

.title-regular {
    font-family: 'Pinyon Script', cursive;
    font-weight: 400;
    font-style: normal;
}

.body-regular {
    font-family: 'Knewave', system-ui;
    font-weight: 400;
    font-style: normal;
}

:root {
    --accent-color: rgb(255, 0, 234);
    --background-color: #0e0e0e;
    --secondary-background-color: #363636;
    --text-color: white;
    --inverted-text-color: black;
    --mobile-width: 768px;

    font-family: 'Knewave', 'Times New Roman', Times, serif;
    color-scheme: light dark;
    color: var(--text-color);
    background-color: var(--background-color);

    width: 100vw;
    height: 100vh;
	overflow: hidden;
}

html,
body {
    margin: 0;
}

.main {
	width: 100vw;
	height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: row;
}

@media only screen and (max-width: 768px) {
    .main {
        width: 100vw;
        height: 100vh;
        margin: 0;
        display: flex;
        flex-direction: column;
    }
}

@keyframes interaction {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
	}
}
</style>
