/* definición de la fuente */

@font-face {
	font-family: "ATT-PC6300";
	src: url("font/ATT_PC6300.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* estilos base */

* {
	/* reseteo generico de los estilos */
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	/* inicialización de la fuente */
	font-family: "ATT-PC6300", monospace;
	font-size: 18px;
}

/* color por defecto */
body {
	background-color: #000000;
	color: #AAAAAA;
}

/* Texto */
p {
	color: #AAAAAA;
}

i {
	font-style: normal;
}


b, strong {
	color: #FFFFFF;
	font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {
	color: #ffffff;
	font-weight: normal;
}

/* listas */

ul {
	list-style: none;
}

ul li {
	position: relative;
	margin: 1ch 2ch;
}

ul li::after {
	content: '*';
	color: #FFFF55;

	position: absolute;
	left: -16px;
	top: 0;
}

ol li {
	margin: 1ch 3ch;
	color: #FFFF55;
}

/* links */
a {
	color: #AAAAAA;
  text-decoration: none;
}

a:link {
	color: #55FF55;
}

a:visited {
	color: #55FF55;
}

a:hover {
	color: #FFFF55;
}

a:active {
	color: #AA5500;
}

/* hr */

hr {
	background-color: #000000;
	border: none;
	border-top: 1px solid #AA5500;
	border-bottom: 1px solid #AA5500;
	height: 0.4ch;
}

/****** componentes ******/

/* botones */

.button {
	background-color: #000000;
	color: #FFFF55;
	text-decoration: none;
}

.button:hover {
	color: #FFFFFF;
}

.button:active {
	color: #AA5500;
}

/* viewport*/
.viewport {
	background-color: #0000AA;

	position: relative;
	padding: 1ch;
}

.viewport::after {
	content: "";
	position: absolute;

	pointer-events: none;

	/* configuración del borde */
	border-top: 3px double #AAA;
	border-bottom: 3px double #AAA;
	border-left: 5px double #AAA;
	border-right: 5px double #AAA;

	/* posicionamiendo del borde */
	top: 4px;
	left: 3px;
	width: calc(100% - 15px);
	height: calc(100% - 13px);
	z-index: 0;
}

/* navigator bar */

.nav {
	background-color: #0000AA;
	display: flex;

	height: 2ch;
}

.nav a {
	color: #FFFFFF;
	margin: 0 1ch;
}

.nav ul {
	display: flex;
}

.nav ul li {
	background-color: #000000;
	margin: 0 1ch;
	padding: 0 1ch;
}

.nav ul li::after {
	content: '';
}

.nav ul li a {
	display: inline-block;
	color: #AAAAAA;
}

.nav ul li a::first-letter {
	color: #FF5555;
}

.nav ul li a:hover {
	color: #FFFFFF;
}

.menu {
	display: none;
}

@media (max-width: 600px) {
	.nav {
		justify-content: space-between;
	}

	.nav ul {
		display: none;
	}

	.menu {
		display: block;
	}
}

/* bloque aburrido */

.bored {
	position: relative;
	padding: 2ch;
}

.bored-expand {
	height: calc(100vh - 4ch);
}


.bored::after {
	content: '';
	position: absolute;

	pointer-events: none;

	/* configuración del borde */
	border-top: 3px double #AA5500;
	border-bottom: 3px double #AA5500;
	border-left: 5px double #AA5500;
	border-right: 5px double #AA5500;
	
	/* posicionamiendo del borde */
	top: 4px;
	left: 3px;
	width: calc(100% - 15px);
	height: calc(100% - 13px);
	z-index: 0;
}

/* caja */

.box {
	margin: 1ch;
	display: flex;
	align-items: start;
	flex-flow: row wrap;
	gap: 0 1ch;
}

.home-box {
	display: grid;
	grid-template-columns: 75% 1fr;
	grid-template-rows: 1fr;
}

/* displays */

.home-display {
	display: grid;
	grid-template-rows: 2ch 1fr 2ch;
	grid-template-columns: 75% 25%;

}

.home-display nav {
  grid-row: 1;
  grid-column: 1 / 3;
}

.home-display article {
  grid-row: 2;
  grid-column: 1;
}

.home-display aside {
  grid-row: 2;
  grid-column: 2;
}

.home-display footer {
  grid-row: 3;
  grid-column: 1 / 3;
}

.aside-display {
	display: grid;
	grid-template-rows: 1fr auto;
}

/*** bloques y ventanas ***/

.expand-all {
	width: 100vw;
	height: 100vh;
}

.center-box {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin: 0;
}

.window-small {
	max-width: 30%;
	min-width: 20%;
}

.center-me {
	text-align: center;
}

.center-img {
	display: block;
	margin: 0 auto;
}

/*** atributos ***/

.title {
	background-color: #000000;
	color: #55FFFF;
	padding: 0 1ch;
}

.mark {
	display: inline;
	color: #FF55FF;
}

.warning {
	background-color: #FFFF55;
	color: #000000;
	animation: warning-anim 2s steps(2, jump-none) infinite;
}

.dialog {
	color: #000;
	background-color: #fff;
}

@keyframes warning-anim {
	from {
		background-color: #FFFF55;
		color: #000000;
	}
	to {
		background-color: #000000;
		color: #FFFF55;
	}
}