body{
    background-color: #C9171E;
}
h1,h2,p,.div-center{
    color:#F5D547;
    text-align: center;
}
.output{
    color:black;
}
.section {
    margin: 30px auto;
    max-width: 600px;
    width: 90%;
    display: block;

}
.rank {
    font-size: 1.6em;
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
    text-shadow: 0 0 6px rgba(201,162,39,0.6);
}
  
.container {
    background: #fff;
    padding: 40px 50px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    width: 90%;
    max-width: 500px;
    animation: fadeIn 0.6s ease-out;
}
.btn_share {
    background-color: #C9171E; /* 赤にして目立たせる */
    color: #FFFFFF; /* 白文字でコントラスト */
    border-color: #ffffff;
    width: 250px;
    height: 50px;
    border-radius: 25px; /* 丸みをつける */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn_back {
    background-color: #FFFFFF;
    color: #C9171E;
    border: 2px solid #C9171E;
    width: 250px;
    height: 50px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.btn_back:hover {
    background-color: #C9171E;
    color: #FFFFFF;
}

.btn{
    background-color:#FFFFFF;
    color:#C9171E;
    border:1px solid #C9171E;
    width: 250px;
    height: 50px;
}
@keyframes shake {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-10px); }
    50%  { transform: translateX(10px); }
    75%  { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}
  
.shake {
  animation: shake 0.4s infinite;
}
@media(max-width:799px){
    .section{
        width:auto;
    }
}