<template>
    <p>welcome to...</p>
    <h1>{{ props.title }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
    title: String
})
</script>

<style scoped>
h1 {
    margin: 0;
    padding-top: .25em;
    padding-left: .25em;

    color: black;
    font-size: 72px;

    @media screen and (max-width: 500px) {
        font-size: 32px;
    }

    background: linear-gradient(90deg, rgba(222, 222, 108, 1) 0%, rgba(222, 222, 108, 1) 25%, rgba(0, 212, 255, 0) 100%);
}

p {
    margin: 0;

    font-size: 32px;
}
</style>
