.mainbox{
color: var(--black);
overflow: auto;
}

.introduction{
padding:10px;
background:var(--yellow);
border-bottom: 5px solid var(--black);
}

.introduction h1{
font-family:MS Gothic, monospace; 
font-size:90px;
text-transform:uppercase;
line-height:.75;
}

.introduction p{
margin:10px 0 10px 0;
}

.introduction i{
padding:1px 4px;
font-weight: bold;
color:var(--yellow);
background:var(--black);
}

.button{
display:inline-block;
border:2px solid var(--black); 
background:var(--black);
color:var(--yellow);
padding:0 2px;
font-family:monospace;
font-size:14px; 
font-weight:bold;
text-decoration:none;
text-transform:uppercase;
cursor:pointer;
}

.button:hover{
background:var(--lime);
color:var(--black);
}

.button:active{
transform:translate(3px,3px);
}

.submit-area{
display:none;
border-bottom: 5px solid var(--black);
padding:10px;
background:var(--white);
}

.submit-area.open{
display:block;
}

.submit-area h2{
padding: 0;
margin-bottom:3px;
font-family:MS Gothic, monospace;
font-size:25px;
text-transform:uppercase;
background-color: var(--white);
}

.submit-area > p{
font-size:15px;
line-height:1.5;
margin-bottom:10px;
}


.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}


.field{
display:flex;
flex-direction:column;
gap:7px;
}

.field.full{
grid-column:1 / -1;
}

label{
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}

input,
select,
textarea{
border:2px solid var(--black);
background:var(--white);
color:var(--black);
padding:11px;
outline:none;
font-family:monospace;
font-size:13px;
}


textarea{
min-height:120px;
resize:vertical;
line-height:1.5;
}

.form-note{
margin-top:15px;
font-size:10px;
line-height:1.6;
text-transform:uppercase;
}

.form-message{
display:none;
margin-top:15px;
border:2px solid var(--black);
padding:12px;
background:var(--magenta);
font-size:11px;
font-weight:bold;
text-transform:uppercase;
}

.shelf{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
gap: 5px;
}

.entry{
min-width:0;
height:250px;
padding:10px 10px 5px 10px;
display:flex;
flex-direction:column;
position:relative;
overflow:hidden;
}

.entry-type{
display:inline-block;
width:max-content;
border:1px solid var(--black);
padding:1px  3px;
font-size:11px;
font-weight:bold;
text-transform:uppercase;
}

.entry h3{
flex-shrink:0;
font-family:MS Gothic, monospace;
font-size:25px;
text-transform:uppercase;
line-height:.95;
margin-top:10px;
word-break:break-word;

}

.entry p{
flex:1;
margin-top:5px;
font-family:monospace;
font-size:13px;
overflow-y:auto;
overflow-x:hidden;
}

.entry-footer{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:10px;
margin-top:auto;
padding-top:10px;

}

.entry-by{
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}

.entry-link{
color:var(--black);
font-size:10px;
font-weight:bold;
text-decoration:none;
text-transform:uppercase;
}

.entry-link:hover::before{
content: "> ";
}

.palette {
display: flex;
width: 100%;
height: 25px;
border: 2px solid var(--black);
}

.swatch {
flex: 1;
height: 100%;
border: none;
cursor: pointer;
padding: 0;
}

.swatch.active {
color: var(--black);
font-weight: bold;
}

.swatch.active::before{
content: "#";
}

.swatch[data-color="#FFFF00"] {
background:#FFFF00; 
}

.swatch[data-color="#39FF14"] {
background:#39FF14;
}

.swatch[data-color="#00FFFF"] {
background:#00FFFF;
}

.swatch[data-color="#FF5AFF"] {
background:#FF5AFF;   
}

.swatch[data-color="#FF4F4F"] { 
background:#FF4F4F;
}

.swatch[data-color="#E1E1E1"] {
background:#E1E1E1;
}