@property --rotate {
    syntax: "<angle>";
    initial-value: 132deg;
    inherits: false;
  }
  
  :root {
    --card-height: 65vh;
    --card-width: calc(var(--card-height) / 1.5);
    --text-shadow-arcade_strong:-20px 0 0 #fdff2a,
    -40px 0 0 #df4a42,
    20px 0 0 #91fcfe,
    40px 0 0 #4405fc;
  }
  


html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

h1, h2 {
    font-family: 'Mochiy Pop P One', sans-serif;
    text-align: center;
    font-size: 6rem;
    color:red;
    text-shadow: var(--text-shadow-arcade_strong);


}

body {
    margin: 0;
    padding: 20px;
    background-color: #0d1752;
    color: #ae4a19;
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/12207/level-select.png');

}

#map {
    height: 700px;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    padding:100px;
    border-radius:10px;
    border:24px solid #B9B6B4;
    border-bottom:80px solid #B9B6B4;
    box-shadow:var( --text-shadow-arcade_strong);

    

}
#map::before { 
    content: "";
    width: 104%;
    height: 102%;
    border-radius: 8px;
    background-image: linear-gradient(
      var(--rotate)
      , #5ddcff, #3c67e3 43%, #4e00c2);
      position: absolute;
      z-index: -1;
      top: -1%;
      left: -2%;
      animation: spin 2.5s linear infinite;
}