* {
	box-sizing: border-box;
}

body {
	font-family: Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: rgb(76 29 149);
        color: rgb(255 255 255);
    }
}

.footer {
	background-color: rgb(139, 92, 246);
	text-align: center;
	color: rgb(255, 255, 255);
}

.ContentBox {
	background: linear-gradient(to right bottom, rgb(139, 92, 246),
		rgb(236, 72, 153));
	color: rgb(255, 255, 255);
}

.footer, .ContentBox, .PostContentBox {
	border-radius: 8px;
	font-family: Roboto, sans-serif;
	padding: 12px;
	margin: 3px;
}

.PostContentBox {
    border: 1px solid rgba(0,0,0,0.1);
}

img, figure {
    border-radius: 8px;
}

.wp-block-media-text__media {
    margin: 3px;
    padding: 3px;
}

.wp-block-media-text>.wp-block-media-text__content {
    width: 100%;
    height: 100%;
    padding: 0px;
}

.footer a {
	text-decoration: none;
	color: rgb(255, 255, 255);
}

.footer p {
	margin-block-start: 4px;
	margin-block-end: 4px;
	margin-top: 4px;
	margin-bottom: 4px;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
}

.footer .btn {
	height: 35px;
	width: 35px;
}

.footer svg {
	height: 25px;
	width: 25px;
}

.btn, button {
	background-color: rgb(255, 255, 255);
	color: rgb(31, 41, 55);

	border-radius: .5rem;
	margin: .25rem;
	padding: .5rem;
	transition: all .3s ease-in-out;
	text-decoration: none;
}

.btn:hover {
	color: rgb(236, 72, 153);
}


@media (prefers-color-scheme: dark) {
    .btn, button {
        background-color: rgb(76 29 149);
        color: rgb(251, 204, 230);
    }
 
    .btn:hover {
        background-color: rgb(255, 255, 255);
    }
    
    .PostContentBox {
        border: 1px solid rgba(255,255,255,0.2);
    }
    
    .PostContentBox a {
	    color: rgb(255, 255, 255);
    }
}

.is-layout-flex.is-vertical {
    flex-direction: column;
    align-items: flex-start;
}

.SiteName {
	color: rgb(255, 255, 255);
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
}

.Max1020 {
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
}