@property --Angle{
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}
@property --Percentage {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}
@property --Color_Background {
  syntax: '<color>';
  inherits: true;
  initial-value: white;
}
@property --Color_Text {
  syntax: '<color>';
  inherits: true;
  initial-value: black;
}
@property --Color_Complementary {
  syntax: '<color>';
  inherits: true;
  initial-value: cyan;
}
html {
  --Change: #0000, var(--Color_1) 2deg calc(var(--Angle) - 2deg), #0000 var(--Angle);
  background: 
    conic-gradient(from calc(-45deg - var(--Angle) / 2) at top var(--Percentage) left var(--Percentage), var(--Change)),
    conic-gradient(from calc(-45deg - var(--Angle) / 2) at top var(--Percentage) left var(--Percentage), var(--Change)),
    conic-gradient(from calc( 45deg - var(--Angle) / 2) at top var(--Percentage) right var(--Percentage), var(--Change)),
    conic-gradient(from calc( 45deg - var(--Angle) / 2) at top var(--Percentage) right var(--Percentage), var(--Change)),
    conic-gradient(from calc(-135deg - var(--Angle) / 2) at bottom var(--Percentage) left var(--Percentage), var(--Change)),
    conic-gradient(from calc(-135deg - var(--Angle) / 2) at bottom var(--Percentage) left var(--Percentage), var(--Change)),
    conic-gradient(from calc( 135deg - var(--Angle) / 2) at bottom var(--Percentage) right var(--Percentage), var(--Change)),
    conic-gradient(from calc( 135deg - var(--Angle) / 2) at bottom var(--Percentage) right var(--Percentage), var(--Change))
    var(--Color_2);
  background-size: calc(2 * 80px) calc(2 * 80px);
  animation: Dark_Body_Background_Animation 10s infinite alternate linear;
}
@keyframes Dark_Body_Background_Animation {
  0%, 15% {
    --Angle: 135deg;
    --Percentage: 20%;
    --Color_1: var(--Color_Background);
    --Color_2: var(--Color_Complementary);
    background-position: 0 0, 80px 80px;
  }
  45%, 50% {
    --Angle: 90deg;
    --Percentage: 25%;
    --Color_1: var(--Color_Background);
    --Color_2: var(--Color_Complementary);
    background-position: 0 0, 80px 80px;
  }
  50.01%, 55% {
    --Angle: 90deg;
    --Percentage: 25%;
    --Color_2: var(--Color_Background);
    --Color_1: var(--Color_Complementary);
    background-position: 80px 0, 0 80px;
  }
  85%, 100% {
    --Angle: 135deg;
    --Percentage: 20%;
    --Color_2: var(--Color_Background);
    --Color_1: var(--Color_Complementary);
    background-position: 80px 0, 0 80px;
  }
}
.Header
{
    text-align: center;
    font-size: 20px;
    border: 1px solid white;
    border-radius: 50px 50px 50px 50px;
    box-shadow: 2px 3px 20px black, 0 0 60px var(--Color_Complementary) inset;
    color: var(--Color_Text);
    background-color: var(--Color_Background);
}
.Navigation,
.Navigation_2
{
    text-align: center;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    font-size: 26px;
    color: var(--Color_Text);
    border: 1px solid white;
    border-radius: 50px 50px 50px 50px;
    box-shadow: 2px 3px 20px black, 0 0 60px var(--Color_Complementary) inset;
}
.Navigation ul,
.Navigation_2 ul
{
    display: flex;
}
.Navigation li,
.Navigation_2 li
{
    list-style: none;
    margin-left: auto;
    margin-right: auto;
}
.Navigation li
{
    width: 33%;
}
.Navigation_2 li
{
    width: 25%;
}
.Navigation a,
.Navigation_2 a
{
    display: block;
    padding: 10px 25px;
    text-decoration: none;
    border-right: 1px solid var(--Color_Text);
    color: var(--Color_Text);
}
.Navigation li:last-child a,
.Navigation_2 li:last-child a
{
    border-right: none; 
}
.Navigation a:hover,
.Navigation_2 a:hover
{
    animation-name: Select;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
.Navigation_Sidebar li
{
    font-size: 16px;
}
.Navigation_Sidebar ul
{
    display: inline;
}
.Navigation_Sidebar a:hover
{
    animation-name: Select_2;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
@keyframes Select
{
    from
    {
        font-size: 26px;
    }
    to
    {
        font-size: 32px;
    }
}
@keyframes Select_2
{
    from
    {
        font-size: 16px;
    }
    to
    {
        font-size: 20px;
    }
}
.Main_Text
{
    float: right;
    width: 65%;
    padding: 0px 30px 15px 30px;
    border: 1px solid white;
    border-radius: 30px 15px 40px 5px;
    text-align: justify;
    line-height: 150%;
    font-size: 18px;
    overflow: scroll;
    height: 500px;
    box-shadow: 2px 3px 20px black, 0 0 60px var(--Color_Complementary) inset;
    color: var(--Color_Text);
    background-color: var(--Color_Background);
}
.Main_Text_Header
{
    text-align: center;
}
p
{
    --padding-top-bottom: 1.25em;
    margin-top: var(--padding-top-bottom);
    margin-bottom: var(--padding-top-bottom);
}
.Sidebar
{
    float: left;
    padding: 0px 15px 30px 15px;
    border: 1px solid white;
    border-radius: 15px 30px 5px 40px;
    text-align: justify;
    line-height: 150%;
    overflow-wrap: break-word;
    max-width: 15%;
    box-shadow: 2px 3px 20px black, 0 0 60px var(--Color_Complementary) inset;
    color: var(--Color_Text);
    background-color: var(--Color_Background);
    font-weight: bold;
}
.Sidebar a
{
    color: var(--Color_Text);
    text-decoration: none;
}
.Sidebar a:hover
{
    animation-name: Select_Sidebar;
    animation-duration: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
.Sidebar ul
{
    overflow: auto;
    max-height: 429.5px;
}
@keyframes Select_Sidebar
{
    from 
    {
        text-decoration: none;
    }
    to
    {
        text-decoration: underline;
    }
}
.Highlighted_Text
{
    font-weight: bold;
}
.Button_Left
{
    float: left;
    margin-left: 10px;
}
.Button_Center
{
   float: center;
}
.Button_Right
{
    float: right;
}