* {margin: 0; padding: 0;}

[ID] {display: none; animation: fade ease 1s;}
[ID]:target {display: block;}

body {background: #1a1e1f; color: #496c6e; font-family: Open Sans; font-size: 14px; font-weight: bold; max-width: 600px; margin: 0 auto; height: 65vh; text-align: justify;}

header {margin-bottom: 2px;}
header h1 {margin-top: -5px;}

section p {margin-bottom: 5px;}
section p:last-child {margin: 0;}

summary {text-decoration: underline; cursor: pointer;}

.page {height: 100%; margin: 5px;}

.box {background:#273333; border-radius: 5px; padding: 10px;}

.bold {color: #cd423b;}

.begin {border: 2px solid; padding: 10px; text-align: center; margin: 10px; display: block; transition: all 1s ease 0s;}
.begin:hover {background: #496c6e; color: #373739; border-radius: 50px; transition: all 1s ease 0s;}

.title-card {
position: fixed; background: #273333; width: 100vw; height: 100vh; top: 0; left: 0; animation: none; padding: 10px
}

a {text-decoration: none; color: #496c6e;}
a:hover {color: #cd423b;}

form {text-align: center; margin-top: 10px;}
form input {margin-top: 5px;}
form input:nth-child(4) {background: #1a1e1f; border-radius: 50px; border: 2px solid #496c6e; color: #496c6e; padding: 2px 5px; font-weight: bold;}
form input:nth-child(4):focus {border: 2px solid #cd423b; outline: none;}
form input:nth-child(5) {background: #496c6e; color: #1a1e1f; border: 2px solid #496c6e; border-radius: 15px; padding: 2px 5px; font-weight: bold}
form input:nth-child(5):hover {cursor: pointer; background: #273333; color: #496c6e;}
form input:nth-child(5):active {background: #cd423b; border: 2px solid #cd423b; color: #1a1e1f;}

ul {list-style: none; padding-inline: 0;}
ul li {border: 2px solid; padding: 10px; margin: 10px; text-align: center; transition: all 1s ease 0s;}
ul li:hover {background: #496c6e; color: #273333; border-radius: 50px; transition: all 1s ease 0s; text-decoration: none;}

img {width: 100%; max-width: 565px; border-radius: 5px; border: 2px solid #496c6e}

.no, .no:hover {transition: none;}
.no:hover span {display: none;}
.no:hover:before {content: "No.";}

@keyframes fade {
0% {opacity: 0;}
100% {opacity: 1;}
}

/*

A 1
B 2
C 3
D 4
E 5
F 6
G 7
H 8
I 9
J 10
K 11
L 12
M 13
N 14
O 15
P 16
Q 17
R 18
S 19
T 20
U 21
V 22
W 23
X 24
Y 25
Z 26

*/