@charset "UTF-8";

header{
    position: sticky; top: 0%; width: 100%;
    background-color: rgb(135, 46, 223);
}
body{
    font-size: 15pt;
    font-family: serif;
	color: white;
	line-break: strict;
    background-image: url(images/background.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    scrollbar-base-color: black;
    scrollbar-arrow-color: red;
    margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-repeat: no-repeat;
    letter-spacing: 0em;
}

div[class="blog"]{
    width: 800px;
    height: 100px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
margin-bottom: 30px;
    text-align: center;
    background-image: url(images/background.blackscreen.png);
    border: 30px solid;
    border-image-width: 30px;
    border-image-source: url(images/frame.png);
    border-image-slice: 300;
    border-image-repeat: stretch;
    border-image-outset: 10px;
}

div[class="contents"]{
width: 95%;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
background-image: url(images/background.blackscreen.png);
display: flex;
}

div[class="article"]{
margin-top: 20px;
margin-bottom: 20px;
width: 50%;
margin-left: 10%;
}

div[class="side"]{
width: 20%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
}

div[class="date"]{
background-image: url(images/background-side.png);
background-size: 500px;
background-repeat: repeat-y;border-width: 2px;
border-style: solid;
border-color: rgb(33, 222, 159);
text-align: center;
justify-items: center;
justify-content: center;
margin-bottom: 20px;
}

div[class="tag"]{
background-image: url(images/background-side.png);
background-size: 500px;
background-repeat: repeat-y;border-width: 2px;
border-style: solid;
border-color: rgb(33, 222, 159);
text-align: center;
justify-items: center;
justify-content: center;
}

a,a:visited{
color: white;
}

div[class="copyright"]{
    text-align: center;
}