* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;            
            font-family: 'Roboto'; 
            background-color: #FFFFFF;
        }
        .main {
            display: flex;
            margin: 0;
            padding: 3%;
            height: 100%;
            flex-wrap: nowrap;
            flex-direction: column;
            position: relative;
        }
        .phone-message {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3rem;
            text-align: center;
        }
        .top-container {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            margin: 1rem;
            flex-direction: row-reverse;
        }

        .top-right-button {
            position: absolute;
            top: 1rem;
            right: 2rem;
            background-color: #F3F1F4;
            color: #25212C;
            cursor: pointer;
            box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
            border: none;
        }
        .image-container{
            aspect-ratio: 1;
            margin: auto;
        }
        .image-container img{
            width: 100%;
            height: 100%;
        }

        .button-container {
            align-items: flex-end;
            flex: 1 0 auto;
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            margin: 1rem;
            flex-wrap: nowrap;
            flex-direction: row;
        }
        .button {
            background-color: #BAFD4F;
            color: #25212C;            
            height: 15vw;
            padding: 0.9375rem 1.875rem;
            border: none;
            border-radius: 7.5vw;
            font-size: 3vw;
            cursor: pointer;
            font-family: 'Roboto', sans-serif;
            font-weight: 500;
            text-align: center;
            align-items: center;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 2vw;

        }
        .button:disabled {
            background-color: #F5F7FA;
            color: #CCD1D9;
            cursor: not-allowed;
        }
        .button:disabled img{ opacity: 0.2; }
        .round-button {
            width: 15vw;
            height: 15vw;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .paint-buttom-container{
            align-items: flex-end;
            flex: 1 0 auto;
            display: flex;
            flex-wrap: nowrap;
            flex-direction: column-reverse;
        }
        .paint-pallete{
            background-color: #25212C;
            height: 20vw;
            width: 100%;
            border-radius: 10vw 10vw 0 0;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-evenly;
            align-items: center;
        }
        .paint-instrument{
            height: 20vw;
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            flex-direction: raw;
            justify-content: space-between;
            align-items: center;
        }
        .paint-round-button {
            width: 10vw;
            height: 10vw;            
            display: flex;
            justify-content: center;
            padding: 1rem 1rem;
        }
        .paint-instrument-button {
            background-color: #ffffff;
            display: flex;
            width: 8vw;
            height: 100%;
            flex-direction: column-reverse;
            align-items: center;
            border: none;
            border-radius: 50%;
            -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);

        }
        .paint-instrument-button.selected{
            border: 2px dashed #CCD1D9;
            border-radius: 10%;
        }
        .paint-instrument-button img{
            height: 80%;
        }

        .color{
            width: 4vw;
            height: 4vw;
            border-radius: 50%;
            cursor: pointer;

        }
        .color.selected { 
            border-radius: 50%;
            border: 3.5vw dashed transparent;
        }

        @media(min-aspect-ratio: 1/1) {
            .main {
                display: none;
            }
            .phone-message {
                display: block;
            }
        }