*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container{
    background: url(images/arka\ plan\ \(1\).jpg);
    height: 100vh;
    background-size: 100% 100%;
}


.navbar{
    width: 100%;
    height: 80px;
    background: (0, 0, 0, 0.1);
    backdrop-filter: blur(40px);
    user-select: none;
    
}

.logo{
    display: inline-block;
    margin-left: 100px;
    margin-top: 5px;
    
}



ul{
    float: right;
    margin-right: 20px;
}

ul li{
    list-style: none;
    display: inline-block;
    margin-top: 30px;
    margin-left: 30px;

}

ul li a{
    text-decoration: none;
    border-radius: 25%;
    color: black;
    font-size: 20px;
    font-family: monospace;
    padding: 6px 12px;
    font-weight: bold;
    user-select: none;
}

li a.active,
li a:hover{
    background-color: rgb(222, 255, 227);
    border-radius: 40px;
    transition: 2s;
}


.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: auto;
    text-align: center;
}
.center h1 {
    font-family:monospace;
    color:#ffffff00;
    font-size:60px;
    font-weight:500;
    line-height:70px;
    text-align: center;
    margin: auto;


}

        .center h1 span {
            user-select: none;
    color: #000000;
    text-align: center;
    margin: auto;
    align-content: center;
    top: 25px;
}


@media(max-width:768px) {
    .center h1 {
        position: relative;
    font-size:30px;
    color: #00000000;
    text-align: center;
    top: 50px;
    
}
} 
.saat{
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%,-50%)
    
}
.saat a{
    margin-left:auto;
    margin-right:auto;
    user-select: none;
}

.wrap{
    
    position: relative;
    width: 80vmin;
    height: 80vmin;
    transform: scale(0.2) translateZ(0px);
    opacity: 0;
    transition: transform .5s, opacity .5s;
    margin: 0 auto;
}


.wrap a{
    position: absolute;
    left: 0; top: 0;
    width: 47.5%;height: 55.5%;
    transform: scale(.5) translateZ(0px);
}
.wrap a div{
    height: 100%;
    background-size: cover;
    opacity: .5;
    transition: opacity .5s;
    border-radius: inherit;
}
.wrap a:nth-child(1)
{
    border-radius: 40vmin 0 0 0;
    transform-origin: 110% 110%;
    transition: transform .4s .15s;
}
.wrap a:nth-child(1) div{
    background-image:url('Radial/Classic.jpg');
    
}

.wrap a:nth-child(1):hover{
    transform: scale(1.2);
    z-index: 2;
}
.wrap a:nth-child(2)
{
    border-radius: 0 40vmin 0 0;
    left: 52.5%;
    transform-origin: -10% 110%;
    transition: transform .4s .2s;
}
.wrap a:nth-child(2) div{
    background-image:url('Radial/AlienForce.jpg');
}
.wrap a:nth-child(2):hover{
    transform: scale(1.2);
    z-index: 2;
}

.wrap a:nth-child(3)
{
    border-radius: 0 0 0 40vmin;
    top: 52.5%;
    transform-origin: 110% -10%;
    transition: transform .4s .25s;
}
.wrap a:nth-child(3) div{
    background-image:url('Radial/UltimateAlien.jpg');
}

.wrap a:nth-child(3):hover{
    transform: scale(1.2);
    z-index: 2;
}

.wrap a:nth-child(4)
{
    border-radius: 0 0 40vmin 0;
    top: 52.5%; left: 52.5%;
    transform-origin: -10% -10%;
    transition: transform .4s .3s;

}
.wrap a:nth-child(4) div{
    background-image: url('Radial/Omniverse.jpg');
}
.wrap a:nth-child(4):hover{
    transform: scale(1.2);
    z-index: 2;
}

.wrap a:nth-child(5)
{
    border-radius: 50vmin;
    width: 55%; height: 55%;
    top: 22.5%; left: 22.5%;
    transform-origin: -10% -10%;
    transform: scale(1);

}
.wrap a:nth-child(5) div{
    background-image: url('Radial/Omnitrix.png');
    

}

