/*=============Gamme colorée*/
:root[data-theme="dark"]{
  --back-color: black;
  --main-color: white;
  --accent-color: #05ff61;
  --neon-color: #fe02c6;
}

:root[data-theme="light"]{
  --back-color: white;
  --main-color: black;
  --accent-color: #FFA64D;
  --neon-color: skyblue;
}
/*==========================Background*/
html,body{
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    background-color: var(--back-color);
    top: 0;
    left: 0;
    margin: 0;
}
/*==========================Structure*/

main{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;

            #seeYouLater{
                position: absolute;
                z-index: 1;
                width: 444px;
                height: 377px;
                top:33px;
                left:33px;

                div {
                    padding: 13.12px;
                    padding-right: 33px;
                            p{
                                font-family: 'lineal';
                                font-size: 22px;
                                color: var(--main-color)


                            }

                            strong{
                                    color: unset;
                                    animation: blink 3.33s infinite;
                            }
                }
            }

            #contactSection{
                position: absolute;
                z-index: 1;
                width: 333px;
                height: 117px;
                top:400px;
                left:3.33px;


                nav{
                    width: 100%;
                    height: 100%;

                    padding: 13.12px;
                    gap: 7.77px;

                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-around;

                    box-sizing: border-box;

                    .textBtn{
                        width: 66%;
                        height: 77%;
                    }
                }
            }

            #colorBtnContainer{
                    visibility: collapse;
                    position:absolute;
                    right: 3.33px;
                    bottom: 144px;
                    height: 144px;
                    width: 44px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-around;
                    z-index: 1;
                    background-color: var(--back-color);
                    border-color: var(--main-color);
                    color: var(--main-color);
                    border-radius: 7.77px;
                    border-style: solid;
                    border-width: thin thick thin thin;

                            .checkedIcon{
                                color: var(--back-color);
                                fill: var(--accent-color);
                            }

                            /*==========================Toggle*/
                            .switch {
                                position: relative;
                                display: inline-block;
                                width: 34px;
                                height: 60px;
                            }

                            .switch input {
                                opacity: 0;
                                width: 0;
                                height: 0;
                            }

                            .slider {
                                position: absolute;
                                top: 0;
                                left: 0;
                                right: 0;
                                bottom: 0;
                                background-color: var(--accent-color);
                                border-color: var(--main-color);
                                border-style: solid;
                                border-width: thin;
                                -webkit-transition: .4s;
                                transition: .4s;
                                border-radius: 34px;
                                cursor: cell;
                            }

                            .slider:before {
                                position: absolute;
                                content: "";
                                height: 26px;
                                width: 26px;
                                left: 3.33px;
                                bottom: 4px;
                                background-color: var(--main-color);
                                -webkit-transition: .4s;
                                transition: .4s;
                                border-radius: 50%;
                                cursor: cell;
                            }

                            input:checked + .slider {
                                background-color: var(--accent-color);
                            }

                            input:checked + .slider:before {
                                -webkit-transform: translateY(-26px);
                                -ms-transform: translateY(-26px);
                                transform: translateY(-26px);
                            }

                            .icon{
                                fill: currentColor;
                                width: 50%;
                            }
            }

            #colorBtnContainer:has(.switch:focus){
              background-color: var(--main-color);
              border-color: var(--back-color);
              color: var(--back-color);
            }

            footer{
                width: 100%;
                min-height: 93px;

                border-width: thin 0 0 0;

                position: fixed;
                z-index: 0;
                bottom: 0;
                left: 0;

                padding: 13.12px;
                padding-bottom: 16.1px;
                box-sizing: border-box;

                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 7.77px;

                    a{
                        width: 100%;
                        height: 100%;
                        margin-top: 7.77px;
                        box-sizing: border-box;

                            img{
                                width: 100%;
                                image-rendering: pixelated;
                            }

                            .needOutline{
                                border-color: var(--main-color);
                                border-style: solid;
                                border-width: thin;
                            }

                            #reducedDNN{
                              visibility: collapse;
                              display: none;
                            }
                    }

                    a:focus, a:hover{
                      margin-top: 0;
                      margin-bottom: 7.77px;

                          img{
                            border-color: var(--main-color);
                            border-style: solid;
                            border-width: thin;
                          }
                    }

            }
}

aside{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -33;
    top: 0;
    left: 0;

                #texture{
                    min-width: 100vw;
                    min-height: 100vh;
                    position: relative;
                    z-index: -30;
                    mix-blend-mode: multiply;
                }

                #gradient{
                    min-width: 100vw;
                    min-height: 100vh;
                    position: absolute;
                    z-index: -33;
                    top: 0;
                    left: 0;
                    transition: 7.77s ease-in;
                }

}