@import url("/font/font.css");

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    font-family: "Adelle Sans ARM", "GHEA Grapalat", sans-serif;
    font-size: 14px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "GHEA Mariam", serif;
}

a {
    color: #000;
    text-decoration: none;
} a:hover {
    text-decoration: underline;
}

nav, main, article {
    width: 40%;
    margin: 0 auto;
}

nav {
    display: flex;
    gap: .25rem;
    margin: 40px auto;
    justify-content: space-between;
} nav a {
    display: inline-block;
    padding: .25rem;
    color: #000;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: "Tahoma", sans-serif;
    font-size: 13px;
} nav a:hover {
    background-color: #fafafa;
} nav a:focus {
    border-color: #007aff;
    box-shadow: 0 0 0 2px #007aff50;
} nav .brand {
    font-weight: bold;
}

nav .bar {
    display: flex;
    gap: .25rem;
}

main .title {
    font-style: italic;
    font-weight: bolder;
}

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
    font-style: italic;
    margin: .25rem 0;
}

article .heading {
    display: flex;
    justify-content: space-between;
}

.row {
    display: flex;
    align-items: center;
} .row .col {
    flex-grow: 1;
}

.form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.form div {
    display: flex;
    flex-direction: column;
}
.form label {
    padding: .25rem 0;
}
.form input,
.form textarea,
.form button,
.form select {
    padding: .25rem;
    max-width: 100%;
    min-width: 100%;
    color: #fff;
    background-color: #000;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: "Adelle Sans ARM", "GHEA Grapalat", sans-serif;
    outline: none;
}
.form button {
    cursor: pointer;
}
.form button:hover {
    background-color: #ffffff10;
}
.form input:focus,
.form textarea:focus,
.form select:focus,
.form button:focus {
    border-color: #007aff;
    box-shadow: 0 0 0 2px #007aff50;
}
.form textarea {
    min-height: 250px;
}

.titleus {
  	display: flex;
	width: 100%;
  	height: 300px;
  	padding: 6px;
  	border-radius: 4px;
  	background: #232323;
  	background-color: #232323;
  	transition: 0.2s;
} .titleus:hover {
  	background-position: -200px -640px;
} .titleus h2 {
  	width: 100%;
  	margin: 0; padding: 4px;
	font-weight: bolder;
  	font-size: 23px;
  	align-self: flex-end;
} .titleus span {
    float: right;
    font-style: italic;
    text-align: right;
}

/* Dark */
@media (prefers-color-scheme: dark) {
    body { color: #fff; background-color: #000; }
    a { color: #fff; }
    nav a { color: #fff; border-radius: 4px; border: 1px solid transparent; }
    nav a:hover { background-color: #ffffff20; } nav a:focus { background-color: #ffffff20; border-color: #007aff; box-shadow: 0px 0px 0px 3px #007aff50; }
    input { border: 1.2px solid #999; border-radius: 2px; color: #fff; background-color: #282828; }
}

/* Tablet */
@media (max-width: 1024px) {
    nav, main, article {
        width: 70%;
    }
}

/* Mobile */
@media (max-width: 640px) {
    nav, main, article {
        width: 92%;
    }

    nav {
        flex-direction: column;
        gap: .5rem;
        align-items: flex-start;
    }

    nav .bar {
        flex-wrap: wrap;
    }

    .row {
        flex-direction: column;
        align-items: stretch;
    }

    article .heading {
        flex-direction: column;
    }
}