.wrap span{
    position: relative;
    display: block;
    margin: 0 auto;
    top: 45vmin;
    width: 10vmin;
    height: 10vmin;
    border-radius: 100%;
    background: #585247;
    transform: translateZ(0px);
}
.wrap span span{
    position: absolute;
    width: 60%;
    height: 3px;
    background: #aca6961f;
    left: 20%;
    top: 50%;
    border-radius: 0;
}
.wrap span span:after, span span:before{
    content: "";
    position: absolute;
    left: 0;
    top: -1.5vmin;
    width: 100%;
    height: 100%;
    background: inherit;
}
.wrap span span:after{
    top: 1.5vmin;
}
.wrap span:hover + .wrap, .wrap:hover{
    transform: scale(0.8) translateZ(0px);
    opacity: 1;
}
.wrap span:hover + .wrap a, .wrap:hover a{
transform: scale(1) translateZ(0px);
}
a:hover div{
    opacity: 1;
    transform: translateZ(0px);
}

footer {
    position: absolute;
    background: url(images/footerarka.png);
    width: 100%;
    bottom: -407px;
    left: 0;
    }

footer .content {
max-width: 1250px;
margin: auto;
padding: 30px 40px 40px 50px;
}
footer .content .top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 50px;
}

.content .top .media-icons {
display: flex;
margin: auto;

}
.content .top .media-icons a {
height: 40px;
width: 40px;
margin: 0 8px;
border-radius: 50%;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 17px;
text-decoration: none;
transition: all 0.4s ease;
}
.top .media-icons a:nth-child(1) {
background: #4267b2;
}
.top .media-icons a:nth-child(1):hover {
color: #4267b2;
background: #fff;
}
.top .media-icons a:nth-child(2) {
background: #e1306c;
}
.top .media-icons a:nth-child(2):hover {
color: #e1306c;
background: #fff;
}
.top .media-icons a:nth-child(3) {
background: #0077b5;
}
.top .media-icons a:nth-child(3):hover {
color: #0077b5;
background: #fff;
}
.top .media-icons a:nth-child(4) {
    background: #e13030;
    
}
.top .media-icons a:nth-child(4):hover {
color: #e13030;
background: #fff;

}
footer .content .link-boxes {
width: 100%;
display: flex;
justify-content: space-between;

}
footer .content .link-boxes .box {
width: calc(100% / 5 - 10px);
height: auto;
}

.content .link-boxes .box .link_name {
color: #000000;
font-size: 16px;
font-weight: 400;
position: flex;
font-size:larger;
text-align: center;
background-image: url("images/arka\ plan\ \(1\).jpg");
background-image: 100%;

}

.content .link-boxes .box li {
margin: 5px 5px;
list-style: none;
}



.link-boxes .input-box input {
height: 50px;
width: calc(100% + 70px);
border: 2px solid #afafb6;
background: #eaeaea;
border-radius: 4px;
padding: 0 15px;
font-size: 15px;
color: #000000;
margin-top: 5px;
}

.link-boxes .input-box input[type="submit"] {
background: #fff;
color: #3824d2;
border: none;
font-size: 30px;
font-weight: 400;
margin: 4px 0;
opacity: 0.8;
cursor: pointer;
transition: all 0.4s ease;
}
.input-box input[type="submit"]:hover {
opacity: 1;
}
.link-boxes p{
    font-size: 25px;
    color: #2d252582;
    text-align: center;
    user-select: none;
    border-color: #000000;
    background-image: url("images/arka\ plan\ \(1\).jpg") ;
    font-family: monospace;
    font-weight: bold;
}
.link-boxes p a{
    text-decoration: none;
    color:#2d2525;

}
.link-boxes img{
    margin-left: auto;
    border-radius: 5px;
}