.stamp {
    --bg-color-fall: #f5e9bc;
    --char-color-fall: #d26a44;
    --wappen-color-fall: #442716;
    --bg-color-spring: #d6e9ca;
    --char-color-spring: #2b63cc;
    --wappen-color-spring: #526615;
}
.stamp {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 25px;
    left: 450px;
    box-sizing: border-box;
    border: 1px solid;
    border-radius: 9999px;
    padding: 0;
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.2);
}
.stamp-fall {
    border-color: var(--wappen-color-fall);
    background-color: var(--bg-color-fall);
}
.stamp-spring {
    border-color: var(--wappen-color-spring);
    background-color: var(--bg-color-spring);
}
.circle-text {
    position:relative;
    width: 100%;
    height: 100%;
    font-size: 12px;
    text-align: center;
    margin: 0;
    top: 0;
    left: 0;
    transform: rotate(296deg);
    transition: transform 0.2s linear;
}
.circle-text:hover {
    transform: rotate(350deg);
    transition: transform 0.2s linear;
}
.circle-text:hover + .circle-text:after:hover {
    transform: rotate(296deg);
    transition: transform 0.2s linear;
}
.circle-text:before {
    content: '';
    position: relative;
    width: 30px;
    height: 30px;
    display: block;
    border: none;
    border-radius: 9999px;
    top: calc(50% - 16px);
    margin: 0 auto;
    /*order: 1px solid #442716;*/
}
.circle-text-fall:before {
    background-color: transparent;
    border-color: var(--wappen-color-fall);
}
.circle-text-spring:before {
    background-color: transparent;
    border-color: var(--wappen-color-spring);
}
.circle-text:after {
    content: '';
    /*font-family: FontAwesome;
    font-size: 20px;*/
    line-height: 56px;
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0 auto;
    border:none;
    /*transform: rotate(48deg);*/
	background-image: url(../image/tweet_mark01.png);
	background-size: contain;
	transform: rotate(60deg);

}
.circle-text-fall:after {
    color:var(--bg-color-fall);
}
.circle-text-spring:after {
    color:var(--bg-color-spring);
}
.circle-text span {
    position: absolute;
    top: 0;
    left: calc(50% - 5px);
    display: inline-block;
    width: 10px;
    height: 30px;
    transform-origin: center bottom;
    font-family: 'SpecialElite', 'Bree Serif', serif;
    font-size: 10px;
    line-height: 17px;
    z-index: 100;
    font-weight: bold;
}
.circle-text-fall span {
    color: var(--char-color-fall);
}
.circle-text-spring span {
    color: var(--char-color-spring);
}
.stamp-spring.page-item:hover {
    background-color: #b7dc9f;
}
.stamp-fall.page-item:hover {
    background-color: #feeaa0;
}
.wakuchar {
    color: #f5e9bc;
}
.wakuchar:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 1;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: #d26a44;
    border-radius: 9999px;
    z-index: -1;
}
.circle-text span:nth-child(1)  { transform: rotate(0deg); }
.circle-text span:nth-child(2)  { transform: rotate(14deg); }
.circle-text span:nth-child(3)  { transform: rotate(28deg); }
.circle-text span:nth-child(4)  { transform: rotate(42deg); }
.circle-text span:nth-child(5)  { transform: rotate(56deg); }
.circle-text span:nth-child(6)  { transform: rotate(72deg); }
.circle-text span:nth-child(7)  { transform: rotate(86deg); }
.circle-text span:nth-child(8)  { transform: rotate(100deg); }
.circle-text span:nth-child(9)  { transform: rotate(114deg); }
.circle-text span:nth-child(10)  { transform: rotate(128deg); }
.circle-text span:nth-child(11)  { transform: rotate(142deg); }
.circle-text span:nth-child(12)  { transform: rotate(156deg); }
.circle-text span:nth-child(13)  { transform: rotate(172deg); }
.circle-text span:nth-child(14)  { transform: rotate(186deg); }
.circle-text span:nth-child(15)  { transform: rotate(200deg); }
.circle-text span:nth-child(16)  { transform: rotate(214deg); }
.circle-text span:nth-child(17)  { transform: rotate(228deg); }
.circle-text span:nth-child(18)  { transform: rotate(242deg); }
.circle-text span:nth-child(19)  { transform: rotate(256deg); }
.circle-text span:nth-child(20)  { transform: rotate(270deg); }
.circle-text span:nth-child(21)  { transform: rotate(286deg); }
.circle-text span:nth-child(22)  { transform: rotate(300deg); }
.circle-text span:nth-child(23)  { transform: rotate(314deg); }
.circle-text span:nth-child(24)  { transform: rotate(328deg); }
.circle-text span:nth-child(25)  { transform: rotate(342deg); }

@font-face {
	font-family: 'SpecialElite';
	src: url('./fonts/SpecialElite.ttf');
}