/* Basic setup */
   /* body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    } */

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

    .animation {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        background-color:#555;
        overflow: hidden;
        height: 100vh;
        border-radius: 5px;
    }

    /*Button styling */
   .animatebuttons {
      width:4.5rem;
      height:4.5rem;
      border:none;
      border-radius: 5px;
      /* margin-bottom: 10px; */
      padding: 13px 0px;
      font-size: 12px;
      cursor: pointer;
    }

     /*Button styling */
   .animatebuttons:hover {
     background-color: #999999;
    }

    /* .directionbuttons {
        margin-top: 0.5rem;
      
        border:none;
        padding: 9px 0px;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        border-radius: 5px; 
        width:4rem; 
        height: 4rem;
      } */

    .btn-img {
       height:2rem; 
       width:2rem
    }


    .animateprisms {
        height: 100%;
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        /* background-color: #333; */
        background-color: white;
        margin: 0;
        overflow: hidden;
    }

    .animationcontrols {


        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 1rem;
        row-gap:2rem;
        justify-items: center;

        /* margin-left: 1rem; */
        /* padding-top:2rem; */
        /* justify-content: left; */
        /* margin-bottom:1rem; */
        /* font-size:1.3rem; */
      
    }

    .animation-sliders {
        color:white; 
        margin: 2rem 2rem 2rem 0
    }

    @media screen and (min-width: 500px) {
        .animationcontrols {
            margin-left: 0;
        }
    }

    .prism-container{
        /* perspective: 1000px; */
        /* width: 100vw; */
        width: 800px;
        display: flex;
        align-items: center;
        transform-origin: center;
        cursor: grab;
        user-select: none;
        overflow: hidden;
    
    }
    
    .scene {
        /* perspective: 1000px; */
        /* width: 1800px; */
        width: 100%;
        display: flex;
        padding-left: 10rem;
        padding-top:30rem;
        /* transform-origin: center; */
        cursor: grab;
        user-select: none;
      
    }

    /* Container for the 3D prism collection */
    .object-group {
        position: relative;
        transform-style: preserve-3d;
        transform-origin: 50% 50% 50%;
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0) translateX(0) translate(Y) translateZ(0); 
    }

  
    .fabrication {    
        position: relative;
        transform-style: preserve-3d;
        transform-origin:50% 50% 50%;
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0) translateX(0) translate(Y) translateZ(0); 
    }

    /* #fabrication {    
        position: absolute;
        transform-style: preserve-3d;
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0) translateX(0) translate(Y) translateZ(0); 
    }  */

    /* Prism and face styling */
    .prism {
      /* width: 100px;
      height: 100px; */
      position: absolute;
      transform-style: preserve-3d;
      transform-origin:50% 50% 50%;
      transition: transform 1s linear;
    }

    .face {
       width: 100px;
       height: 100px;
       position: absolute;
     /*  background-color: rgba(128, 128, 128, 0.5); /* Light gray with 50% opacity */
       /* background-color: rgba(255, 255, 255, 0.9); */
       background-color: lightblue;
       opacity: 0.7;
       /* border: none; */
       box-sizing: border-box;
       border: 1px solid #666;
       /* clip-path:  polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); */
    }

   .circle {
        position: absolute;
        width: 20px;
        height: 20px; 
        border-radius: 50%;
        background-color: blue;
    } 

    .symmetrical-prism-container {
        position:fixed;
        transform-style: preserve-3d;
        display: flex
        /* transform: rotateX(20deg) rotateY(30deg);  */
        /* animation: rotate 20s linear infinite; */
      
    }

    /* Surface segments wrapping around the prism */
    .surface-segment {
        position: absolute;
        background-color:  #999999 ;
        /* background: rgba(0, 128, 255); */
        /* border-left: 2px solid #333; */
        /* border-right: 2px solid #333; */
        border: none;
        opacity: 1;
        box-sizing: border-box;
        transform-origin: center center;
        border: solid 1px rgba(240, 240, 240, 0.2); 
    }

     .end-faces {
        position: absolute;
        transform-style: preserve-3d;
        /* display: flex */
        /* transform: rotateX(20deg) rotateY(30deg);  */
        /* animation: rotate 20s linear infinite; */
      
    }

    /* Circular end faces */
    .end-face {
        position: absolute;
        background: rgba(0, 128, 255, 1.0);
        border: none;
        box-sizing: border-box;
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0) translateX(0) translate(Y) translateZ(0); 
        transform-origin: center center;
    }

    #axes {
        /* position: absolute; */
        top: 50%;
        left: 50%;
        /* transform-style: preserve-3d; */
        transition: all 0.1s;
    }
    .axis {
        position: absolute;
        width: 500px;
        height: 4px;
        transform-origin: left center;
    }
    .axis-label {
        position: absolute;
        color: black;
        font-family: Arial, sans-serif;
        font-size: 16px;
        transform: translateZ(1px);
    }
    #x-axis { 
        background: red;
        transform: rotateY(0deg) rotateX(0deg); /* Points right along X */
    }
    #x-label {
        left: 540px; /* End of X axis */
        top: -8px;
        font-size:24px;
    }
    #y-axis { 
        background: green; 
        transform: rotateZ(-90deg); /* Points up along Y */
    }
    #y-label {
        transform: translateY(-540px) rotateZ(90deg) rotateX(90deg) translateZ(1px); /* Move to positive end of Y axis and rotate upright */
        top: 0;
        left: 0;
        font-size:24px;
    }
    #z-axis { 
        background: blue; 
        transform: rotateY(90deg); /* Points into screen along Z */
    }
    #z-label {
        transform: rotateY(90deg) translateX(540px) translateZ(1px); /* End of Z axis */
        top: 0;
        left: 0;
        font-size:24px;
    }

    .selected-object {
     background-color: #39B54A;
     border: 1px solid #000;
    }