@media (max-width: 768px) {
    .wrapper {
        overflow-x: hidden;
    }
}

.slideshow {
        position: relative;
        width: 100%;
        height: 100vh;
        background-size: cover;
    }

/* 中央テキストのスタイル */
.slideshow-text {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: clamp(70px, 6vw, 100px);
    color: white;
}

.slideshow-text-span {
    font-size: clamp(50px, 6vw, 100px);
}

.slideshow-subtext-span {
    font-size: clamp(40px, 4vw, 70px);
}

@media (min-width: 769px) {
    .img-main {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        animation: img-animation 25s infinite;
    }
}

@media (max-width: 768px) {
    .img-main {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        animation: img-animation 25s infinite;
    }
}

.main1{
    background-image: url("img/main1.avif")
}

.main2{
    background-image: url("img/main2.avif")
}

.main3{
    background-image: url("img/main3.avif")
}

.main4{
    background-image: url("img/main4.avif")
}

.main5{
    background-image: url("img/main5.avif")
}

.img-main:nth-of-type(1) {
    animation-delay: 0s;
}

.img-main:nth-of-type(2) {
    animation-delay: 5s;
}

.img-main:nth-of-type(3) {
    animation-delay: 10s;
}

.img-main:nth-of-type(4) {
    animation-delay: 15s;
}

.img-main:nth-of-type(5) {
    animation-delay: 20s;
}

@keyframes img-animation {
    0%{ opacity: 0;}
    5%{ opacity: 1;}
    25%{ opacity: 1;}
    30%{ opacity: 0;}
    100%{ opacity: 0;}
}

.img-announcements{
    margin: 10px auto 0;
    transition: filter 0.2s ease;
    width: 100%;
    height: auto;
    display: block;
}

.img-announcements:hover{
    filter: brightness(1.3);
    cursor: pointer;
}

.status-container{
    margin-bottom: 40px;
}

h1 {
    margin-top: 40px;
    margin-bottom: 10px;
    font-size: clamp(35px, 4vw, 50px);;
    text-align: center;
}

.status-mining{
    display: flex;
    font-weight: bold;
}

@media (max-width: 768px) {
    .status-mining{
        flex-direction: column;
    }
}

.server-status{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 2%;
    width: 100%;
}

.server-count{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    padding-left: 2%;
}

@media (min-width: 769px) {
    .status-text{
        font-size: 30px;
    }

    .status{
        font-size: 60px;
    }

    .status-text-loading{
        font-size: 60px;
    }

    .status-text-offline{
        font-size: 60px;
        color: red;
    }

    .status-text-online{
        font-size: 60px;
        color: forestgreen;
    }

    .status-text-error{
        font-size: 60px;
        color: purple;
    }
}

@media (max-width: 768px) {
    .status-text{
        font-size: 30px;
    }

    .status{
        font-size: 50px;
    }

    .status-text-loading{
        font-size: 50px;
    }

    .status-text-offline{
        font-size: 50px;
        color: red;
    }

    .status-text-online{
        font-size: 50px;
        color: forestgreen;
    }

    .status-text-error{
        font-size: 50px;
        color: purple;
    }
}

.mainPageMC {
    display: flex;
    justify-content: center;
}

.mainPageMCButton {
    width: clamp(300px, 30%, 30%);
    height: 70px;
    font-size: 30px;
    background-color: #49d169;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border: none;
    transition: background-color 0.2s;
    font-weight: bold;
    color: black;
    cursor: pointer;
}

.mainPageMCButton:hover {
    background-color: #2cbf4e;
}