@charset "utf-8";
/* CSS Document */
/* 置中 "*"表全區 */
*{
   
    font-family: 'Open Sans', sans-serif;
}

html, body{
    margin:0;
    padding:0;
    background:#E7E7E7;
    scroll-behavior: smooth;
}
header{
    position: relative;
    top:0px;
    width:100%;
    height:10%;
    background:#E7E7E7;
    animation: rightIn 1s ease 0s 1;
}
@keyframes rightIn {
    from {
        opacity: 0;
        transform: translateX(100%); /* 從下方開始，將元素移至底部 */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* 達到頂部，元素停止移動 */
    }
}
.nameplace{
    text-decoration: none; /*將底線去除*/
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin:0px 5px;
    
}
.nameplace a{
    text-decoration: none;
    color: inherit;
}
.nameplace li{
    list-style: none;
}
.nameplace h5{
    color:#595757;
    text-align: left;
    font-weight: 300;
    font-size: 10px;
}
.nameplace h5:hover{
    font-weight: 800;
    font-size: 13px;
    transition: all 0.8s ease;
}
@keyframes fadeInFromBottom {
    from {
        opacity: 0;
        transform: translateY(50%); /* 從下方開始，將元素移至底部 */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* 達到頂部，元素停止移動 */
    }
}
/* nav */
nav{
    width:100%;
    height:50vh;
    display:flex;
    justify-content: left;
    align-items: center;
    background:url(../images/sleepcover.jpg) bottom no-repeat;/*在容器裡放圖片*/
    background-size: cover; /* 讓背景圖片自動調整大小以填滿元素 */
    background-position: center; /* 將背景圖片置中 */
    /* 可以添加其他樣式，如顏色、邊框等 */
    }
.tap{
    margin:10px;
    width:100%;
    animation: leftIn 1s ease 0s 1;
}
@keyframes leftIn {
    from {
        opacity: 0;
        transform: translateX(100%); /* 從下方開始，將元素移至底部 */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* 達到頂部，元素停止移動 */
    }
}
.tap a{
    color: #595757;
    text-decoration: none;
    text-align: left;
    font-weight: 300;
    font-size: 15px;
}
.tap a:hover{
    font-weight: 800;
    font-size: 18px;
    transition: all 1s ease;
}
@keyframes fadeInFromBottom {
    from {
        opacity: 0;
        transform: translateY(50%); /* 從下方開始，將元素移至底部 */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* 達到頂部，元素停止移動 */
    }
}
/*aside*/
aside{
    width:100%;
    height:50vh;
    display:flex;
    justify-content: left;
    align-items: center;
    background:url(../images/staycover.jpg) bottom no-repeat;/*在容器裡放圖片*/
    background-size: cover; /* 讓背景圖片自動調整大小以填滿元素 */
    background-position: center; /* 將背景圖片置中 */
    /* 可以添加其他樣式，如顏色、邊框等 */
    }
.tap{
    margin:10px;
    width:100%;
    animation: leftIn 1s ease 0s 1;
}
@keyframes leftIn {
    from {
        opacity: 0;
        transform: translateX(100%); /* 從下方開始，將元素移至底部 */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* 達到頂部，元素停止移動 */
    }
}
.tap a{
    color: #595757;
    text-decoration: none;
    text-align: left;
    font-weight: 300;
    font-size: 15px;
}
.tap a:hover{
    font-weight: 800;
    font-size: 18px;
    transition: all 1s ease;
}
@keyframes fadeInFromBottom {
    from {
        opacity: 0;
        transform: translateY(50%); /* 從下方開始，將元素移至底部 */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* 達到頂部，元素停止移動 */
    }
}
footer h4{
    color: #595757;
    text-decoration: none;
    text-align: center;
    font-weight: 300;
    font-size: 10px;
}
/* For tablets */
@media only screen and (min-width: 768px){
    .nameplace h5{
        font-size: 15px;
    }
    .nameplace h5:hover{
       font-size: 20px;
    }

    nav{
        height:80vh;
    }
    .tap a{
        font-size: 22px;
    }
    .tap a:hover{
        font-weight: 800;
        font-size: 26px;
        transition: all 1s ease;
    }
    aside{
        height:80vh;
    }
    footer h4{
        font-size: 15px;
    }
}