*{
    box-sizing: border-box;
}



html, body{
    margin: 0;
    min-height: 100%;
}



body{
    background-image: url(mainpageimg/wallpaper_minecraft_bedrock_edition_1920x1080.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1rem, 3vw, 2rem);
    overflow-x: hidden;
}


.mainh1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 140vh;
    height: auto;
    position: absolute;
    top: -20vh;
    animation: heartbeat 10s infinite;
   
}

h1 img {
    width: 100%;
    height: auto;
}


@keyframes heartbeat{
    0% { transform: scale(1); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}


@font-face {
    font-family: 'Minecraft';
    src: url('./minecraft-font/MinecraftRegular-Bmg3.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


.buttons{
    /* position: relative;
    bottom: 30rem; */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: clamp(1rem, 2.5vw, 2.5rem);
    width: min(100%, 2400px); */
    margin-top: 20vh;
    position: relative;
    gap: clamp(0.8rem, 2.5vw, 2rem);
    width: 100%;
}

.buttons button{
    /* width: 40%; */
    /* height: 70px; */
    /* font-size: 40px; */
    width: 70vh;
    height: 6vh;
    font-size: 4vh;
    font-family: 'Minecraft', monospace;
    background-image: url(mainpageimg/minecraftbutton3.webp);
    background-size:contain;
    color: rgb(255, 255, 255);
    border: 3px solid #000000;
    box-shadow: 4px 4px 0 #333;
    border-radius: 4px;
    cursor: pointer;
    
}


.buttons button:active {
    box-shadow: 0 2px 0 #333;
    transform: translateY(3px);
}

.buttons button:hover {
    border: 2px solid #ffffff;
}

.info img{
    width: 15vh;  
    height: 20vh;
}

.info{
    font-family: 'Minecraft', monospace;
    color: white;
    background-image: url(mainpageimg/minecraftgreenbackground2.avif);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(13px, 1.8vw, 22px);
    gap: clamp(15px, 3vh, 40px);
    padding: clamp(15px, 3vw, 30px);
    width: clamp(280px, 80vw, 800px);
    max-height: 85vh;
    overflow-y: auto; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-shadow: #000000 2px 2px 0px, #000000 4px 4px 0px, #000000 6px 6px 0px;
    border: 5px solid gray;
    border-radius: 20px;
}

.info button{
    width: 20vh;  
    height: 5vh;    
    font-size: 2vh; 
    font-family: 'Minecraft', monospace;
    background-image: url(mainpageimg/minecraftbutton3.webp);
    background-size:contain;
    color: rgb(255, 255, 255);
    border: 3px solid #000000;
    box-shadow: 4px 4px 0 #333;
    border-radius: 4px;
    cursor: pointer;
}

.info button:active {
    box-shadow: 0 2px 0 #333;
    transform: translateY(3px);
}

.info button:hover {
    border: 2px solid #ffffff;
}

.music-btn{
    position: fixed;
    top: 0px;
    left: 50px;
    background-color: transparent;
    text-shadow: 0 4px 0 #000000;
    border: none;
    font-size: clamp(20px, 3vw, 35px);
}

/* ################## */

        .choosing{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10vh;
            background-color: rgba(49, 100, 2, 0.4);
            background-size: cover;
            width: 135vh;
            height: 70vh;
            border-radius: 2vh;
            justify-self: center;
            justify-content: center;
            padding: 30px;
        }


        .nether img,.map1 img{
            width: 45vh;
            height: auto;
            border-radius: 20px;
            align-self: center;
        }

        .choose p{
            font-size: 2vh;
            color: rgb(255, 255, 255);
            font-family: 'Minecraft', monospace;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 10px;
            padding: 10px;
        }

        .map1,.nether{
            padding: 10px;
            width: 55vh;
            height: auto;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
        }

        section .map:hover{
            transform: translateY(-20px);
            cursor: pointer;
            box-shadow: 0.5vh 0.5vh 0.5vh 0.5vh  black;
            border-radius: 1vh;
            background-color: rgba(255, 254, 254, 0.4);
        }

        .choose{
            display: flex;
            gap: 10vh;

        }

        .h1map{
            font-family: 'Minecraft', monospace;
            color: rgb(0, 0, 0);
            font-size: 3vh;
            height: 1px;
        }

        .music-btn{
        position: fixed;
        top: 0px;
        left: 50px;
        background-color: transparent;
        text-shadow: 0 4px 0 #000000;
        border: none;
        font-size: clamp(20px, 3vw, 35px);
        }