body { width: 980px ; background-image: url('/buttonpage/background.png') ; height: 100% ; background-repeat: no-repeat ; background-position: top left ; background-size: cover }

p {font-family: BunnyCartoon , sans-serif}

.train {width: 450px ; position: absolute ; top: 15px ; right: 0px ; z-index: -1}

.chatbox {width: 400px; position: absolute ; top: -10px ; right: 70px}

.wagon {position: relative ; width: 1100px ; height: 320px ; top: 75px ; right: 420px ; order: 1}

.wagonpic {position: absolute ; width: 1100px ; height: 320px ; top: 0px ; right: 0px }

.tabf5button {position: absolute ; right: 50px ;top: 50px ; width: 150px ; transition: transform 0.5s ease}
.tabf5button:hover {transform: rotate(10deg)}
.tabf5desc {position: fixed ; top: 10px ; left: 320px ; width: 200px ; display: none}
.tabf5:hover .tabf5desc {display: block}
.tabf5 {position: absolute ; top: 0px ; right: 0px}

.twelvemenbutton {position: absolute ; right: 50px ;top: 110px ; width: 150px ; transition: transform 0.5s ease}
.twelvemenbutton:hover {transform: rotate(10deg)}
.twelvemendesc {position: fixed ; top: 10px ; left: 320px ; width: 200px ; display: none}
.twelvemen:hover .twelvemendesc {display: block}
.twelvemen {position: absolute ; top: 0px ; right: 0px}

.melonlandbutton {position: absolute ; right: 50px ;top: 170px ; width: 150px ; transition: transform 0.5s ease}
.melonlandbutton:hover {transform: rotate(10deg)}
.melonlanddesc {position: fixed ; top: 10px ; left: 320px ; width: 200px ; display: none}
.melonland:hover .melonlanddesc {display: block}
.melonland {position: absolute ; top: 0px ; right: 0px}

.oopsiebutton {position: absolute ; right: 210px ;top: 50px ; width: 150px ; transition: transform 0.5s ease}
.oopsiebutton:hover {transform: rotate(10deg)}
.oopsiedesc {position: fixed ; top: 10px ; left: 320px ; width: 200px ; display: none}
.oopsiedoodle:hover .oopsiedesc {display: block}
.oopsiedoodle {position: absolute ; top: 0px ; right: 0px}

.ranfrenbutton {position: absolute ; right: 210px ;top: 110px ; width: 150px ; transition: transform 0.5s ease}
.ranfrenbutton:hover {transform: rotate(10deg)}
.ranfren {position: absolute ; top: 0px ; right: 0px}

.bohiebearbutton {position: absolute ; right: 210px ;top: 170px ; width: 150px ; transition: transform 0.5s ease}
.bohiebearbutton:hover {transform: rotate(10deg)}
.bohiebear {position: absolute ; top: 0px ; right: 0px}

.avqbutton {position: absolute ; right: 370px ;top: 50px ; width: 150px ; transition: transform 0.5s ease}
.avqbutton:hover {transform: rotate(10deg)}
.avq {position: absolute ; top: 0px ; right: 0px}

.nexosdenbutton {position: absolute ; right: 370px ;top: 110px ; width: 150px ; transition: transform 0.5s ease}
.nexosdenbutton:hover {transform: rotate(10deg)}
.nexosden {position: absolute ; top: 0px ; right: 0px}

.sephlowbutton {position: absolute ; right: 370px ;top: 170px ; width: 150px ; transition: transform 0.5s ease}
.sephlowbutton:hover {transform: rotate(10deg)}
.sephlow {position: absolute ; top: 0px ; right: 0px}

.vermi1ionbutton {position: absolute ; right: 530px ;top: 50px ; width: 150px ; transition: transform 0.5s ease}
.vermi1ionbutton:hover {transform: rotate(10deg)}
.vermi1ion {position: absolute ; top: 0px ; right: 0px}

.yogomagpiebutton {position: absolute ; right: 530px ;top: 110px ; width: 150px ; transition: transform 0.5s ease}
.yogomagpiebutton:hover {transform: rotate(10deg)}
.yogomagpie {position: absolute ; top: 0px ; right: 0px}

.hellmouthbutton {position: absolute ; right: 530px ;top: 170px ; width: 150px ; transition: transform 0.5s ease}
.hellmouthbutton:hover {transform: rotate(10deg)}
.hellmouth {position: absolute ; top: 0px ; right: 0px}

.melancholybutton {position: absolute ; right: 690px ;top: 50px ; width: 150px ; transition: transform 0.5s ease}
.melancholybutton:hover {transform: rotate(10deg)}
.melancholy {position: absolute ; top: 0px ; right: 0px}

.garfriendbutton {position: absolute ; right: 690px ;top: 110px ; width: 150px ; transition: transform 0.5s ease}
.garfriendbutton:hover {transform: rotate(10deg)}
.garfriend {position: absolute ; top: 0px ; right: 0px}

.wholetrain {display: flex ; flex-direction: row-reverse ; width: 980px ; height: 420px ; overflow-x: auto ; overflow-y: hidden ; position: absolute ; top: 70px ; left: 0px}

.trainhead {position: relative ; top: 0px ; right: 0px}

.title {position: absolute ; top: 10px; left: 10px ; width: 300px}

.speech2 {position: absolute ; top: 30px ; right: 120px ; font-family: BunnyCartoon , sans-serif ; font-size: 12px ; color: #A1000A ; width: 120px ; text-align: center}

.speech1 {position: absolute ; top: 40px ; right: 270px ; font-family: BunnyCartoon , sans-serif ; font-size: 17px ; color: #A1000A ; width: 180px ; text-align: center}

.mystuff {width: 120px ; height: 110px ; overflow-x: hidden ; overflow-y: scroll; z-index: 1 ; position: absolute; right: 150px ; top: 150px ; display: flex ; flex-direction: column ; font-size: 10px ; color: #FCEBD0}

h2 {font-size: 13px ; margin: 0 0 0 0 ; font-family: Starborn , sans-serif}

.mybutton {width: 120px ; transition: transform 0.5s ease ; image-rendering: pixelated}
.mybutton:hover {transform: scale(1.1)}
.printemps {width: 120px ; transition: transform 0.5s ease}
.printemps:hover {transform: scale(1.1)}
.dokvo17 {width: 120px ; transition: transform 0.5s ease}
.dokvo17:hover {transform: scale(1.1)}
.eccentric {width: 120px ; transition: transform 0.5s ease}
.eccentric:hover {transform: scale(1.1)}
.neocities {width: 120px ; transition: transform 0.5s ease}
.neocities:hover {transform: scale(1.1)}
.telegram {color: #FCEBD0 ; margin: 3 3 3 3}
h1 {margin: 5 5 5 5 ; color: #FCEBD0 ; font-family: Starborn , sans-serif}

@font-face {
    font-family: 'Starborn';
    src: url('starborn.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BunnyCartoon';
    src: url('BunnyCartoon.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}