#logo{
    margin-top: 9vh;
    height: 30vh;
}

.logo{
    height: 20vh;
    visibility: hidden;
    opacity: 0;
}

.ply{
    width: 90%;
    margin: auto;
	padding-top: 6vh;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.5em;
	text-align: justify;
}

#intro{
    width: 70%;
    margin: auto;
}

#intro p{
    margin-top: 1em;
}

#intro ul{
    padding-top: 1em;
}

#intro li{
	list-style-type: none;
    margin-left: 5vw;
}
#portrait{
	text-align: center;
	margin-top: 3em;
	margin-bottom: 3em;
}
#portrait>img{
    max-height: 90vh;
	width: auto;
    width: 100%;
}

/*responsive*/
@media screen and (max-width: 960px) {
    .ply{
        font-size: 1.4em;
    }
}
@media screen and (max-width: 810px) {
    .ply{
        font-size: 1.2em;
    }
}
@media screen and (max-width: 660px) {
    #logo{
        margin-top: 9vh;
        height: 20vh;
    }
    .logo{
        height: 15vh;
        visibility: hidden;
        opacity: 0;
    }
    #main{
        display: block;
        padding-bottom: 20px;
        text-align: center;
        margin-left: 0vw;
    }
    #intro{
        width: 80%;
    }
}
@media screen and (max-width: 560px) {
    .ply{
        font-size: 1.1em;
        width: 85%;
    }
}
@media screen and (max-width: 460px) {
    .logo{
        height: 14vh;
    }
    .ply{
        font-size: 1em;
        padding-top: 4vh;
    }
    #intro{
        width: 75%;
    }
}
@media screen and (max-width: 410px) {
    .logo{
        height: 14vh;
    }
    .ply{
        font-size: 1em;
        padding-top: 3vh;
        text-align: left;
    }
    #intro{
        width: 75%;
    }
}