body {
    margin: 0;
    padding: 0;
    font-family: 'Quicksand', sans-serif;
    background-position: center;
}

.container {
    width: 100vw; height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 400px;
}

.block {
    text-shadow: 0px 0px 10px grey;
    transition: all .2s;
    box-shadow: 0px 0px 10px black;
    border: 10px solid black;
    height: 55vh;
    aspect-ratio: 6.5 / 4;
    border-radius: 10px;
    margin: 2em;
    background: #eaeaea;
    box-sizing: border-box;
}

.block:hover {
    scale: 1.2
}

.second {

    transform-style: flat;
    background: url(https://i.postimg.cc/NfBWKvPC/Mountain-Brotherhood2.png;);
    background-position: center;
    text-shadow: 0px 0px 10px grey;
}

.inner {
    width: 100%; height: 100%;
    backdrop-filter: blur(5px);
    border-radius: 10px;
    display: flex;
    color: white;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inner p {
    padding: 3em;
}

.shadow {
    position: absolute;
    height: 40vh;
    aspect-ratio: 3 / 4;
    background: #cdcdcd;
    box-shadow: 0 0 50px 70px #cdcdcd;
    z-index: -1;
}

body {
    background-attachment: fixed;
    backdrop-filter: blur(5px);
    background-position: 5px 50px; 
    background-repeat: no-repeat, repeat;
}

.maindiv {
    transition: all .2s;
   
    padding: auto; 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    margin: auto; 
    justify-content: center; 
    text-align: center; 
    align-items: center;
   
    scale: 1.0;
    box-shadow: 0px 0px 10px black;
    top: 30px; 
    width: 650px; 
    height: 653px; 
    border:5px solid black; 
    background-color: gray; 

}

.maindiv:hover{
    z-index: 10000;
    scale: 1.05;
    box-shadow: 0px 0px 30px black;
}

.text {
    font-family: "Jost", Helvetica, sans-serif;
    color: white;
}

.zentr{
    display: flex; 
    flex-direction: column; 
    margin: auto; 
    justify-content: center; 
    text-align: center; 
    align-items: center;
    padding: auto;
    position: relative; 
}

.head {
    align-items: center;
    position: relative;
    display: flex;
    flex-direction: row;
    position: relative;
    height: max-content;
    
    border: 1px solid #141414; 
    background-color: #141414;
}

.foot {
    margin: auto; 
    justify-content: center; 
    position: relative;
    
    top: 70px;
    border: 1px solid #E6E6E6; 
    background-color: #E6E6E6;
}

.btns {
    border: 1px solid whitesmoke;
    transition: all .2s;
    scale: 1.1;
    font-size: large;
    font-family: "Jost", Helvetica, sans-serif;
    color: white;
}

.btns:hover {
    text-shadow: 0px 0px 10px grey;
    border: 1px solid #141414;
    transform: scale(1.2);
    z-index: 10000;
}

.screenshots{
    display: flex;  
    margin: auto; 
    justify-content: center; 
    text-align: center; 
    align-items: center;
    padding: auto;
    position: relative;   
}
.screenshotslist {
    display: flex; 
    flex-direction: column; 
    margin: auto; 
    justify-content: center; 
    text-align: center; 
    align-items: center;
    padding: auto;
    position: relative;   
}

.shadowtext {
    box-shadow: 0px 0px 10px black;
    border: 5px solid black;
    border-radius: 5px;
    outline-color: #cdcdcd;
}

.bottomTxt {
    scale: 0.8;
    text-align: center;
    font-family: "Jost", Helvetica, sans-serif;
    color: #141414;
}

.gamelink {
    border: 100px solid black;
    border-radius: 5px;
    box-shadow: 0px 0px 10px black;
}

.contacts {
    font-family: "Jost", Helvetica, sans-serif;
    color: white;
    left: 50%; 
    position: relative;
}

.bck {
    backdrop-filter: blur(4px);
    background-color: #141414;
}

.radialBtn {
    transition: all .4s;
    border: 6px solid black;
    padding: 0.35%;
    background-color: #E6E6E6;
    border-radius: 30px;
}

.radialBtn:hover {
    border: 6px solid black;
    padding: 0.35%;
    scale: 1.1;
    box-shadow: 0px 0px 5px black;
    border-radius: 100px;  
}
.mainBtnHome {
    border-radius: 50%;
    transition: all .4s;
    box-shadow: 0px 0px 0px #ab5052;
}

.mainBtnHome:hover {
    box-shadow: 0px 0px 15px #ab5052;
}

@media (orientation: landscape) {
    .bck {
        backdrop-filter: blur(4px);
        background-image: url(https://i.postimg.cc/VLyNVJ30/hgfhfgh.png;); 
        background-size: 100%;    
        background-attachment: fixed;    
    }
}

@media (orientation: portrait) {
    .maindiv{
        top: 300px;
    }

    .foot{
        margin: auto; 
        justify-content: center; 
        position: relative;
        top: 650px;
        padding-bottom: 50%;
        border: 1px solid #E6E6E6; 
        background-color: #E6E6E6;
    }
    .bck{
        backdrop-filter: blur(4px);
        background-image: url(https://i.postimg.cc/gcQ4QC7h/bckkkkk.png;); 
        background-size: 100%;    
        background-attachment: fixed; 
    }
    .contacts{
        font-family: "Jost", Helvetica, sans-serif;
        color: white;
        left: 0%; 
        position: relative;
    }

    .radialBtn{
        scale: 0.0;
    }
}

@media (max-width: 1830px) {
    .contacts {
        font-family: "Jost", Helvetica, sans-serif;
        color: white;
        left: 40%; 
        position: relative;  
    }
}

@media (max-width: 1550px) {
    .contacts {
        font-family: "Jost", Helvetica, sans-serif;
        color: white;
        left: 30%; 
        position: relative;  
    }
}
@media (max-width: 1400px) {
    .contacts {
        font-family: "Jost", Helvetica, sans-serif;
        color: white;
        left: 20%; 
        position: relative;  
    }
}

@media (max-width: 1100px) {
    .contacts {
        font-family: "Jost", Helvetica, sans-serif;
        color: white;
        left: 20%; 
        position: relative;  
    }
}
@media (max-width: 800px) {
    .contacts {
        font-family: "Jost", Helvetica, sans-serif;
        color: white;
        left: 10%; 
        position: relative;  
    }
}