<template>
  <main>
    <div class="window">
      <SweetheartsWindow></SweetheartsWindow>
    </div>
  </main>
</template>

<script>
import SweetheartsWindow from 'https://codepen.io/leemartin/pen/abjrMWG/54ffe60dca78be272c2f710075fe7801.js'
  
export default{
  components: { SweetheartsWindow }
}
</script>

<style>
  html, body, main{
    height: 100%;
    width: 100%;
  }
  
  main{
    align-items: center;
    background: linear-gradient(#D10D0F, #F2B6B5 50%);
    display: flex;
    justify-content: center;
  }
  
  @media (orientation: landscape) {
    .window{
      height: 80vh;
      width: 80vh;
    }
  }
  
  @media (orientation: portrait) {
    .window{
      height: 80vw;
      width: 80vw;
    }
  }
</style>