div.nav[mobile="true"] {
  background-color: pink !important;
}

div.rotate_me {
  z-index: 10;
  position: fixed;
  top: 0;
  margin: auto;
  width: 100vw;
  height: 100vh;
  background: rgb(65, 86, 7);
  margin-left: -2%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  transition-delay: 0s !important;
  transition-timing-function: linear !important;
  transition-duration: 0.1s !important;
}

div.rotate_me>h1 {
  margin: auto;
  color: var(--col_primary);
  font-weight: 600;
  font-size: 100%;
  text-align: center;
}

/* Extra Small Devices (Phones)//NOPE! */
@media only screen and (max-width: 599px) {
  div.nav::before {
    /* content: "Extra Small Devices (Phones)"; */
  }

  div.rotate_me>h1::after {
    content: "Visit this website on a Tablet or Laptop to experience Bewitching Technologies.";
  }

  div.main1desc>div.desc {
    width: 95% !important;
    height: fit-content;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    text-align: center;
    overflow-y: auto !important;
    overflow-x: clip !important;
  }

  div.desc>div:not(.title) {
    min-width: 100% !important;
    min-height: fit-content !important;
  }

  div.main1desc>div.desc>div.title {
    min-height: 10vh !important;
  }

  div.main1desc>div.desc>div.title>h2 {
    font-size: 5vw !important;
  }

  div.main1desc>div.desc>div>h3 {
    font-size: 5vw !important;
    margin-bottom: 2% !important;
    margin-top: 2% !important;
  }

div.main1desc>div.desc>div>p {

  font-size: 3vw!important;
}
}

/* Small Devices (Landscape Phones, Small Tablets)//NOPE! */
@media only screen and (min-width: 600px) and (max-width: 767px) {
  div.nav::before {
    /* content: "Small Devices (Landscape Phones, Small Tablets)"; */
  }

  div.rotate_me>h1::after {
    content: "Visit this website on a Tablet or Laptop to experience Bewitching Technologies.";
  }
}

/* Medium Devices (Portrait Tablets) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  div.nav::before {
    /* content: "Medium Devices (Portrait Tablets)"; */
  }

  div.rotate_me>h1::after {
    content: "Rotate your device to experience Bewitching Technologies";
  }
}

/* Large Devices (Laptops, Desktops)//YUP! */
@media only screen and (min-width: 1200px) {
  div.nav::before {
    /* content: "Large Devices (Laptops, Desktops)"; */
  }

  div.rotate_me {
    display: none;
  }
}

/* Large Tablet Devices in Portrait //NOPE!*/
@media only screen and (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  div.nav::before {
    /* content: "Large Tablet Devices in Portrait"; */
  }

  div[mobile='true'] {
    /* display: none  */
  }

  div[mobile='true']* {
    /* display: none  */
  }

  div[mobile='true']>* {
    /* display: none  */
  }

  div[mobile='true'] div {
    /* display: none  */
  }


  div.rotate_me>h1::after {
    content: "Rotate your device to experience Bewitching Technologies";
  }


}

/* Large Tablet Devices in Landscape //YUP*/
@media only screen and (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  div.nav::before {
    /* content: "Large Tablet Devices in Landscape"; */
  }

  div.rotate_me {
    display: none;
  }
}


/*::: Macbook 2019 onwards for retina display according to Jen's Macbook Pro:::*/
@media only screen and (min-device-width: 1440px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) {

  /* :root {
     --playspace_height: calc(100vh * 0.75);
     --card_h: 300px;
     --card_w: calc(var(--card_h) * 0.584);
     --c_large: 1.35;
     --c_medium: 1;
     --c_default_scale: 1;
     --c_small: 0.85;
     --c_xxsmall: 0.55;
     --c_full_spread_spacing: 3%;
     --c_pos_x: 12px;
     --c_pos_y: 12px;
     --c_xsmall: 0.63;
     --pSize: 1rem;
     --nav_p_size: 1.2rem;
     --navBar_gap: 20%;
     --borderWeight: 4px;
     --icon_size: 32px;
   } */

  /* body {
     overflow-y: auto;
   }

   div.pattern {
     --c_default_scale: var(--c_small);
   }

   #deck {
     --c_default_scale: var(--c_small);
   }

   div.deckButtons {
     --c_default_scale: var(--c_small);
   }

   div.card[gamestate="deck"] {
     --c_default_scale: var(--c_small);
   }

   div.card[gamestate="deal"] {
     --c_default_scale: var(--c_small);
   }

   div.card[gamestate="shuffle"] {
     --c_default_scale: var(--c_small);
   }

   div.sidebar {

     margin-bottom: 0%;
   }

   div.playspace {}


   div.pattern[pattern="triangle"][count="1"] {
     left: 6%;
   }

   div.pattern[pattern="triangle"][count="2"] {

     left: 42%;
   }

   div.pattern[pattern="triangle"][count="3"] {

     top: 56%;
   }

   div.pattern[pattern="diamond"][count="1"] {}

   div.pattern[pattern="diamond"][count="2"] {}

   div.pattern[pattern="diamond"][count="3"] {

     left: 7%;
   }

   div.pattern[pattern="diamond"][count="4"] {

     left: 41%;
   }

   div.pop-up {
     --dialogueWidth: 30%;
     top: calc(var(--navBarHeight) * 2);
     z-index: 6;
   }

   div.pop-up>.content {
     height: 86%;
   }

   div.pop-up>.content>p {
     padding-left: 3%;
     padding-right: 3%;
   }

   div.pop-up>h1.title {
     line-height: 1;
   }

   button {
     line-height: 1.2;
   }

   .buttons {
     margin-top: 2%;
   }

   div.dialogue {
     overflow-y: auto;
   }

   span.tooltip {
     font-size: 0.75rem;
   }

   div.pop-up>.content>ul {
     padding-bottom: 10%;
   } */
}


@supports (-webkit-touch-callout: none) {
  div.playspace {
    /* background-color: rgb(37, 255, 73); */
  }

  div.dialogue>div.statement>p>span,
  div.dialogue>div.statement>p>a>span {
    animation-duration: 0s;
    animation-delay: 0ms;
  }
}