:root{

--pri-color: #ffa800;
--sec-color: #026cff;
--bak-color: #231700;

}

/* COMMON */
body {
margin: 0;
background-color: var(--bak-color);
color: var(--pri-color);
font-family: Courier New;
}

a,
a:visited,
a:active {
color: var(--sec-color);
}

a:hover {
color: var(--pri-color);
}

hr{color: var(--pri-color)}

/* BODY TEXT*/

.yap {

color: var(--pri-color);
margin-top: 2rem;
margin-left: 10rem;

}

.frame {

border-style: solid;
border-color: var(--pri-color);
height: 300px;

}

.spoiler{

background-color: var(--pri-color);
color: transparent;

}

.spoiler:hover,
.spoiler:focus{

background-color: var(--bak-color);
color: var(--pri-color);

}

/* TITLE */

.title-bar {

display: flex;
justify-content: center;
align-items: center;

}

/* SIDE BAR */
.sidebar {
top: 0px;
left: 0px;
width: 150px;
max-width: 150px;
height: 2000px;
position: fixed;
background-color: var(--bak-color);
border-right: 1px solid var(--pri-color);
text-align: center;
}

.hover-button{

background-color: var(--pri-color);
color: var(--bak-color);
width: 125px;
height: 16px;
text-align: center;
border-style: solid;
border-color: var(--pri-color);

}

.hover-button:hover{

background-color: var(--bak-color);
color: var(--pri-color);
width: 125px;
height: 16px;
text-align: center;
border-style: solid;
border-color: var(--pri-color);

}