/* * {
    border: 1px solid;
} */
body {
margin: 0;
padding: 0;
background: #bff1ff;
}

#wrapper {
    margin: 5px 0;
    background-color: #fff;
}

/* Back Arrow */
.back {
    overflow: hidden;
    margin:10px 0 0 10px;
    padding:15px 0;
    font-size: 15px;}
.back a {
    color: #000000b8;
    text-decoration: none;
    transition: 0.2s ease-out;
    padding: 4px;
    border-radius: 20%;
    border: 3px solid #f5f5f500;
    border-bottom: 3px solid #0361775a;}
.back a:hover {
        color: #000000;
        background:#00000003;
        border-top: 1px solid #00000091;
        border-bottom: 3px solid #b9f1ff;;
        border-left: 3px solid #1a234451;
        border-right: 3px solid #c0c0c046;}
.back a:active {
    color: #000000;
    background:rgb(191, 240, 255);
    border-top: 1px solid #7d7d7d00;
    border-bottom: 3px solid #1a234400;
    border-left: 3px solid #1a23440b;
    border-right: 3px solid #ffffff00;}

/* Intro */
#container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    padding: 20px;
    overflow: hidden;
    width: 100vw;}
 h1 {
    font-size: 3rem;
    margin: 10vh 0;
    text-align:center;
    font-size: 3em; 
    background: linear-gradient(to right, #000 .5%, #bff1ff 99.5%); 
    -webkit-background-clip: text;
    background-clip: 2px 2px 2px;
    color: transparent;
    transition: background-position .6s ease;
    background-size: 200% 100%;}
h1:hover {
    background-position: right center;
    }

  
/* Design */
h5 {
    font-size: 1.1rem;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    position: relative;
    color: #000;}
 
  /* Photoshop */
.list {
    margin: 0 50px;
    padding: 20px;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    transform-style:preserve-3d;
    transform: perspective(1000px);}
img {
    Margin: 10px;
    max-width: 200px;
    max-height: 50px;}
#Part img, #Every img, #Most img{
    Max-height: 70px;
    max-width: 230px;}

/* ------------PS Design Animations------------ */
.list .item {
    transition: .5s;
    filter: brightness(.9) blur(1px)}
   
.list .item:hover {
    transform: scale(1.1) translatez(200px);
    filter: brightness(1);}
/* Right */
.list .item:hover + *{
    filter: brightness(1);
    transform: translatez(150px) rotatey(10deg);}
.list .item:hover + * + *{
    filter: brightness(.9);
    transform: translatez(100px) rotatey(2deg);}
.list .item:hover +*+*+* , 
    .list .item:hover +*+*+*+* , 
        .list .item:hover +*+*+*+*+*, 
            .list .item:hover +*+*+*+*+*+*{
    filter: brightness(.8);
    transform: translatez(50px) rotatey(1deg);}
/* Left */
.list .item:has(+ *:hover){
    filter: brightness(1);
    transform: translatez(150px) rotatey(-10deg);}
.list .item:has(+ * + *:hover){
    filter: brightness(1);
    transform: translatez(100px) rotatey(-2deg);}
.list .item:has(+ * + * + *:hover),
    .list .item:has(+ * + * + * + *:hover), 
        .list .item:has(+ * + * + * + * + *:hover),
            .list .item:has(+ * + * + * + * + * + *:hover){
    filter: brightness(.8);
    transform: translatez(50px) rotatey(-1deg);}

/* CSS Animation */
.dropbox {
    padding: 20vh 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .drop {
        position: absolute;
        width: 200px;
        height: 200px;
        background: transparent;
        border-radius: 57% 43% 37% 50%/ 29% 52% 48% 55%;
        box-shadow: inset 10px 20px 20px rgba(0, 0, 0, .2),
            10px 15px 10px rgba(0, 0, 0, 0.15),
            15px 20px 20px rgba(255,255,255,.5);
        }
        #drop2, #drop3, #drop4{
            animation: waterDropAnimation 1.7s infinite cubic-bezier(1, 1, .165, 0);
        } 
        #drop4{
            background-color: rgba(108, 255, 71, 0.3);
            box-shadow: inset 10px 10px 60px 30px rgb(0, 202, 20),
                10px 15px 10px rgba(164, 255, 162, 0.7),
                15px 20px 20px rgba(255, 255, 255, 0.5);}
            @keyframes waterDropAnimation {
                0% {
                    border-radius: 57% 43% 37% 50% / 29% 52% 48% 55%;
                }
                20% {
                   border-radius: 45% 46% 33% 55% / 31% 50% 49% 53%; 
                }
                40% {
                    border-radius: 33% 53% 28% 64% / 32% 49% 51% 52%; 
                }
                60% {
                    border-radius: 36% 53% 31% 62% / 37% 47% 53% 48%; 
                }
                80% {
                    border-radius: 54% 48% 46% 46% / 34% 48% 51% 51%; 
                }
                100% {
                    border-radius: 57% 43% 37% 50% / 29% 52% 48% 55%; 
            }}


    .warpedtext {
        color:rgb(227, 0, 0);
        display: inline-block;
        transform-origin: center;
        animation: textWarpAnimation 1.7s infinite cubic-bezier(1, 1, .165, 0);}
            @keyframes textWarpAnimation {
                0% {
                    transform: scale(1.1) skew(5deg, 0deg);
                }
                20% {
                    transform: scale(1.1) skew(0deg, 0deg);
                }
                40% {
                    transform: scale(1.1) skew(5deg, 0deg);
                }
                50% {
                    transform: scale(1.1) skew(5deg, 0deg);
                }
                60% {
                    transform: scale(1.1) skew(0deg, 0deg);
                }
                80% {
                    transform: scale(1.1) skew(-5deg, -1deg);
                }
                100% {
                    transform: scale(1.1) skew(5deg, 0deg);
                }}

/* 3d section */
.threedwrapper {
    width: 100%;
   margin: 60vh 0 0;
    display:inline-block;
    justify-content: center;
}
.threedwrapper h2, .threedwrapper p {
    padding: 0 10vw;
}
/* creations */
h3 {
    font-size: 1.5rem;
    padding: 0 0 5px 0;
    margin:0 0 30px 0;
}

/* Hidden Section */
.hiddenwrapper {
    padding: 20vh 10vw;
}
    .hiddenwrapper p {
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

.proj-sec {
    display: none;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
}
    .proj-sec.show {
        display: block;
    }

h4 {
    display: flex;
    font-size: 1.1rem;
    padding: 20px 0;
    margin: 0;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    color: #000;
    transition: transform 0.3s ease-out box-shadow 0.3s ease background-color 0.3s ease;
}

#toggleHeader:hover {
    cursor: pointer;
    border-radius: 10%;
    box-shadow: 0px 20px 50px -15px #00d0ff2b;
    background:linear-gradient(#fffeef17, #0361775a);
    color: #ffffff;
    transform: translateY(-2px);
}
    #toggleHeader:active {
        transform: translateY(2px);
    }
        #toggleHeader.locked {
            border-radius: 10%;
            color: #ffffff;
            box-shadow: 0px 20px 50px -15px #00738cbc;
            background: linear-gradient(#fffeef17, #0361775a);
            transform: translateY(2px);
        }
        #toggleHeader img, #toggleHeaderTwo img {
            display: inline-block;
            width: 30px;
            height:30px;
            padding:0;
            margin: 0 10px 0 0;
        }

/* Hidden Section2 */
h6 {
    font-size: 1.2rem;
    }


.proj-secTwo {
    display: none;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
}

.proj-secTwo.show {
    display: block;
}

.stepblock {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    text-align: center;
}

.lightwrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    height: 150px;
    margin-bottom: 10px;
}
.codewrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #333; 
    color: white; 
    font-size: 1.2rem; 
    text-align: left; 
    padding: 15px; 
    border-radius: 5px;
    min-width: 100px;
    max-width: 700px;
    /* white-space: pre-wrap;  */
    word-break: break-all;
}

