<script setup>
import { onMounted } from 'vue';
import { useBurgerStore } from '@/stores/burger'
const burger = useBurgerStore();
onMounted(() => {
  burger.check()
})

</script>

<template>
  <div class="content">
    <p class="p-404">
    404...
    </p>
    <p class="emoji">🤔<span class="small">(Hmmm...)</span></p>
    <p>The page you are looking for does not seem to exist!</p>
  </div>
</template>

<style lang="scss" scoped>
@import '../style/colors.scss';


.content{

  & > p{
    text-indent:0;
    color : $main-normal;
    opacity: 1;
    font-size : 2em;
    padding:1rem 1.25rem;
    text-align: center;
    animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    &.p-404{
      padding:1rem 1.25rem;
      font-size : 7rem;
      
    }
    &.emoji{
      margin-top : 5rem;
      padding:1rem 1.25rem;
      font-size : 15rem;
      line-height: 5rem;
    }
  }
}
.small{
  font-size : 3rem;
  
}

@keyframes text{
  0%{
    opacity : 0;
  }
  33%{
    opacity : 0;
  }
  100%{
    opacity:1;
  }
}

@media (width < 600px){
  .content{
    width: 95%;
  }
}
</style>