* {
    margin: 0;
    padding: 0; 
}
img.headPose {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 20px;
}
html, body {
    height: 100%;
}
header {
    width: 100%;
    height: 20%;
}
main {
    display: grid;
    gap: 10%;   
    width: 100%;
    align-items: flex-start;
}
#container {
    /*保证footer是相对于container位置绝对定位*/
    position:relative;  
    width:100%;
    min-height:100%; 
    /*设置padding-bottom值大于等于footer的height值，以保证main的内容能够全部显示出来而不被footer遮盖；*/  
    padding-bottom: 100px;  
    box-sizing: border-box;
}
p {
    word-break: break-all;    /* 强制任意位置断词 */
  }
p.center {
    text-align: center;
}
p.application_title {
    background-color: rgba(10, 78, 78, 0.557);
    text-align: center;
    color: white;
    font-size: 50px;
}

#colorfulText {
    transition: color 0.5s; /* 颜色变换有过渡效果 */
    font-weight: bold;
}
div.row {
    display: flex;
    flex-direction: row;
}
fieldset {
    background-color: #fffff0aa;
    margin-top: 5px;
    margin-bottom: 5px;
}

legend {
    background-color: #05b4d79d;
}

div.inputC {
    margin-bottom: 10px;
}

div#outsideContainer {
    display: flex;
    flex-direction: column;
    width: 150px;
    height: 500px;
    padding: 5% 10px 4% 4%;
    
}
div.playerArea {
    float: left;
}
div.oCitem {
    flex: 1 3 auto;
    border: black solid 1px;
    margin-top: 5px;
}
aside#videoAside {
    float:inline-end;
    background-color: #05b4d79d;
    padding-top: 4%;
    padding-right: 1%;
}
p#tipRe {
    display: inline;
    margin: 3%;
}
div.otherRecommendVideo {
    flex: 0.13 0.1 auto;
    width:10%;
    height:20%;
}
.logo_show {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media (max-width: 600px) {
    div.otherRecommendVideo {
        visibility: hidden;
    }
}

@media (max-width: 320px) {
    .logo_show {
        visibility: hidden;
    }
    .keyboard {
        visibility: hidden;
    }
}


@media screen and (orientation: landscape) {
    main {grid-template-columns: repeat(2, 1fr);}
    .logo_container {
        width: 50%;
    }
    .logo_img {
        width: 100%;
        height: 100%;
    }
}
@media screen and (orientation: portrait) {
    main {grid-template-rows: 2fr minmax(20vh, 1fr);}
    .keyborad {grid-row-start: 1;}
    .logo_container {height: 50%;}
    .logo_img {width: 100%;}
}