@font-face {
	font-family: "font_1";
	src: url("fonts/CrimsonText-Regular.ttf"), url("fonts/CrimsonText-Bold");
}

img {
	border: 4px dotted #ffffff;
}

a {
	margin: 0px;
	margin-left: 2px;
	color: #b15eff;
	font-size: 20px;
	font-family: "font_1";
	text-decoration: underline solid 3px;
	text-shadow: none;
}

a:hover {
	text-decoration: underline wavy 2px;
}

p {
	margin: 0px;
	margin-left: 2px;
	color: #ffffff;
	font-size: 20px;
	font-family: "font_1";
	text-shadow: 2px 2px #ab0242;
}

.website_history_text {
	margin: 0px;
	margin-left: 2px;
	color: #cc004d;
	font-size: 20px;
	font-family: "font_1";
	text-shadow: none;
}

.videos_navigation_text {
	margin: 0px;
	margin-left: 2px;
	color: #cc004d;
	font-size: 20px;
	font-family: "font_1";
	text-shadow: none;
}

.devlogs_navigation_text {
	margin: 0px;
	margin-left: 2px;
	color: #b15eff;
	font-size: 20px;
	font-family: "font_1";
	text-shadow: none;
}

.copyright_text {
	margin: 0px;
	color: #cc004d;
	font-size: 20px;
	font-family: "font_1";
	text-shadow: none;
}

body {
	background-image: url("images/background.gif");
	background-color: #000000;
}

.row {
	display: flex;
	flex-direction: row;
	gap: 16px;
}

.column_1 {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.column_2 {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.column_3 {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.column_4 {
	margin-top: 39px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.about {
	width: 480px;
	height: 300px;
	background-image: url("images/2_60x60.png");
	box-shadow: 3px 3px #ab0242, 6px 6px #ffffff, -3px -3px #ab0242, -6px -6px #ffffff;
}

.about_iframe {
	margin: 60px;
	width: 360px;
	height: 180px;
	border: 3px solid #ab0242;
	box-sizing: border-box;
}

.external_links {
        width: 360px;
        height: 120px;
	background-image: url("images/8_60x60.png");
}

.links_external {
	margin-left: 60px;
	width: 240px;
	height: 120px;
	background-color: #000000;
	border: 3.5px dashed #a660e6;
	box-sizing: border-box;
}

.website_history {
        width: 360px;
        height: 360px;
	background-image: url("images/7_60x60.png");
}

.history_website {
	margin-top: 60px;
	width: 360px;
	height: 240px;
	background-color: #000000;
	border: 3.5px dashed #ab0242;
	box-sizing: border-box;
	overflow: scroll
}

.copyright_notice {
        width: 480px;
        height: 60px;
	background-image: url("images/6_60x60.png");
}

.notice_copyright {
	margin-left: 120px;
	width: 240px;
	height: 60px;
	background-color: #000000;
	border: 3.5px dashed #de2a72;
	box-sizing: border-box;
}

.gallery {
	width: 540px;
        height: 420px;
	background-image: url("images/5_60x60.png");
}

.gallery_iframe {
        margin-left: 60px;
        width: 420px;
        height: 420px;
        border: none;
        box-sizing: border-box;
}

.videos_navigation {
	margin-top: 16px;
	width: 420px;
	height: 60px;
	background-image: url("images/2_60x60.png");
	box-shadow: 3px 3px #ab0242, 6px 6px #ffffff, -3px -3px #ab0242, -6px -6px #ffffff;
}

.navigation_videos {
	margin-left: 60px;
	width: 300px;
	height: 60px;
	background-color: #000000;
	border: 3.5px dashed #ab0242;
	box-sizing: border-box;
}

.videos {
	margin-top: 13px;
        width: 480px;
        height: 300px;
	background-image: url("images/1_60x60.png");
	box-shadow: 3px 3px #ab0242, 6px 6px #ffffff, -3px -3px #ab0242, -6px -6px #ffffff;
}

.videos_iframe {
	margin: 60px;
        width: 360px;
        height: 180px;
        border: none;
	box-sizing: border-box;
}

.devlogs_navigation {
	margin-top: 13px;
	width: 540px;
	height: 120px;
	background-image: url("images/8_60x60.png");
}

.navigation_devlogs {
	margin-left: 60px;
	width: 420px;
	height: 120px;
	background-color: #000000;
	border: 3.5px dashed #b15eff;
	box-sizing: border-box;
}

.devlogs {
	margin-top: 8px;
	width: 540px;
        height: 540px;
	background-image: url("images/10_60x60.png");
}

.devlogs_iframe {
	margin: 60px;
        width: 420px;
        height: 420px;
	border: none;
	box-sizing: border-box;
}

@media screen and (max-width: 550px) {
	.copyright_text {
		margin: 8px;
	}
	
	body {
		margin: 0px;
	}

	.row {
		flex-direction: column;
	}
		
	.column_3, .column_4 {
		margin-top: 0px;
	}

	.about {
		width: 320px;
		height: 240px;
		background-image: url("images/2_40x40.png");
		box-shadow: none;
	}

	.about_iframe {
		margin: 40px;
                width: 240px;
                height: 160px;
	}

	.external_links {
		width: 280px;
		height: 80px;
		background-image: url("images/8_40x40.png");
	}
	
	.links_external {
		margin-left: 40px;
		width: 200px;
		height: 80px;
	}

	.website_history {
		width: 320px;
		height: 240px;
		background-image: url("images/7_40x40.png");
	}

	.history_website {
		margin-top: 40px;
		width: 320px;
		height: 160px;
	}

	.copyright_notice {
		width: 320px;
		height: 80px;
		background-image: url("images/6_40x40.png");
	}

	.notice_copyright {
		margin-left: 40px;
		width: 240px;
		height: 80px;
	}

	.gallery {
		width: 320px;
		height: 400px;
		background-image: url("images/5_40x40.png");
	}

	.gallery_iframe {
		margin-left: 40px;
        	width: 240px;
        	height: 400px;
	}

	.videos_navigation {
		width: 280px;
		height: 80px;
		background-image: url("images/2_40x40.png");
		box-shadow: none;
	}

	.navigation_videos {
		margin-left: 40px;
		width: 200px;
		height: 80px;
	}

	.videos {
		width: 320px;
		height: 240px;
		background-image: url("images/1_40x40.png");
		box-shadow: none;
	}

	.videos_iframe {
		margin: 40px;
                width: 240px;
                height: 160px;
	}

	.devlogs_navigation {
		width: 320px;
		height: 80px;
		background-image: url("images/8_40x40.png");
	}

	.navigation_devlogs {
		margin-left: 40px;
		width: 240px;
		height: 80px;
	}

	.devlogs {
		width: 320px;
		height: 440px;
		background-image: url("images/10_40x40.png");
	}

	.devlogs_iframe {
		margin: 40px;
                width: 240px;
                height: 360px;
	}
}

@media screen and (max-width: 1279px) {
	.row {
		flex-direction: column;
	}

	.column_3, .column_4 {
		margin-top: 0px;
	}
}