@charset "UTF-8";

@font-face {
    font-family: 'DotGothic16';
    src: url('./DotGothic16-Regular.woff') format('woff');
}

a:link { color: white; }
a:visited { color: #777777; }
a:active { color: #777777; }

body {
    background-image: 
        url("basic-images/background.png"),  
        url("basic-images/skull-background.jpg");  
    
    background-size: 
        cover,  /* 上の背景を画面いっぱいに */
        250px;   /* 下の背景を 250px で繰り返し */
    
    background-repeat: 
        no-repeat,  /* 上の背景は繰り返さない */
        repeat;  /* 下の背景は繰り返す */
    
    background-attachment: 
        fixed,  /* 上の背景はスクロールしても固定 */
        scroll; /* 下の背景は通常スクロール */
    
    background-position: 
        center,  /* 上の背景を中央揃え */
        left top; /* 下の背景は左上基準 */
}

h1 {
    margin: 0;
    display: inline-block;
}
h2 {
    margin: 0;
    display: inline-block;
}
h3 {
    margin: 0;
    display: inline-block;
}

.toplogoart {
    max-width: 250px;
    margin: auto;
    text-align: center;
  }
img {
    width: 100%;
}

.statement {
    text-align: center;
    margin: auto;
    font-family: 'DotGothic16';
    font-size: 10pt; /* Adjust font size */
    color: white; /* Match with the overall theme */
    background-color: black; /* Optional background for readability */
    max-width: fit-content;
    padding: 10px;
    border: red solid 3px;
}
.statement1 {
    text-align: center;
    margin: auto;
    font-family: 'DotGothic16';
    font-size: 10pt; /* Adjust font size */
    color: gray; /* Match with the overall theme */
    background-color: black; /* Optional background for readability */
    max-width: fit-content;
    padding: 10px;
    border:  #A404F2 solid 3px;
}

.characterz {
    max-width: 500px; /* Increased width for better layout */
    margin: auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: center;
    gap: 20px; /* Space between character containers */
}

.character {
    text-align: center; /* Center the content inside each character container */
    width: 230px; /* Set a fixed width for uniform layout */
}

.character img {
    width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
}

.character p {
    text-align: center;
    margin: auto;
    margin-top: 4px; /* Add space between image and description */
    font-family: 'DotGothic16';
    font-size: 10pt; /* Adjust font size */
    color: white; /* Match with the overall theme */
    background-color: black; /* Optional background for readability */
    padding: 8px; /* Optional padding for text */
    max-width: fit-content;
    border: red solid 2px;
}

.namez {
    text-align: center;
    margin: auto;
    font-size: 18pt;
    font-family: 'DotGothic16';
    background-color: black; /* Optional background for readability */
    padding: 4px; /* Optional padding for text */
    max-width: fit-content;
}

.goback{
    max-width: 200px;
    margin: auto;
    text-align: center;
    img {
        width: 100%;
    }
}
.copyrightmessage {
    font-family: 'DotGothic16';
    font-size: 10pt;
    color: #A404F2;
    background-color: black;
    width: fit-content;
    margin: auto;
    text-align: center;
}

.deco {
    max-width: 500px;
    text-align: center;
    margin: auto;
}

.link {
    font-family: 'DotGothic16';
    font-size: 15pt;
    color: #A404F2;
    background-color: black;
    width: fit-content;
    margin: auto;
    text-align: center;
    margin-top: 5px;
}



/*ここからスマホ*/
@media only screen and (max-width: 767px) {
    body{
        background-image: url("./basic-images/skull-background.jpg");
        background-repeat: repeat;
        background-size: 50%;
    }

    h1 {
        margin: 0;
        display: inline-block;
    }
    h2 {
        margin: 0;
        display: inline-block;
    }
    h3 {
        margin: 0;
        display: inline-block;
    }

    .toplogoart {
        max-width: 50%;
        margin: auto;
        text-align: center;
      }
    img {
        width: 100%;
    }
    
.statement {
    text-align: center;
    margin: auto;
    font-family: 'DotGothic16';
    font-size: 3vw; /* Adjust font size */
    color: white; /* Match with the overall theme */
    background-color: black; /* Optional background for readability */
    max-width: fit-content;
    padding: 10px;
    border: red solid 3px;
}
.statement1 {
    text-align: center;
    margin: auto;
    font-family: 'DotGothic16';
    font-size: 3.5vw; /* Adjust font size */
    color: gray; /* Match with the overall theme */
    background-color: black; /* Optional background for readability */
    max-width: fit-content;
    padding: 10px;
    border: #A404F2 solid 3px;
}

    .characterz {
        max-width: 100%; /* Increased width for better layout */
        margin: auto;
        text-align: center;
        display: flex;
        flex-wrap: wrap; /* Allow wrapping on smaller screens */
        justify-content: center;
        gap: 20px; /* Space between character containers */
    }
    
    .character {
        text-align: center; /* Center the content inside each character container */
        width: 45%; /* Set a fixed width for uniform layout */
    }
    
    .character img {
        width: 100%; /* Make the image responsive */
        height: auto; /* Maintain aspect ratio */
    }
    
    .character p {
        text-align: center;
        margin: auto;
        margin-top: 4px; /* Add space between image and description */
        font-family: 'DotGothic16';
        font-size: 3vw; /* Adjust font size */
        color: white; /* Match with the overall theme */
        background-color: black; /* Optional background for readability */
        padding: 8px; /* Optional padding for text */
        max-width: fit-content;
        border: red solid 2px;
    }
    
    .namez {
        text-align: center;
        margin: auto;
        font-size: 5vw;
        font-family: 'DotGothic16';
        background-color: black; /* Optional background for readability */
        padding: 4px; /* Optional padding for text */
        max-width: fit-content;
    }
    
    .goback{
        max-width: 50%;
        margin: auto;
        text-align: center;
        img {
            width: 100%;
        }
    }
    .copyrightmessage {
        font-family: 'DotGothic16';
        font-size: 3vw;
        color: #A404F2;
        background-color: black;
        width: fit-content;
        margin: auto;
        text-align: center;
    }

    .deco {
        max-width: 100%;
        text-align: center;
        margin: auto;
    }

    .link {
        font-family: 'DotGothic16';
        font-size: 5vw;
        color: #A404F2;
        background-color: black;
        width: fit-content;
        margin: auto;
        text-align: center;
        margin-top: 5px;
    }
    
    
}