/* Page default disposition */
body 
{
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--link-bg-color);

	font-size: calc(12px + 0.390625vw);
	font-family: "Courier New";

    width: 90vw;
    margin: 0 auto;
    text-align: center;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Navbar, Contact, Error */
#error {
	text-align: center;
}

#contact, #error
{
    margin-top: 2vh;
}

nav ul, #contact ul
{
    display: flex;
    justify-content: center;
}

nav a, #contact a, #error a
{
    padding: 0.1rem 1rem;
    margin: 0rem 0.3rem;

    text-align: center;
	font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;

    color: var(--link-color);
    background-color: var(--link-bg-color);
	border: 1px solid var(--link-bg-color);
}

nav a:hover, #contact a:hover, #error a:hover
{
    color: var(--link-bg-color);
    background-color: var(--link-color);
}

/* pre */
pre 
{
    color: var(--link-bg-color);
}

pre:hover 
{
    animation: fadePreColor 4s infinite alternate;
}

@keyframes fadePreColor {
    0%   {color: var(--lightred);}
    25%  {color: #ff5a5f;}
    50%  {color: #c81d25;}
    100% {color: #370617;}
}

/* top */
.top
{
    background-color: var(--link-bg-color);
    color: var(--link-color);
    font-weight: bold;
}

.top:after {
    content: "HTTPS://ARKA.ROCKS"
}

/* main */
main
{
    margin: 2vw;
    text-align: left;
}

main a
{
    color: var(--link-bg-color);
}

/* titles */
h1, h2, h3, h4 {
    color: var(--title-color);
}

h1 {
	width: 80%;
	margin: 0 auto;

	text-align: center;
	text-transform: uppercase;
	font-size: calc(34px + 0.390625vw);
}

main div.h1-content {
	width: 80%;
	margin: 0 auto;
}

#contact ul 
{
    margin-bottom: 2vh;
}

@media screen and (min-width: 1000px)
{
	div#content
	{
		max-width: 850px;
		margin-left: auto;
		margin-right: auto;
	}
}	

@media screen and (max-width: 720px) 
{
    body 
    {
		font-size: calc(10px + 0.390625vw);
    }

	h1
	{
		font-size: calc(24px + 0.390625vw);
	}
}

@media screen and (max-width: 600px) 
{
    nav ul, #contact ul
    {
		flex-direction: column;
		gap: 0.5rem;
    }
	h1
	{
		font-size: calc(14px + 0.390625vw);
	}

}