$colorDesign :( body-color: #e6e6e6, main-primary: #002699, template: #cccccc, span: #1a53ff, span-text: #b3b3b3 ); $template_height: 50%; $template_width: 60%; $template-section-height:100%;$template-section-width:95%; @function justify($value, $size){ $justify: $size - $value; @return $justify / 2 } $screenWidth: 700px; @mixin screenWidth{ @media (max-width: #{$screenWidth}) { @content; } } body { background-color: map-get($colorDesign, body-color); .background{ position:absolute;top:0;left:0; background-color: map_get($colorDesign, main-primary); width:100%; height:100%; clip-path: polygon(0 0, 23% 0, 77% 100%, 0 100%); } #template{ position:absolute; top: justify($template_height, 100%); left: justify($template_width, 100%); background-color: map_get($colorDesign, template); height: $template_height; width: $template_width; margin:auto; box-shadow: 10px 10px 5px rgba(0,0,0,0.8); border-radius: 10px; @include screenWidth { height:70%;width:90%; top: justify(70%, 100%);left: justify(90%, 100%); } section{ height:$template-section-height; width: $template-section-width; background-color: map_get($colorDesign, template); margin:auto; text-align: center; } } } .tictactoe-box{ height:$template-section-height / 3; width:$template-section-width / 3; background-color: map_get($colorDesign, template); display:inline-block; span{ display:block;margin:auto;background-color:map_get($colorDesign, span);font-size:100px;font-weight:bold;text-align:center; height:100%;user-select: none;cursor:pointer;color:map_get($colorDesign, span-text); transition: 2s ease;text-shadow: 5px 5px rgba(230, 230 , 230, 0.2); } span:hover{ transform: rotateY(180deg); } }