.lighton,
.lightoff,
.lighton2,
.lightoff2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.2s ease;
}

.lightstep1 img {
    filter:grayscale(.8);
}
.lighton img,
.lightoff img, .lightstep1 img, .lighton2 img, .lightoff2 img{
    width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    -webkit-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
}

.lightoff {
    opacity: 0;
}

.lighton.hidden {
    opacity: 0;
}

.lightoff.visible {
    opacity: 1;
}

.light-toggle {
    position: absolute;
    justify-content: center;
    bottom: 13%; 
    left: -8%;
    border-radius: 10%;
    width: 40px;
    height: 60px;
    color: #fff;
    transition: opacity 0.1s ease;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 1; 
}
.light-toggle2 {
    position: absolute;
    justify-content: center;
    border-radius: 10%;
    width: 40px;
    height: 60px;
    color: #fff;
    transition: opacity 0.1s ease;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 1;
}

#toggleOn {
    background: linear-gradient(white, grey);
    opacity: 0;
    display: flex;
    align-items: flex-end;
    box-shadow: 0px -1px 1px #000;
}

#toggleOff, #toggleOff2 {
    background: linear-gradient(grey, white);
    display: flex;
    align-items: flex-start;
    box-shadow: -1px 1px 1px #000,-1px 3px 1px #000, 2px -2px 4px #ff9e7b2e;
}

