body {
    font-family: Georgia, "Times New Roman",
    Times, serif;
    color: #000000;
    background-color: #000000;
/*    width: 80vw;
    height: 78vh;*/
}

h1 {
    font-family: Helvetica, Geneva, Arial,
    SunSans-Regular, sans-serif;
    margin-top: 9%;
}

.main {
    margin: auto;
    margin-top: 8vh;
    border: 10px solid #000000;
    width: 80vw;
    height: 78vh;
    background-color: #1a7e1e;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.top {
/*    position: absolute;
    top: 15px;
    width: 255px;
    height: 100px;*/
    width: 24vw;
    height: 15vh;
    border: 5px solid #000000;
    text-align: center;
    background-color: chartreuse;
    font-size: 3.5vw;
    margin: auto;
}

.topper {
    margin-top: 3vh;
}

.topDay {
/*     left: 18px;*/
    font-size: 3vw;
}

.topDate {
/*     left: 280px;*/
    font-size: 2.5vw;
    width: 35vw;
    height: 15vh;
}

.topYear {
/*     left: 543px;*/
    font-size: 3vw;
    width: 16vw;
    height: 15vh;
}

.mid {
/*     position: absolute;
    width: 385px;
    top: 125px;
    height: 280px;*/
    width: 38vw;
    height: 40vh;
    border: 5px solid #000000;
    text-align: center;
    background-color: khaki;
}
.midSeason {
/*    left: 18px;*/
    width: 38vw;
    height: 40vh;
    font-size: 3vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
}

img {
/*    width: 383px;
    height: 173px;*/
    width: 32vw;
    height: 25vh;
}

.midPicture {
/*    width: 383px;
    height: 173px;*/
    margin-top: -10vh;
    width: 32vw;
    height: 25vh;
    border: 5px solid #000000;
}

.midTime {
/*    left: 413px;*/
    font-size: 7vw;
}

.timeCentr {
    margin-top: 15%;
}

.bot {
/*    position: absolute;
    width: 150px;
    height: 94px;*/
    width: 13vw;
    height: 12vh;
    border: 5px solid #000000;
    text-align: center;
    background-color: aqua;
    font-size: 1.2vw;
}

.botMorning {
/*    left: 18px;*/
}

.botToMorning {
/*    left: 175px;*/
    font-size: 1.2vw;
}

.botMidday {
/*    left: 332px;*/
}

.botEvening {
/*    left: 489px;*/
    font-size: 1.2vw;
}

.botNight {
/*    left: 647px;*/
}

.active {
    border: 5px solid white;
    background-color: chartreuse;
}

.botCentr {
    /*     margin-top: 20%;*/
}

.botPilCentr {
        margin-top: -0.5vh;
}

.seasonCentr {
    /*    margin-top: 5%;*/
    margin-top: -0.8vh;
}

.clock {
    font-size: 2em;
    padding-top: 5vw;
    font-family: Helvetica, Geneva, Arial,
    SunSans-Regular, sans-serif;
}