@font-face {
	font-family: "Helvetica";
	font-style: normal;
	font-weight: normal;
	src: url("HelveticaNeueMedium.otf");
}

@font-face {
	font-family: "Maple";
	font-style: normal;
	font-weight: normal;
	src: url("MapleMono-Regular.ttf");
}

pre {
	overflow: scroll;
	background: #3f7b96;
}
code {
	font-family: Maple;
	color: white;
}
body {
	background: #cff1ff;
	background: linear-gradient(
		90deg,
		rgba(207, 241, 255, 1) 0%,
		rgba(176, 255, 209, 1) 30%,
		rgba(186, 211, 252, 1) 52%,
		rgba(255, 247, 153, 1) 71%,
		rgba(252, 191, 255, 1) 97%
	);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

body {
	font-optical-sizing: auto;
	font-family: Helvetica;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img:hover {
	opacity: 0.5;
}

h1:hover {
	opacity: 0.5;
}
h2:hover {
	color: green;
}
h3:hover {
	opacity: 0.5;
}

img:hover,
iframe:hover,
h3:hover,
h2:hover,
strong:hover,
.link:hover {
	animation-iteration-count: infinite;
	animation-name: head3;
	animation-duration: 1s;
}
.container {
	max-width: 800px; /* Adjust as needed */
}

.wrapped-image {
	float: left;
	max-width: 40%;
	width: 100%;
	height: auto;
	margin: 0 20px 20px 0;
}
.wrapped-frame {
	float: right;
	max-width: 40%;
	width: 100%;
	height: auto;
	margin: 0 20px 20px 0;
}

.blogtitle {
	padding-left: 50px;
}
.posts {
	padding-left: 100px;
}
main {
	align-self: center;

	padding: 0 20px;
	width: 100%;

	max-width: 100%;
	box-sizing: border-box;
	word-wrap: break-word;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}
p,
h1,
h2,
ul {
	overflow-wrap: break-word;
	color: #054a91;
	word-wrap: break-word;
	white-space: normal;
}
h3 {
	color: #054a91;
}

.link {
	color: #054a91;
}
@media screen and (min-width: 600px) {
	main {
		width: 45%; /* Or any specific width like 800px */
		max-width: 1200px; /* Maximum width on very large screens */
		margin: 0 auto; /* This centers the container */
		padding: 0; /* Optional: remove padding on desktop */
	}
}
@keyframes head3 {
	0% {
		transform: translateY(-5px);
	}
	50% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(-5px);
	}
}
/*
body {
    font-family: Arial, sans-serif;
    
    margin: 0;
    padding: 20px;
    
}

 */