/*This is a CSS comment! Anything between these tags will not be run and is for your reference. Everything in this file has to do with how the website looks; I've pointed out areas where you can pick text/background colors, etc. If you want to look into doing more specific effects, google is your best friend! You can also look at what's available at https://www.w3schools.com/ */
/*Template version 1.0.2*/

/*This affects every element on the site. You can change the font and font color here.*/
*
{ 
    font-family: 'Tahoma', sans-serif;
    color: #123086; /*Text color*/
    text-align: left;
}

body
{
    background: #a9d4ff; /*This is the background color for the whole site*/
    margin-left: 3%;
    margin-right: 3%;
}

article
{
    background: #b2e2ff; /*This is the white boxes that the text is in. You can change this to anything you like*/
    border-radius: 5px;
    margin-top: 5px;
    margin-left: 5%;
    margin-right: 5%;
    padding: 20px;
}

footer
{
    margin-top: 5px;
    margin-left: 5%;
    margin-right: 5%;
    background: #fed547;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
}

h1
{
    text-align: center;
}

h2
{
    text-align: center;
}

a
{
    color: #2f63f7; /*This is the color for links, such as the download link*/
    text-decoration: None;
    font-weight: bold;
}

/*Class for centering images*/
.center
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    border-radius: 5px; /*If you want your images to be perfectly square, remove the border-radius bit*/
}

/*Classes for the download button*/
.dlbutton
{
    display: block;
    text-align: center;
    padding: 10px;
    background-color: #f8cb41;
    max-width: 35%;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
}

.dlbutton:hover
{
    background-color: #fefea9;
}

/*This is for the webring, but you could use it for any center aligned text*/
.centertext
{
	text-align: center;
}

.version
{
    margin-left: 20%;
    margin-right: 20%;
    padding: 10px;
    text-align: center;
}

.version:hover
{
    background: #a8d4fb; /*If you dont want your version history to change color when you hover over it, remove this bit of code*/
    border-radius: 5px;
}

/*These next bits handle the responsive iframe for the embedded youtube video that explains ukagaka. The margin bit is mine, and you can adjust the margin here if you don't like the size of the video. The rest I got from here: https://avexdesigns.com/blog/responsive-youtube-embed */
.embed-margin
{
	display: block;
	margin-left: 20%;
	margin-right: 20%;
}

.embed-container
{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	border-radius: 5px
}

.embed-container iframe, .embed-container object, .embed-container embed
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*Please leave this credit as-is if you use the template as given! If you start making major changes, you can go ahead and get rid of it tbh. Everything I've done here is very basic HTML/CSS*/
.credit
{
    text-align: center;
    color: #b11572;
    font-size: 12px;
}