/* ==========================
   Kacheln
========================== */

.tiles{
    display:flex;
    justify-content: center;
    gap:70px;
}

.tile{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:350px;
    min-height:200px;
    margin-top:50px;
    border-radius:24px;
    color:white;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.3);
    background:linear-gradient(
        to top,
        #7d00ff,
        #5b2b73
    );
    transition:.25s;
}

.tile h2{
    position:absolute;
    top:15px;
    left:50%;
    transform:translateX(-50%);
    margin:0;
}

.projects-tile .tile-content{
    width:100%;
    text-align:left;
    padding-left:30px;
}

.tile-content{
    text-align:center;
}

.tile-content a{
    color:white;
    text-decoration:underline;
}

.tile:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(125,0,255,.35);
}

.tile-smarthome{
    background-image:url("../images/smarthome.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.tile-nextcloud{
    background-image:url("../images/nextcloud.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

/* ==========================
    Header
========================== */

.site-header {
    border-bottom: 1px solid white;
    text-align: center;
    align-items: center;
}

/* ==========================
    Sonstiges
========================== */

.pokemon-card{
    margin-top:40px;
    margin-bottom: 20px;
    width:350px;
    padding:20px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.3);
    background:linear-gradient(
        to top,
        #7d00ff,
        #5b2b73
    );
    color:white;
}

.pokemon-card img{
    width:150px;
    height:150px;
    object-fit:contain;
}

#death-screen{
    position:fixed;
    inset:0;
    background:black;
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    z-index:9999;
    transition:opacity 1s, visibility 1s;
}

#death-screen h1{
    color:#8b0000;
    font-size:80px;
    font-weight:300;
    letter-spacing:10px;
    opacity:0;
    transform:scale(1.2);
    transition:opacity 2s, transform 2s;
}


#death-screen.active{
    opacity:1;
    visibility:visible;
}


#death-screen.active h1{
    opacity:1;
    transform:scale(1);
}

/* ==========================
   Responsive
========================== */

@media (max-width:900px){

    .tiles{
        grid-template-columns:1fr;
    }

    h1{
        font-size:42px;
    }

}