#tuuti{
    border-radius: 30px;
    position: absolute;
    width: 85%;
    height: 5%;
    left: 7.5%;
    top: 23%;
    background-color: white;

}
.todayzikan{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 30%;
}
.usernametext{
    position: absolute;
    text-align: center;
    color: white;
    font-family: Mplus1-Medium;
    font-size: 6vw;
    top: 16%;
    left: 50%;
    width: 80%;
    transform: translate(-50%,0);
}
.todaydate{
    width: 60%;
    height: 10%;
    position: absolute;
    font-family: Mplus1-Medium;
    color: white;
    left: 52%;
    top: 31%;
    transform: translate(-50%,0);
    font-size: 6vw;
    z-index: 1;
}


#leftarrow {
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 2px #FFFFFF;
  border-right: solid 2px #FFFFFF;
  position: absolute;
    transform: rotate(-135deg);
  left: 7%;
  top: 33%;
    z-index: 1;
}
#rightarrow {
    content: '';
    width: 10px;
    height: 10px;
    border-top: solid 2px #FFFFFF;
    border-right: solid 2px #FFFFFF;
    position: absolute;
    transform: rotate(45deg);
    right: 7%;
    top: 33%;
    z-index: 1;
}

#leftarrow.cant {
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 2px #1b451c;
  border-right: solid 2px #1b451c;
  position: absolute;
    transform: rotate(-135deg);
  left: 7%;
  top: 33%;
    z-index: 1;
}
#rightarrow.cant {
    content: '';
    width: 10px;
    height: 10px;
    border-top: solid 2px #1b451c;
    border-right: solid 2px #1b451c;
    position: absolute;
    transform: rotate(45deg);
    right: 7%;
    top: 33%;
    z-index: 1;
}


#nowyear{
    text-align: center;
    color: white;
    font-family: Mplus1-Medium;
    font-size: 4vw;
}
#nowdate{
    text-align: center;
    color: white;
    font-family: Mplus1-Medium;
    font-size: 6vw;
}
#nowtime{
    text-align: center;
    color: white;
    font-family: Mplus1-Medium;
    font-size: 5vw;
}

#today1{
    width: 90%;
    height: 10%;
    left: 5%;
    background-color: #555555;
    opacity: 40%;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: absolute;
    top: 10%;
}
#today2{
    width: 90%;
    height: 10%;
    left: 5%;
    background-color: #555555;
    opacity: 40%;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: absolute;
    top: 25%;
}
#today3{
    width: 90%;
    height: 10%;
    left: 5%;
    background-color: #555555;
    opacity: 40%;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: absolute;
    top: 40%;
}
#today4{
    width: 90%;
    height: 10%;
    left: 5%;
    background-color: #555555;
    opacity: 40%;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: absolute;
    top: 55%;
}
#today5{
    width: 90%;
    height: 10%;
    left: 5%;
    background-color: #555555;
    opacity: 40%;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: absolute;
    top: 70%;
}
#todayyotei{
    width: 90%;
    height: 8%;
    left: 5%;
    background-color: #555555;
    opacity: 40%;
    border-radius: 10px;
    position: absolute;
    top: 85%;
}

.today1text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: black;
    font-family: "Mplus1-Medium";
}
.today2text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: black;
    font-family: "Mplus1-Medium";
}
.today3text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: black;
    font-family: "Mplus1-Medium";
}
.today4text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: black;
    font-family: "Mplus1-Medium";
}
.today5text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: black;
    font-family: "Mplus1-Medium";
}



#today1.get{
    width: 90%;
    height: 10%;
    left: 5%;
    background-color: #FFFFFF;
    opacity: 100%;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: absolute;
    top: 10%;
}
#today2.get{
    width: 90%;
    height: 10%;
    left: 5%;
    background-color: #FFFFFF;
    opacity: 100%;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: absolute;
    top: 25%;
}
#today3.get{
    width: 90%;
    height: 10%;
    left: 5%;
    background-color: #FFFFFF;
    opacity: 100%;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: absolute;
    top: 40%;
}
#today4.get{
    width: 90%;
    height: 10%;
    left: 5%;
    background-color: #FFFFFF;
    opacity: 100%;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: absolute;
    top: 55%;
}
#today5.get{
    width: 90%;
    height: 10%;
    left: 5%;
    background-color: #FFFFFF;
    opacity: 100%;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: absolute;
    top: 70%;
}
#todayyotei.get{
    width: 90%;
    height: 10%;
    left: 5%;
    background-color: #FFFFFF;
    opacity: 100%;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: absolute;
    top: 85%;
}

#to_ah{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: 40%;
    transform: translate(0,-50%);
    aspect-ratio: 1/1;
    width: 1%;
    color: white;
}
#to_ah1{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: -3%;
    transform: translateY(-50%);
    aspect-ratio: 1/1;
    width: 10%;
    display: inline-block;
    font-size: 2vh;
    background-color: #555555;
    border-radius: 1000px;
    color: white;
}
#to_ah2{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20%;
    height: 60%;
    font-size: 1.25vh;
    font-family: "Mplus1-Regular";
    color: white;
}

#to_bh{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: 40%;
    transform: translate(0,-50%);
    aspect-ratio: 1/1;
    width: 1%;
    color: white;
}
#to_bh1{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: -3%;
    transform: translateY(-50%);
    aspect-ratio: 1/1;
    width: 10%;
    display: inline-block;
    font-size: 2vh;
    background-color: #555555;
    border-radius: 1000px;
    color: white;
}
#to_bh2{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20%;
    height: 60%;
    font-size: 1.25vh;
    font-family: "Mplus1-Regular";
    color: white;
}

