/* styles.css
   ==========

   Layout:
      1. Reset and Base Styles
      2. Variables (Theme and Design Tokens)
      3. Typography
      4. Layout / Sections (IDs)
      5. Components (Classes)
      6. Responsive / Media Queries

*/


/* =========================================== */
/*   1. RESET AND BASE STYLES                  */
/* =========================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  cursor: url("./assets/img/paddle.png"), auto;
  background-color: grey;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}


/* =========================================== */
/*   2. VARIABLES (THEME AND DESIGN TOKENS)    */
/* =========================================== */

:root {
  --color_primary: #6d4aff;
  --color_text: #333;
  --space_unit: 8px;
  --paddle_cursor: url('./assets/img/paddle.png');
}

/* =========================================== */
  /*   3. TYPOGRAPHY                             */
  /* =========================================== */

  h1 {

    /*
    margin-top: 0;
    */
  }

  /* =========================================== */
  /*   4. LAYOUT / SECTIONS (IDs)                */
  /* =========================================== */


  /* =========================================== */
  /*   5. COMPONENTS (CLASSES)                   */
  /* =========================================== */

  .scene {
    width: 200px;
    height: 200px;
    transform: rotate(45deg);
  }

  .sign {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    /*
    transition: transform 0.6s ease;
    */
  }

  .sign_front, .sign_back {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    backface-visibility: hidden;
  }

  .sign_front {
    /*
    background: yellow;
    */
  }

  .sign_back {
    /*
    background: red;
    */
    transform: rotateY(180deg);
  }


  /* =========================================== */
  /*   6. RESPONSIVE / MEDIA QUERIES             */
  /* =========================================== */

  .sign:hover {
    /*
    transform: rotateY(180deg);
    transform: rotate3d(1, 1, 0, 180deg);
    */

    cursor: url("../assets/img/paddle.png"), auto;
    
    /* Normalized vector for Y+45deg:
    transform: rotate3d(0.707, 0.707, 0, 180deg);
    */
  }
  
@media (min-width: 768px) {
  /* Tablet styles */
}

@media (min-width: 1024px) {
  /* Desktop styles */
}