* {
    box-sizing: border-box;
}

html, body {
    width: 4128px;
    height: 1806px;
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
}

#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*text-align: center;*/
    color: #2c3e50;
    width: 100%;
    height: 100%;
    position: relative;
    background: url("./bg.jpeg") center center #121947 no-repeat;
    background-size: 100% 100%;
}

.pi-left1, .pi-left2, .pi-left3, .pi-left4, .pi-left5, .pi-left6, .pi-left7, .pi-left8,
.pi-m1, .pi-m2, .pi-m3,
.pi-r1, .pi-r2, .pi-r3 {
    /*background-color: #fff;*/
    position: absolute;
    color: #fff;
    background-color: #121947;
    opacity: 0.8;
}

.pi-left1, .pi-left2, .pi-r1 {
    top: 165px;
}

.pi-left7, .pi-left8, .pi-m2, .pi-m3, .pi-r2, .pi-r3 {
    top: 1325px;
    height: 433px;
}

.pi-r1, .pi-r2, .pi-r3 {
    width: 898px;
    right: 50px;
}


.pi-r1 {
    height: 622px;
}

.pi-r2 {
    top: 812px;
    height: 488px;
}

/* m */
.pi-m1, .pi-m2 {
    /*left: 1125px;*/
    left: 1172px;
}


.pi-m1 {
    top: 277px;
    /*width: 2030px;*/
    width: 1983px;
    height: 1022px;
}

.pi-m2, .pi-m3 {
    /*width: 1002px;*/
    width: 978px;
}

.pi-m3 {
    /*left: 2152px;*/
    left: 2175px;
}

/* left */
.pi-left1, .pi-left2, .pi-left3, .pi-left4, .pi-left5, .pi-left6, .pi-left7, .pi-left8 {
    width: 537px;
}

.pi-left1, .pi-left3, .pi-left5, .pi-left7 {
    left: 50px;
}

.pi-left2, .pi-left4, .pi-left6, .pi-left8 {
    left: 608px;
}

.pi-left1, .pi-left2 {
    height: 255px;
}

.pi-left3, .pi-left4 {
    top: 455px;
    height: 335px;
}

.pi-left5, .pi-left6 {
    top: 815px;
    height: 484px;
}

/*----------*/
.pi-title {
    position: absolute;
    top: 110px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 72px;
    color: #fff;
    font-weight: bold;
    letter-spacing: 16px;
}

.weather {
    position: absolute;
    width: 900px;
    top: 60px;
    right: 50px;
    color: #fff;
    text-align: right;
    font-size: 22px;
    letter-spacing: 2px;
}

.weather span {
    font-size: 0.85em;
    color: #00B4FF;
    margin-right: 20px;
}