YaddyKai

 #fav-color .popup { 
        width: 75vw; 
    } 
    #fav-color #color-options .color-option { 
        width: 12vw; 
    } 
    #fav-color #update-theme-button { 
        padding: 6px 16px; border-width: 2px; 
    } 
    #fav-color #color-options .checkmark { 

YaddyKai

  #calendar {
        width: 100%;
        display: block;
        margin-top: 3.6vh;
    }
    #calendar #app_name_portrait {
        display: block;
        margin: 0;
        font-size: 3.5vh;
    }

YaddyKai

 body { 
        flex-direction : column; 
        
    }
    #current-day-info {
        width: 100%;
        min-height: initial;
        height: 12vh;
        padding: 1vw 0;
        display: flex;

YaddyKai

@media (orientation : portrait) { }

YaddyKai

#make-note #add-post-it {
    border: 3px solid #222;
}
#make-note #add-post-it:hover {
    color: white;
    background-color: #222;
}
#make-note #delete-button {
    border: 3px solid #D71C1F;
    background-color: #D71C1F;

YaddyKai

<div id="make-note" open>
      <div class="popup">
        <h4>Add a note to the calendar</h4>
        <textarea id="edit-post-it" class="font" name="post-it" autofocus></textarea>
        <div>
          <button class="button font post-it-button" id="add-post-it">Post It</button>
          <button class="button font post-it-button" id="delete-button">Delete It</button>
       </div>
      </div>
</div>

YaddyKai

.popup {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60vw;
    margin: 22vh auto 0;
    background-color: #FEFDFD;
    border-radius: 10px;
}

YaddyKai

dialog {
    height: 100%;
    width: 100%;
    border: none;
    padding: 0;
    background-color: rgba(29, 29, 29, 0.85); /*非純黑色的透明背景*/
    position: fixed;
    } 

YaddyKai

  <!-- 主題色彩對話方塊 -->
  <dialog id="modal" open> <!--open顯示；hidden隱藏-->
    <div id="fav-color"  open>  <!--把open改成hidden能關閉視窗-->
      <div class="popup">
        <h4 class="center">What's your favorite color?</h4>
        <div id="color-options">
          <div class="color-option">
            <div class="color-preview" id="blue" style="background-color: #1B19CD;">
                <i class="fas fa-check checkmark" ></i>
            </div>

YaddyKai

.background-text {
    position: absolute;
    opacity: 0.15;
    font-size: 20vw;
    z-index: -1;
    margin: 0;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
}