/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/*Page layout*/
#tangram-wrapper {
    display: flex;
    gap: 20px;
    flex-direction: row;
}
#blockTray {}
#canvas {
    position: relative;
}
#figureguide {
    /*background-image: url('https://demos.imagixel.com/logicabs/wp-content/uploads/2025/09/logicabs-figura-01b.png');
    background-position: center 35%;
    background-size: auto;
    background-repeat: no-repeat;
    width: 75%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;*/
}

/* Blocks */
.block{
    position: absolute;
}

#square { 
    width: 104px; 
    height: 104px; 
    background: #16a085;
    left: 56px;
    top: 53px;
}

#triangle1 { 
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 145px 145px 145px;
    border-color: transparent transparent #f1c40f transparent; 
    transform: rotate(2.35rad);
    left: 28px;
    top: 145px;
}

#triangle2 { 
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 145px 0 145px 145px;
    border-color: transparent transparent transparent #e74c3c;
    left: 8px;
    top: 195px;
}

#triangle3 { 
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 145px 145px;
    border-color: transparent transparent #d63294 transparent;
    left: 36px;
    top: 215px;
}

#triangle4 {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 75px 75px 75px 0;
    border-color: transparent #69dcf0 transparent transparent;
    left: 192px;
    top: 235px;
}

#triangle5 { 
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 145px 145px;
    border-color: transparent transparent #007bff transparent;
    left: 94px;
    top:255px;
}

#triangle6 {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 75px 75px 75px 0;
    border-color: transparent #69dc9a transparent transparent;
    left: 30px;
    top: 275px;
}

#parallelogram{
  width: 76px;
  height: 222px;
  background-color: #e67e22;
  clip-path: polygon(0 0, 100% 35%, 100% 100%, 0 65%);
  left: 215px;
  top: 295px;
}

.ui-rotatable-handle {
    height: 16px;
    width: 16px;
    cursor: pointer;
    background-image: url('https://demos.imagixel.com/logicabs/wp-content/uploads/2025/09/rotate.png');
    background-size: 100%;
    left: 75%;
    bottom: 10%;
    position: absolute;
    z-index: 99;
}

@media only screen and (max-width: 480px) {
    
    .block{
        position: absolute;
    }
    
    #square { 
        width: 80px; 
        height: 80px; 
        background: #16a085;
        left: 56px;
        top: 53px;
    }
    
    #triangle1 { 
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 111.65px 111.65px 111.65px;
        border-color: transparent transparent #f1c40f transparent; 
        transform: rotate(2.35rad);
        left: 28px;
        top: 145px;
    }
    
    #triangle2 { 
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 111.65px 0 111.65px 111.65px;
        border-color: transparent transparent transparent #e74c3c;
        left: 8px;
        top: 195px;
    }
    
    #triangle3 { 
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 111.65px 111.65px;
        border-color: transparent transparent #d63294 transparent;
        left: 36px;
        top: 215px;
    }
    
    #triangle4 {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 57.75px 57.75px 57.75px 0;
        border-color: transparent #69dcf0 transparent transparent;
        left: 192px;
        top: 235px;
    }
    
    #triangle5 { 
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 111.65px 111.65px;
        border-color: transparent transparent #007bff transparent;
        left: 94px;
        top:255px;
    }
    
    #triangle6 {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 57.75px 57.75px 57.75px 0;
        border-color: transparent #69dc9a transparent transparent;
        left: 30px;
        top: 275px;
    }
    
    #parallelogram{
      width: 58.5px;
      height: 171px;
      background-color: #e67e22;
      clip-path: polygon(0 0, 100% 35%, 100% 100%, 0 65%);
      left: 215px;
      top: 295px;
    }
    
}