@import url('https://fonts.googleapis.com/css2?family=Merriweather&family=Noto+Sans+TC:wght@100&display=swap');

@keyframes fadein {
	0% {
		opacity: 0;
		transform: scale(0.7);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes fadeinright {
	0% {
		opacity: 0;
		transform: translateX(20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

* {
    margin: 0;
    font-family: 'Merriweather', serif;
    font-family: 'Noto Sans TC', sans-serif;
}
body{
    background-color: rgb(46, 42, 49);
    color: rgba(255, 255, 255, 0.699);
}

.title, .content{
    padding: 20px;
}

.title{
    height: 100%;
    top: 0;
    left: 0;
    width: 40%;
    position: fixed;
    text-align: center;
    animation: fadein 1.5s ease-out 0s 1 normal forwards;
}

.title img{
    margin-top: 200px;
    width: 150px;
    padding: 20px;
}

.subtitle{
    margin: 10px;
}

.description{
    padding-top: 7px;
    color: rgb(133, 133, 133);
}

.content{
    float: right;
    width: 60%;
}

.content ul{
    list-style: none;
}

.content li{
    padding: 25px;
    border-bottom-style: solid;
    border-width: 1px;
    border-color: rgb(80, 80, 80);
    background: linear-gradient(to right, rgb(68, 68, 68) 50%, rgba(255, 255, 255, 0) 50%);
    background-size: 200% 100%;
    background-position: right;
    transition: all 0.5s ease-out;
    animation: fadeinright 1.5s ease-out 0s 1 normal forwards;
}

.content a{
    color: rgba(255, 255, 255, 0.699);
    text-decoration: none;
}

.content a:hover{
    color: red;
}

.content li:hover{
    background-position: left;
}

@media (max-width:600px){
    body{
        display: flex;
        flex-direction: column;
    }

    .title{
        position: relative;
        width: auto;
        height: auto;
        top: auto;
        left: auto;
        flex: 2;
    }

    .title img{
        margin-top: 0px;
    }
    .content{
        width: auto;
        flex: 1;
        margin-right: 50px;
    }
}