@font-face { font-family: MesmerizeBD; src: url('fonts/Mesmerize Bd.otf'); } 
@font-face { font-family: MesmerizeBK; src: url('fonts/Mesmerize Bk.otf'); } 
@font-face { font-family: MesmerizeLT; src: url('fonts/Mesmerize Cd Lt.otf'); } 
@font-face { font-family: NotoSansR; src: url('fonts/NotoSans-Regular.ttf'); } 

body{
	margin: 0;
}

body::before{
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	position: fixed;
	background: linear-gradient(180deg,rgb(251, 0, 141)0%, rgba(100, 22, 61, 0) 100%);
	z-index: -1;
}

body::after{
	content: "";
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	position: fixed;
	background: linear-gradient(180deg,rgba(252, 0, 61, 0) 0%, rgba(100, 22, 61, 1) 100%);
	z-index: -1;
}

html{
	background-image: url("imgs/newBG.png");
	background-size: cover;
}

a {
  color: hotpink;
  font-weight: bold;
}

.bigtitle{
	z-index: 50;
}

.meart{
	position: absolute;
	margin-top:-240px;
	margin-left: 250px;
	width: 190px;
	max-width: 100%
}

.meart *{
	position: absolute;
	margin-top:-10px;
	margin-left: -290px;
	width: 250px;
	max-width: 100%
}

@media (orientation: portrait), (max-width: 1250px) {
	.topbar{
		font-family: MesmerizeBK;
		width: 100%;
		height: 240px;
		min-height: 100px;
		text-align: center;
		background: linear-gradient(180deg,rgba(251, 0, 141, 1) 50%, rgb(0, 0, 0) 100%);
		align-content: center;
		overflow-x: hidden;
		overflow-y: hidden;
		z-index: 1;
		margin-top: -35px;
	}

	.bigtitle{
		margin-top: 35px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media screen and (min-width: 1251px) {
	.topbar{
		font-family: MesmerizeBK;
		width: 100%;
		height: 140px;
		min-height: 100px;
		text-align: center;
		background: linear-gradient(180deg,rgba(251, 0, 141, 1) 20%, rgb(0, 0, 0) 100%);
		align-content: center;
		overflow-x: hidden;
		overflow-y: hidden;
		z-index: 1;
		margin-top: -35px;
	}

	.bigtitle{
		margin-top: -5px;
	}
}


.moredown{
	margin-top: 200px;
}

.topbar *{
	font-size: 0px;
	-webkit-transform:scale(1.1,1); /* Safari and Chrome */
    -moz-transform:scale(1.1,1); /* Firefox */
    -ms-transform:scale(1.1,1); /* IE 9 */
    -o-transform:scale(1.1,1); /* Opera */
    transform:scale(1.1,1); /* W3C */
	color:white;
	display: inline-block;
}
.substuff{
	font-family: MesmerizeLT;
	height: 85%;
}
.substuff *{
	-webkit-transform:scale(1.3,1); /* Safari and Chrome */
    -moz-transform:scale(1.3,1); /* Firefox */
    -ms-transform:scale(1.3,1); /* IE 9 */
    -o-transform:scale(1.3,1); /* Opera */
    transform:scale(1.3,1); /* W3C */
	margin: 25px;
	font-size: 49px;
}
.spacebetween{
	margin-left: 430px;
	content:"";
}

.whiteline{
	top:0;
	content: "";
	left:0;
	clip-path: polygon(0 3%, 100% 0%, 100% 4%, 0 17%);
	background-color: white;
	width: 100%;
	height: 100px;
	margin-bottom: -70px;
	margin-top: -5px;
}

.post{
	font-family: MesmerizeBK;
	margin-top:50px;
	display: block;
	align-content: center;
	color:white;
	width: 70%;
	height: auto;
	background: linear-gradient(180deg,rgba(251, 0, 141, 0.5) 0%,rgb(0, 0, 0) 30%, rgba(53, 10, 32, 1) 99%, rgba(251, 0, 141, 1) 100%);
	margin-right: auto;
	margin-left: auto;
	box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.5);
}

.title{
	display: flex;
	width: 100%;
	text-align: left;
	margin-left: 20px;
	height: auto;
}

.portfoliobuttons{
	margin-top: 50px;
	display: block;
	justify-content: center;
	width: 70%;
	grid-gap: 20px;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
}

.portfolioitem{
	margin-top: 50px;
}


.middletitle{
	display: flex;
    justify-content: center;
	align-items: flex-start;
	height: 80px;
}

.postinfo{
	display: flex;
    justify-content: space-between;
	align-items: flex-start;
	height: 80px;
}

.date{
	width: 50%;
	text-align: right;
	margin-right: 20px;
	height: auto;
}

.date *{
	text-align: right;
}

.content{
	display: block;
	margin-top: 5px;
	text-align: left;
	margin-left: 10px;
	overflow-wrap: break-word;
	width: 95%;
	font-family: MesmerizeBK;
	font-size: 20px;
}

.guestbookplacement{
	margin-top: 40px;
  	align-items: center;
  	display: flex;
  	height: 500px;
  	margin-bottom: 0px;
}

#sillyimg {
  transition: transform 0.2s ease;
}

.squish {
  transform: scale(1.2, 0.7);
}

.rssbutton{
  	display: flex;
	margin-left: auto;
	margin-right: auto;
}

.rssbutton *{
  	display: flex;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}