*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    user-select:none;
    -webkit-user-select:none;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
    font-family:Arial,Helvetica,sans-serif;
}

/* KAR */

#snow{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:3;
    pointer-events:none;
}

/* SİYAH KATMAN */

#overlay{
    position:fixed;
    inset:0;
    background:#000;
    z-index:2;
}

/* HOŞ GELDİN */

#welcome{
    position:fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:5;
    opacity:0;
    animation:welcomeFade 2s forwards;
}

/* BAŞLIK */

#title{

    font-size:72px;
    font-weight:900;
    letter-spacing:10px;
    color:white;

    text-shadow:
    0 0 15px rgba(255,255,255,.15);

}

/* KONUM */

#location{

    margin-top:25px;

    display:flex;
    align-items:center;

    gap:12px;

    font-size:30px;

    color:#d8d8d8;

    letter-spacing:2px;

}

/* BAYRAK */

#flag{

    font-size:36px;

}

/* LOGO SAYFASI */

#logoScreen{

    position:fixed;
    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    pointer-events:none;

    z-index:4;

    transition:2s;

}

/* RESİMLER */

#desktopImage,
#mobileImage{

    opacity:0;
    display:none;
    transition:2s;

}

}

/* MASAÜSTÜ */

@media(min-width:769px){

#desktopImage{

display:block;

width:950px;

}

}

/* TELEFON */

@media(max-width:768px){

#mobileImage{

display:block;

width:100%;
height:100%;
object-fit:cover;

}

#title{

font-size:46px;
letter-spacing:5px;

}

#location{

font-size:22px;

}

}

/* ANİMASYON */

@keyframes welcomeFade{

0%{

opacity:0;
transform:scale(.95);

}

100%{

opacity:1;
transform:scale(1);

}

}

@keyframes logoFade{

0%{

opacity:0;
transform:scale(.90);

}

100%{

opacity:1;
transform:scale(1);

}

}

/* YAZILAR KAYBOLURKEN */

.fadeOut{

animation:fadeOut 2s forwards;

}

@keyframes fadeOut{

0%{
    opacity:1;
    transform:scale(1);
}

100%{
    opacity:0;
    transform:scale(0.95);
    visibility:hidden;
}

}

.fadeOut{
    animation:fadeOut 2s forwards;
    pointer-events:none;
}

/* LOGO GELİRKEN */

.showLogo{

opacity:1 !important;

}

/* RESİM */

img{

image-rendering:auto;
pointer-events:none;

}