/* Root */
:root 
{
    /* Dark mode */
    --dark-bg: #0d0d0d;
    --dark-text: #ffdab9;
    --dark-link: black;
    --dark-link-bg: #f08080;
    --dark-title: #f08080;

    /* Light mode */
    --light-bg: #ffdab9;
    --light-text: #0d0d0d;
    --light-link: black;
    --light-link-bg: #f08080;
    --light-title: #f08080;

    /* Default mode */
    --bg-color: var(--dark-bg);
    --text-color: var(--dark-text);
    --link-color: var(--dark-link);
    --link-bg-color: var(--dark-link-bg);
    --title-color: var(--dark-title);
}


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

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

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

/* Navbar & Contact */
#contact 
{
    margin-top: 2vh;
}

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

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

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    color: var(--link-color);
    background-color: var(--link-bg-color);
}

nav a:hover, #contact a:hover
{
    color: var(--link-bg-color);
    background-color: var(--link-color);
    border: 1px solid var(--link-bg-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 {
    border-bottom: 1px solid var(--title-color);
}

/* Responsive design */
@media screen and (max-width: 700px) 
{
    body 
    {
	font-size: 10px;
    }
}

@media screen and (max-width: 500px) 
{
    nav ul, #contact ul
    {
	flex-direction: column;
	gap: 0.5rem;
    }
}

/* Night mode */
@media (prefers-color-scheme: dark) 
{
    :root 
    {
	--bg-color: var(--dark-bg);
	--text-color: var(--dark-text);
	--link-color: var(--dark-link);
	--link-bg-color: var(--dark-link-bg);
	--title-color: var(--dark-title);
    }
}

/* Day mode */
@media (prefers-color-scheme: light)
{
    :root
    {
	--bg-color: var(--light-bg);
	--text-color: var(--light-text);
	--link-color: var(--light-link);
	--link-bg-color: var(--light-link-bg);
	--title-color: var(--light-title);
    }
}