#to_ch{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: 40%;
    transform: translate(0,-50%);
    aspect-ratio: 1/1;
    width: 1%;
    color: white;
}
#to_ch1{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: -3%;
    transform: translateY(-50%);
    aspect-ratio: 1/1;
    width: 10%;
    display: inline-block;
    font-size: 2vh;
    background-color: #555555;
    border-radius: 1000px;
    color: white;
}
#to_ch2{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20%;
    height: 60%;
    font-size: 1.25vh;
    font-family: "Mplus1-Regular";
    color: white;
}

#to_dh{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: 40%;
    transform: translate(0,-50%);
    aspect-ratio: 1/1;
    width: 1%;
    color: white;
}
#to_dh1{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: -3%;
    transform: translateY(-50%);
    aspect-ratio: 1/1;
    width: 10%;
    display: inline-block;
    font-size: 2vh;
    background-color: #555555;
    border-radius: 1000px;
    color: white;
}
#to_dh2{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20%;
    height: 60%;
    font-size: 1.25vh;
    font-family: "Mplus1-Regular";
    color: white;
}

#to_eh{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: 40%;
    transform: translate(0,-50%);
    aspect-ratio: 1/1;
    width: 1%;
    color: white;
}
#to_eh1{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: -3%;
    transform: translateY(-50%);
    aspect-ratio: 1/1;
    width: 10%;
    display: inline-block;
    font-size: 2vh;
    background-color: #555555;
    border-radius: 1000px;
    color: white;
}
#to_eh2{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20%;
    height: 60%;
    font-size: 1.25vh;
    font-family: "Mplus1-Regular";
    color: white;
}

#to_ah.get{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1Code-Bold";
    top: 50%;
    left: 40%;
    transform: translate(0,-50%);
    aspect-ratio: 1/1;
    width: 1%;
    color: #226f22;
}
#to_ah1.get{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: -3%;
    transform: translateY(-50%);
    aspect-ratio: 1/1;
    width: 10%;
    display: inline-block;
    font-size: 2vh;
    background-color: #FFFFFF;
    border-radius: 1000px;
    color: white;
}
#to_ah2.get{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20%;
    height: 60%;
    font-size: 1.25vh;
    font-family: "Mplus1-Regular";
    color: #226f22;
}

#to_bh.get{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: 40%;
    transform: translate(0,-50%);
    aspect-ratio: 1/1;
    width: 1%;
    color: #226f22;
}
#to_bh1.get{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: -3%;
    transform: translateY(-50%);
    aspect-ratio: 1/1;
    width: 10%;
    display: inline-block;
    font-size: 2vh;
    background-color: #FFFFFF;
    border-radius: 1000px;
    color: white;
}
#to_bh2.get{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20%;
    height: 60%;
    font-size: 1.25vh;
    font-family: "Mplus1-Regular";
    color: #226f22;
}

#to_ch.get{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: 40%;
    transform: translate(0,-50%);
    aspect-ratio: 1/1;
    width: 1%;
    color: #226f22;
}
#to_ch1.get{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: -3%;
    transform: translateY(-50%);
    aspect-ratio: 1/1;
    width: 10%;
    display: inline-block;
    font-size: 2vh;
    background-color: #FFFFFF;
    border-radius: 1000px;
    color: white;
}
#to_ch2.get{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20%;
    height: 60%;
    font-size: 1.25vh;
    font-family: "Mplus1-Regular";
    color: #226f22;
}

#to_dh.get{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: 40%;
    transform: translate(0,-50%);
    aspect-ratio: 1/1;
    width: 1%;
    color: #226f22;
}
#to_dh1.get{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: -3%;
    transform: translateY(-50%);
    aspect-ratio: 1/1;
    width: 10%;
    display: inline-block;
    font-size: 2vh;
    background-color: #FFFFFF;
    border-radius: 1000px;
    color: white;
}
#to_dh2.get{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20%;
    height: 60%;
    font-size: 1.25vh;
    font-family: "Mplus1-Regular";
    color: #226f22;
}

#to_eh.get{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: 40%;
    transform: translate(0,-50%);
    aspect-ratio: 1/1;
    width: 1%;
    color: #226f22;
}
#to_eh1.get{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-family: "Mplus1-Regular";
    top: 50%;
    left: -3%;
    transform: translateY(-50%);
    aspect-ratio: 1/1;
    width: 10%;
    display: inline-block;
    font-size: 2vh;
    background-color: #FFFFFF;
    border-radius: 1000px;
    color: white;
}
#to_eh2.get{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20%;
    height: 60%;
    font-size: 1.25vh;
    font-family: "Mplus1-Regular";
    color: #226f22;
}

@media screen and (min-width: 500px){
    #nowyear{
    text-align: center;
    color: white;
    font-family: Mplus1-Medium;
    font-size: 20px;
}
    #nowdate{
    text-align: center;
    color: white;
    font-family: Mplus1-Medium;
    font-size: 30px;
}
    #nowtime{
    text-align: center;
    color: white;
    font-family: Mplus1-Medium;
    font-size: 25px;
}
    .todaydate{
    width: 300px;
    height: 1%;
    position: absolute;
    font-family: Mplus1-Medium;
    color: white;
    left: 50%;
    top: 31%;
    transform: translate(-50%,0);
    font-size: 30px;
    z-index: 1;
}
    .usernametext{
    position: absolute;
    text-align: center;
    color: white;
    font-family: Mplus1-Medium;
    font-size: 36px;
    top: 16%;
    left: 50%;
    width: 80%;
    transform: translate(-50%,0);
}
}

@media screen and (min-width: 900px) {
    .usernametext {
        position: absolute;
        text-align: center;
        color: white;
        font-family: Mplus1-Medium;
        font-size: 40px;
        top: 15%;
        left: 50%;
        width: 80%;
        transform: translate(-50%, 0);
    }
}