:root
{
    image-rendering: optimizespeed;

    background-image: url("images/mccat.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;

    text-shadow: 2px 2px 12px #c4a7e7;
    --second-shadow: 2px 2px 5px #ebbcba;
    
    --header-shadow: 2px 2px 12px #9ccfd8;
    --header-background: linear-gradient(180deg, #7eb6cc 0%, #9CCFD8 100%);

    background-color: #baaaa2;
    color: #e0def4;
}

:visited
{
    color: #c4a7e7;   
}

:link
{
    color: #c4a7e7;
    
    transition-property: color,text-shadow;
    transition-duration: 0.5s;
}

:link:hover
{
    color: #ebbcba;
    text-shadow: var(--second-shadow);
}

.containerWindow
{
    backdrop-filter: blur(4px) saturate(125%) brightness(125%);
    border-radius: 12px 12px 12px 12px;

    width: 80vw;
    margin-top: 10%;
    margin-left: 10%;
}

.windowTop
{
    font-size: 1vw;
    padding: 40px;

    text-align: center;
    text-shadow: var(--second-shadow);
    
    background: linear-gradient(6deg, #191724f5 3%, #26233ad9 22%, #6e6a86cc 77% 100%);
    border-radius: 12px 12px 0px 0px;
}

.windowBody
{
    display: flex;
    margin-top: -15px;
    padding: 20px 20px 10px 5px;
    background: linear-gradient(6deg, #191724f5 14%, #232136f5 39%, #26233a 65%, #403d52 95%);
    border-radius: 12px 12px 12px 12px;
    box-shadow: 0px 0px 20px 5px #ebbcba;
}

.bodyNav
{
    padding: 5px 43px 5px 0px;
    margin: 0px 15px 0px 15px;
    box-shadow: 0px 0px 6px 1px #9ccfd8;
    
    background-image: linear-gradient(6deg, #26233a99 3%, #403d5299 77% 25%);
    border-radius: 6px;
}


.bodyNotice
{
    margin-top: 5px;

    display: flex;
    flex-direction: column;
    text-align: center;
}

.navCategory
{
    text-align: center;
    width: 160%;
    padding: 0px 0px 5px 0px;
    text-shadow: var(--second-shadow);
}

.navCategory:not(:first-child)
{
    margin-top: 5px;
}

.navChild:not(:last-child)
{
    margin-bottom: 10px;
}

.navParent::after
{
    content: "──────\A";
    white-space: pre-wrap;
}

.navParent
{
    -webkit-text-fill-color: transparent;
    background: var(--header-background);
    background-clip: text;

    text-shadow: var(--header-shadow);
    
    display: flex;
    flex-direction: column;
}

.navChild
{
    width: 60%;
    display: flex;
    margin-left: 10%;
    padding: 0px 10px 2px 10px;
    border-radius: 2px;

    text-decoration: none;
    flex-direction: column;
    color: #e0def4;
    
    transition-property: scale;
    transition-duration: 0.1s;

    cursor: pointer;
}

.navChild:hover
{
    scale: 110%;
    box-shadow: 0px 0px 5px 2px #9ccfd8;
    background: #9ccfd8;
    color: #575279;
}

.bodyContent
{
    margin-top: -15px;
    margin-left: 25px;
}

.contentHeader
{
    -webkit-text-fill-color: transparent;
    background: var(--header-background);
    background-clip: text;

    text-shadow: var(--header-shadow);
}

.contentMain
{
    margin-left: 15px;
}

.contentImage
{
    margin: 8px;

    border: 2px dashed transparent;
    border-radius: 5px;
    background-clip: border-box;
    background-image: radial-gradient(circle, #31748f 55%, #9ccfd8 100%);
    
    width: 30vw;
    
    transition-property: scale;
    transition-duration: 0.25s;
    cursor: pointer;
}

.contentImage:hover
{
    scale: 105%;
    image-rendering: optimizequality;
}

@media (max-width: 1280px)
{
    .containerWindow
    {
        width: 100vw;
        margin-left: -8px;
        margin-top: 25%;
    }

    .windowTop
    {
        font-size: 2vw;
    }
}

@media (max-width: 1024px)
{
    .navParent
    {
        margin-left: -47px;
    }

    .navChild
    {
        margin-left: 14px;
    }

    :root
    {
        font-size: 34px;
    }
}