/* idセレクタは要素の後に"#~~"をつける*/
/* classセレクタに対しては.~~をつける*/
/*疑似クラス
要素；link リンク先をまだ見ていない状態のa要素
要素：visited　リンク先をすでに見た状態のa要素
要素:hover　カーソルが上にある状態の要素
要素:active　マウスのボタンなどが押されている場合の要素
*/

html{
    margin: 0;
    padding: 0;
    background-color: #042ea1;
    background: linear-gradient(to right,#ffffff,#62a0dadd);
    width: 100vw;
    height: auto;
    background-repeat: no-repeat;

}

header{
    top: 0;
}




#title{
    display: block;
    float: left;
    font-family: 'Times New Roman', Times, serif;
    font-size: 5vw;
    color: #ffffff;
    margin: 30px;
}

#garizarniImg{


    width: 100%;
   
    margin: 0;
}
article{
    clear: both;
    position: relative;
    width: 70vW;
    padding-left: 30px;
    overflow: scroll;
    text-overflow:ellipsis;
    height: 100vh;
}

p{
    font-size:1vw;
    font-family: serif;
    margin: 0;
    width:100%;
    white-space: pre-wrap;
    padding: 0;
}
pre{
    width: auto;
}

aside{
    clear: both;
    margin: 0;
    margin-top: 20px;
    position: relative;
    width: 25vw;
    align-content: center;

}
.contents{

    clear: both;
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 0;
    width: 100%;
}
li{
    list-style: none;
}
ul{
    clear: both;
    color: #ffffff;
    font-family: 'Times New Roman', Times, serif;
    font-size: 2vw;
    display: block;
    margin: 20px;
    float: left;
    text-align: center;
    padding: 0;
}
ul:hover{
    background-color: #ffffff1c;
    border-radius: 10px;
}


ul :visited{
    color: #ffffff;
}

footer{
    clear: both;
    background: #000000;
    text-align: center;
    padding: 20px,0;
    border-color:#000000;
    width: 100%;
    height: 50px;
    
}
footer p{
    clear: both;
    color: #ffffff;
    border: #000000;
    
    
}