#preloader{
    position: fixed;
    font-family: "antarctican-mono", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 30px;
    inset: 0;
    background: white;
    display: flex;
    justify-content: center;
    color: rgb(0, 0, 0);
    z-index: 9999;
    padding-top: 1rem;

}
.projekte {
    width: 1280px;
    height: 835px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.projekte__projekt {
    position: absolute;
    cursor: pointer;
}
.projekte__projekt img {
    width: 100%;
    object-fit: cover;
    display: block;
    filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.4));
    transition: filter 0.3s ease-in-out; 
}
.projekte__projekt:hover img{
    filter: drop-shadow(6px 6px 7px rgba(0, 0, 0, 0.4));

}
.projekte__projekt--1 {
    width: calc(291 / 1280 * 100%);
    height: calc(411 / 835 * 100%);
    left: calc(71 / 1280 * 100%);
    top: calc(104 / 835 * 100%);
    z-index: 80;
    transition: transform 0.3s ease-out;
}
.projekte__projekt--1:hover{
    z-index: 999;
    transform: scale(1.005);
}
.projekte__projekt--2 {
    width: calc(79 / 1280 * 100%);
    height: calc(111 / 835 * 100%);
    left: calc(322 / 1280 * 100%);
    top: calc(71 / 835 * 100%);
    z-index: 90;
    transition: transform 0.3s ease-out;

}
.projekte__projekt--2:hover{
    z-index: 999;
    transform: scale(1.015);

}
.projekte__projekt--3 {
    width: calc(341 / 1280 * 100%);
    height: calc(227 / 835 * 100%);
    left: calc(190 / 1280 * 100%);
    top: calc(401 / 835 * 100%);
    z-index: 70;
    transition: transform 0.3s ease-out;
}
.projekte__projekt--3:hover{
    z-index: 999;
    transform: scale(1.005);
}
.projekte__projekt--4{
    width: calc(239 / 1280 * 100%);
    height: calc(342 / 835 * 100%);
    left: calc(421 / 1280 * 100%);
    top: calc(448 / 835 * 100%);
    z-index: 60;
    transition: transform 0.3s ease-out;
}
.projekte__projekt--4:hover{
    z-index: 999;
    transform: scale(1.005);
}
.projekte__projekt--5{
    width: calc(378 / 1280 * 100%);
    height: calc(235 / 835 * 100%);
    left: calc(636 / 1280 * 100%);
    top: calc(536 / 835 * 100%);
    z-index: 20;
    transition: transform 0.3s ease-out;
}
.projekte__projekt--5:hover{
    z-index: 999;
    transform: scale(1.005);
}
.projekte__projekt--6{
    width: calc(261 / 1280 * 100%);
    height: calc(225 / 835 * 100%);
    left: calc(930 / 1280 * 100%);
    top: calc(421 / 835 * 100%);
    z-index: 10;
    transition: transform 0.3s ease-out;
}
.projekte__projekt--6:hover{
    z-index: 999;
    transform: scale(1.005);
}
.projekte__projekt--7{
    width: calc(96 / 1280 * 100%);
    height: calc(135 / 835 * 100%);
    left: calc(874 / 1280 * 100%);
    top: calc(350 / 835 * 100%);
    z-index: 30;
    transition: transform 0.3s ease-out;
}
.projekte__projekt--7:hover{
    z-index: 999;
    transform: scale(1.015);
}
.projekte__projekt--8{
    width: calc(193 / 1280 * 100%);
    height: calc(130 / 835 * 100%);
    left: calc(922 / 1280 * 100%);
    top: calc(245 / 835 * 100%);
    z-index: 40;
    transition: transform 0.3s ease-out;
}
.projekte__projekt--8:hover{
    z-index: 999;
    transform: scale(1.005);
}
.projekte__projekt--9{
    width: calc(109 / 1280 * 100%);
    height: calc(109 / 835 * 100%);
    left: calc(851 / 1280 * 100%);
    top: calc(161 / 835 * 100%);
    z-index: 50;
    transition: transform 0.3s ease-out;
}
.projekte__projekt--9:hover{
    z-index: 999;
    transform: scale(1.015);
}
.container{
    display: flex;
    flex-direction: column;    
    align-items: center;
}
.projekte__titel{
    font-family: "antarctican-mono", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 13px;
}
.about__me{
    font-family: "antarctican-mono", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 13px;
    transition: color 0.2s ease-in-out;
    text-decoration: none;
    color: inherit;
}
.about__me:hover{
    color: #888;
}
.nav-links {
    display: flex; 
    gap: 15px; 
}
#mode-toggle {
    font-size: 13px;
}
@media (max-width: 834px){
    .projekte__titel{
        font-size: 13px;
    }
    .about__me{
        font-size: 13px;
    }
    .projekte{
        width: 744px;
        height: 1133px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }
    .projekte__projekt--1 {
        width: calc(275 / 744 * 100%);
        height: calc(388 / 1194 * 100%);
        left: calc(56 / 744 * 100%);
        top: calc(137 / 1194 * 100%);
    }
    .projekte__projekt--2 {
        width: calc(68 / 744 * 100%);
        height: calc(96 / 1194 * 100%);
        left: calc(287 / 744 * 100%);
        top: calc(102 / 1194 * 100%);
        z-index: 100;
    }
    .projekte__projekt--3 {
        width: calc(317 / 744 * 100%);
        height: calc(212 / 1194 * 100%);
        left: calc(99 / 744 * 100%);
        top: calc(453 / 1194 * 100%);
        z-index: 100;
    }
    .projekte__projekt--4 {
        width: calc(203 / 744 * 100%);
        height: calc(290 / 1194 * 100%);
        left: calc(88 / 744 * 100%);
        top: calc(630 / 1194 * 100%);
        z-index: 110;
    }
    .projekte__projekt--5 {
        width: calc(377 / 744 * 100%);
        height: calc(251 / 1194 * 100%);
        left: calc(214 / 744 * 100%);
        top: calc(825 / 1194 * 100%);
        z-index: 120;
    }
    .projekte__projekt--6 {
        width: calc(262 / 744 * 100%);
        height: calc(220 / 1194 * 100%);
        left: calc(494 / 744 * 100%);
        top: calc(675 / 1194 * 100%);
        z-index: 130;
    }
    .projekte__projekt--7 {
        width: calc(91 / 744 * 100%);
        height: calc(129 / 1194 * 100%);
        left: calc(686 / 744 * 100%);
        top: calc(589 / 1194 * 100%);
        z-index: 140;
    }
    .projekte__projekt--8 {
        width: calc(218 / 744 * 100%);
        height: calc(147 / 1194 * 100%);
        left: calc(538 / 744 * 100%);
        top: calc(477 / 1194 * 100%);
        z-index: 70;
    }
    .projekte__projekt--9 {
        width: calc(109 / 744 * 100%);
        height: calc(109 / 1194 * 100%);
        left: calc(516 / 744 * 100%);
        top: calc(398 / 1194 * 100%);
        z-index: 60;
    }
}
@media (max-width:430px){
    .projekte__titel{
        font-size: 13px;
    }
    .about__me{
        font-size: 13px;
    }
    .projekte{
        width: 320px;
        height: 568px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }
    .projekte__projekt--1 {
        width: calc(119 / 320 * 100%);
        height: calc(169 / 568 * 100%);
        left: calc(20 / 320 * 100%);
        top: calc(78 / 568 * 100%);
    }
    .projekte__projekt--2 {
        width: calc(37 / 320 * 100%);
        height: calc(51 / 568 * 100%);
        left: calc(114 / 320 * 100%);
        top: calc(60 / 568 * 100%);
        z-index: 100;
    }
    .projekte__projekt--3 {
        width: calc(137 / 320 * 100%);
        height: calc(91 / 568 * 100%);
        left: calc(55 / 320 * 100%);
        top: calc(207 / 568 * 100%);
    }
    .projekte__projekt--4 {
        width: calc(98 / 320 * 100%);
        height: calc(141 / 568 * 100%);
        left: calc(41 / 320 * 100%);
        top: calc(279 / 568 * 100%);
    }
    .projekte__projekt--5 {
        width: calc(140 / 320 * 100%);
        height: calc(87 / 568 * 100%);
        left: calc(55 / 320 * 100%);
        top: calc(394 / 568 * 100%);
    }
    .projekte__projekt--6 {
        width: calc(104 / 320 * 100%);
        height: calc(89 / 568 * 100%);
        left: calc(176 / 320 * 100%);
        top: calc(357 / 568 * 100%);
    }
    .projekte__projekt--7 {
        width: calc(45 / 320 * 100%);
        height: calc(63 / 568 * 100%);
        left: calc(260 / 320 * 100%);
        top: calc(310 / 568 * 100%);
    }
    .projekte__projekt--8 {
        width: calc(74 / 320 * 100%);
        height: calc(50 / 568 * 100%);
        left: calc(221 / 320 * 100%);
        top: calc(273 / 568 * 100%);
    }
    .projekte__projekt--9 {
        width: calc(40 / 320 * 100%);
        height: calc(40 / 568 * 100%);
        left: calc(273 / 320 * 100%);
        top: calc(239 / 568 * 100%);
    }
}
.dark-mode .projekte__projekt img {
    filter: drop-shadow(4px 4px 5px rgba(187, 134, 252, 0.4));
}
.dark-mode .projekte__projekt:hover img {
    filter: drop-shadow(6px 6px 7px rgba(187, 134, 252, 0.4));
}