Scripts/resources/[hp]/hp_subway/ui/styles.css

*,*:focus, *:hover{
    outline:none;
}

body {
    margin: 0;
    overflow: hidden;
    padding: 0;
    font-family: Akrobat, sans-serif;
}

.metroPanel {
    position: absolute;
    background-size: 100%;
    background-position: center;
    background: radial-gradient(rgb(16 49 49 / 81%), rgb(12 25 43));
    width: 100%;
    height: 100%;
}

.map {
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 25%;
    margin-top: 3%;
    display: flex;
    max-height: 100%;
}

.optionsPanel {
    float: right;
    z-index: 10;
    position: relative;
    margin: auto;
    display: flow-root;
    overflow: auto;
    height: 100%;
    max-height: 100%;
    padding-right: 9%;
}

.titleOptions {
    font-family: "Akrobat Black", sans-serif;
    font-size: 32px;
    color: white;
    text-align: center;
    line-height: 0px;
    margin-top: 15%;
    margin-bottom: 25px;
}

.subTitle {
    font-family: "Akrobat Light", sans-serif;
    font-size: 15px;
    text-align: center;
    color: grey;
}

#currentStation {
    font-family: "Akrobat Black", sans-serif;
    color: white;
    text-shadow: 0px 0px 15px #949494;
    font-size: 20px;
    text-align: center;
    line-height: 0px;
}

#currentPrice {
    font-family: "Akrobat Black", sans-serif;
    color: rgb(87, 207, 87);
    font-size: 20px;
    text-shadow: 0px 0px 13px #176317;
    text-align: center;
    line-height: 0px;
}

.stationButtons {
    display: grid;
    grid-template-columns: repeat(2, 225px);
}

.stationBtn {
    background: #9c9c9c2e;
    display: flow-root;
    padding-left: 17px;
    height: 71px;
    margin-left: 20px;
    margin: 0px;
    border-radius: 6px;
    width: 200px;
    line-height: 0px;
    padding-top: 9%;
    margin-top: 10px;
}

.stationBtn:hover {
    background: #c9c9c92e;
}

.stationBtn:active {
    background: #d8d8d82e;
}

.stationBtn, .buyButton {
    cursor: pointer;
    transition: 0.2s;
}

.stationBtnName {
    margin-left: 20px;
    margin-block-end: 5px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-block-start: revert;
    color: white;
    font-family: 'Akrobat Black', sans-serif;
}

.buyButton {
    transform: skew(0deg, -8deg);
    background: orange;
    box-shadow: 0px 0px 55px #ffa50054;
    margin-left: auto;
    margin-right: auto;
    width: 225px;
    justify-content: center;
    border-radius: 13px;
    height: 5%;
    padding-top: 1%;
    margin-top: 40px;
    padding-bottom: 2%;
    display: flex;
    align-items: center;
}

.buyButton:hover {
    background: #ffb120;
    box-shadow: 0px 0px 85px #ffb1208c;

}

.buyButton:active {
    background: #ffc04b;
    box-shadow: 0px 0px 55px #ffc04b54;

}

.buyText {
    font-family: 'Akrobat Light', sans-serif;
    font-size: 25px;
    color: white;
    text-align: center;
}

.stationBtnPrice {
    margin-bottom: 0px;
    font-family: 'Akrobat', sans-serif;
    color: rgb(177 177 177);
}

.priceBtn {
    margin-bottom: 0px;
    color: #218c4c;
    margin-left: 3px;
}

.ticketIcon {
    margin-top: 5px;
    color: white;
    font-size: 41px;
    display: inline-flex;
    position: absolute;
}

.ticketDescription {
    margin-left: 58px;
}

.oneLine {display: inline-flex;}

.timerPanel {
    position: absolute;
    background-size: 100%;
    background-position: center;
    width: 100%;
    height: 100%;
}

.banner {
    padding-top: 24%;
}

.timerLabel {
    font-family: 'Akrobat Light', sans-serif;
    color: white;
    font-size: 25px;
    text-align: center;
    line-height: 2px;
}

#timer {
    color: white;
    text-align: center;
    text-shadow: 0px 0px 25px rgba(255, 255, 255, 0.473);
    font-size: 37px;
    font-family: "Akrobat Black", sans-serif;
}