#my_projects{
    h1{
        text-align: center;
        font-weight: normal;
        margin-bottom: 2rem;
    }

    .toggle{
        width:100%;
        overflow:hidden;

        .toggle-wrapper{
            border-radius: 25px;
            display:flex;
            width: min-content;
            overflow:hidden;
            margin-inline:auto;
            transition:0.5s;
        }

        .toggle-activator{
            display:none;
        }

        .toggle-position{
            transition:0.5s;
            border: solid 2px gray;

            p{
                margin:0;
                text-wrap:nowrap;
                color:gray;
                transition:0.5s;
                padding: 16px 20px;
                font-size:40px;
                line-height:44px;
            }
        }

        label{
            /*padding: 2rem 2rem;*/
        }

        .toggle-activator#toggle-activator-1:checked ~ .toggle-wrapper>#toggle-position-1{
            background: white;
            p{
                color: black;
            }
        }

        .toggle-activator#toggle-activator-2:checked ~ .toggle-wrapper>#toggle-position-2{
            background: white;
            p{
                color: black;
            }
        }

        .toggle-position{
            height: 100%;
            width:100%;
        }
        #toggle-position-1{
            border-radius: 25px 0 0 25px;
            border-right:0;
        }
        #toggle-position-2{
            border-radius: 0 25px 25px 0;
            border-left:0;
        }
        .toggle-position:hover{
            border: solid 2px white;
            p{
                color:white;
                cursor:pointer;
            }
        }

        .screen{
            display:flex;
            transition:0.5s;
            min-width: 200%;
        }
        .toggle-activator#toggle-activator-2:checked ~ .screen{
            transform: translateX(-50%);
        }

        .project-wrapper{
            --button-width:355;
            --button-height:75;
            --button-padding:30;
            --curve-radius-num:40;
            --border-width:2px;
            --curve-radius: calc(var(--curve-radius-num) * 1px);

            width: 90vw;
            height: 482px;
            margin: 2rem auto;
            overflow:clip;
            z-index:2;
            position:relative;
        }

        .project-content{
                position: absolute;
                max-width: 100%;
                height: 100%;
                padding:2rem;
                display:flex;
                gap:2rem;

                img{
                    border-radius:25px;
                    height:418px;
                    width:418px;
                }
        }


        .button{
            position:absolute;
            bottom:0;
            right:0;
            height: calc(var(--button-height) * 1px);
            width: calc(var(--button-width) * 1px);
        }

        .project-border{
            height:100%;

            >div{
                height:80px;
                position:relative;
            }

            .piece-1{
                width: 100%;
                display:flex;
                height:calc(100% - (var(--button-height) + var(--button-padding)) * 1px);

                >div{max-width:100%;width:-webkit-fill-available;}

                .corner{
                    border: solid var(--border-width) white;
                    border-right:0px;
                    border-bottom:0px;
                    border-radius: var(--curve-radius) 0 0 0;
                }

                .neck{
                    border-top:solid var(--border-width) white;
                    max-width: var(--curve-radius);
                }

                .right-piece{
                    min-width: calc((var(--button-width) + var(--button-padding) - var(--curve-radius-num)) * 1px);
                    width:auto;
                    border-radius: 0 var(--curve-radius) var(--curve-radius) 0;
                    border: solid var(--border-width) white;
                    border-left:0px;
                }
            }
            .piece-2{
                width: calc(100% - (var(--button-width) + var(--button-padding)) * 1px);
                height:calc((var(--button-height) + var(--button-padding)) * 1px - var(--border-width));

                .neck{
                    height:var(--curve-radius);
                    width:calc(100% - (var(--button-width) + var(--button-padding)) * 1px);
                    border-left: solid var(--border-width) white;


                    div.smoother{
                        width: calc(var(--curve-radius) + var(--border-width) * 2);
                        height: calc(var(--curve-radius) + var(--border-width) * 2);
                        position: absolute;
                        top: calc(var(--border-width) * -1);
                        right: calc((var(--border-width) + var(--curve-radius)) * -1);
                        overflow: hidden;
                    }

                    div.smoother:before{
                        content: "";
                        width: calc(var(--curve-radius) * 4);
                        height: calc(var(--curve-radius) * 4);
                        border: solid var(--border-width) white;
                        border-radius: calc(var(--curve-radius) + var(--border-width) * 2);
                        position: absolute;
                        left: 0px;
                        top: 0;
                    }

                }

                .bottom-piece{
                    height:calc(100% - var(--curve-radius));
                    border:solid var(--border-width) white;
                    border-top:0;
                    border-radius:0 0 var(--curve-radius) var(--curve-radius);
                }
            }
        }
    }
}

@media only screen and (max-width: 1440px){
    #my_projects .toggle .project-wrapper{
        height: 482px;
    }
}

@media only screen and (max-width: 1280px){
    #my_projects .toggle .toggle-position p {font-size:20px;line-height:24px;}
    #my_projects .toggle .project-wrapper{
        height: 482px;
    }
    #my_projects .toggle {
        .project-wrapper{height:auto;}
        .project-content {
            position:relative;
            height: auto;
            border: solid 2px gray;
            border-radius: 20px;

            >img{
                height:300px;
                width:300px;
            }
        }
        .project-border{display:none;}
        .button{
            width:100%;
            position:relative;
            margin-top:2rem;
        }
    }
}

@media only screen and (max-width: 1024px){
    #my_projects .toggle .project-wrapper{height: auto;}
    #my_projects .toggle {
        .project-wrapper{overflow:visible; margin-top:76px;}
        .project-content {
            padding-top: 184px;

            >img{
                height:200px;
                width:200px;
                position:absolute;
                top:-48px;
                margin-inline: auto;
                left: 0;
                right: 0;
            }
        }
    }
}