.lightwrapper:hover .light-toggle, .lightwrapper:hover .light-toggle2 {
    opacity: 1;
}
.lighton img, .lightoff img {
    border-radius: 3px;
}




#toggleHeaderTwo:hover {
    cursor: pointer;
    border-radius: 10% 10% 5% 5%;
    box-shadow: 0px 20px 50px -15px #00d0ff2b;
    background: linear-gradient(#fffeef17, #0361775a);
    color: #ffffff;
    transform: translateY(-2px);
}

#toggleHeaderTwo:active {
    transform: translateY(2px);
}

#toggleHeaderTwo.locked {
    border-radius: 10% 10% 5% 5%;
    box-shadow: 0px 20px 50px -15px #00738cbc;
    background: linear-gradient(#fffeef17, #0361775a);
    color: #fff;
    transform: translateY(2px);
}


/* Footer */
footer {
    text-align: center;
    padding: 5px 0 1rem;
    background-color: #bff0ff;
    color: #fff;
    font-size: 1.2rem;}

    @media screen and (max-width: 768px) {
    
        h5 {
            margin: 50px 0;
        }
    }
            



    /* darkmode */


    /* General */
.dark-theme .bodywrapper {
    background-color: #60b4c75a;margin: 0;
    padding: 1px 0 0;
    width: 100%;
    height: 100%;
    background: repeating-conic-gradient(#bff1ff, #ecf9ff, #bff1ff, #ecf9ff, #bff1ff);
    animation: animate 8s linear infinite;
    background-image: conic-gradient(from var(--a), #bff1ff, #ecf9ff, #bff1ff, #ecf9ff, #bff1ff);
}

@property --a {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes animate{
 0% {--a: 0deg;
}
100%{ --a: 360deg}
} 

    .dark-theme #wrapper, .dark-theme #Container, .dark-theme .threedwrapper, .dark-theme .hiddenwrapper {
        background-color: black;
    }
    .dark-theme p, .dark-theme a, .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme h5, .dark-theme h6 {
        color: white;
    }
    .dark-theme h1 {
        background: linear-gradient(to right, #ffffff 1%, #bff0ff 99%); 
        font-size: 3rem;
        margin: 10vh 0;
        text-align:center;
        font-size: 3em;  
        -webkit-background-clip: text;
        background-clip: 2px 2px 2px;
        color: transparent;
        transition: background-position .6s ease;
        background-size: 200% 100%;}
    .dark-theme h1:hover {
        background-position:right center;
        }

    /* Toggles */
    .dark-theme #toggleHeader, .dark-theme #toggleHeaderTwo {
        border-radius: 5px;
        box-shadow: 0px 20px 50px -15px #ffffff0d;
        background:linear-gradient(#18181817, #ffffff5a);
    
    }
    .dark-theme #toggleHeader:hover, .dark-theme #toggleHeaderTwo:hover {
        cursor: pointer;
        border-radius: 10%;
        box-shadow: 0px 20px 50px -15px #00d0ff2b;
        background:linear-gradient(#18181817, #bff0ff);
        color: #ffffff;
        transform: translateY(-2px);
    }
    
    .dark-theme #toggleHeader:active, .dark-theme #toggleHeaderTwo:active {
        transform: translateY(2px);
    }
    .dark-theme #toggleHeader.locked, .dark-theme #toggleHeaderTwo.locked {
        border-radius: 10%;
        color: #ffffff;
        box-shadow: 0px 20px 50px -15px #5ccae3df;
        background: linear-gradient(#18181817, #bff0ff);
        transform: translateY(2px);
    }
    .dark-theme footer {
        background-color: transparent;
    }
    .dark-theme .back a, .dark-theme .back a:hover {
        color: white;
        border-bottom: 3px solid #bff0ff;
    }
    .dark-theme .back a:hover {
        background-color: #bff0ff86;
    }
    .dark-theme .back a:active {
        background-color: #bff0ff;
    }