:root {
    --base-grid: 8px;
    --colour-body-background: #d84c6e;
    --colour-background: #fff;
    --colour-background-folded: #f5f5f5;
    --colour-background-stripes: rgb(255, 255, 255);
    --colour-text: #1a1a1a;
}

*, :after, :before {
    box-sizing: border-box;
    margin: 0;
}

body{
    background-image: linear-gradient(270deg, rgb(29 32 39) 10%, rgb(162 31 88) 50%, rgb(29 32 39) 90%);
}

.articles {
    margin: calc(var(--base-grid)*2) auto calc(var(--base-grid)*5);
    display: grid;
    grid-row-gap: calc(var(--base-grid)*8);
    /*grid-column-gap: calc(var(--base-grid)*6);*/
    grid-template-columns: repeat(auto-fit,minmax(calc(var(--base-grid)*35),1fr));
    justify-items: center;
}

.articles__article {
    cursor: pointer;
    display: block;
    position: relative;
    animation-name: animateIn;
    animation-duration: .35s;
    animation-delay: calc(var(--animation-order)*100ms);
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}

.articles__article:before {
    content: "";
    position: absolute;
    top: calc(var(--base-grid)* -0.0);
    left: calc(var(--base-grid)* -0.0);
    border: 3px dashed #ffffff;
    background-image: repeating-linear-gradient(315deg, #ffffff87, transparent 4px, rgb(0 0 0 / 50%) 0, rgb(255 255 255) 4px);
    z-index: -1;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgb(0 0 0), 0 6px 20px rgb(0 0 0);
}

.articles__article,
.articles__article:before {
    width: calc(var(--base-grid)*25);
    height: calc(var(--base-grid)*25);
}

.articles__link {
    background-color: var(--colour-body-background);
    border: 2px solid var(--colour-background);
    display: block;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
}

.articles__link:after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--base-grid)*3);
    width: calc(var(--base-grid)*2);
    height: calc(var(--base-grid)*2);
    margin-top: calc(var(--base-grid)*-1);
    clip-path: polygon(75% 0,100% 50%,75% 100%,0 100%,25% 50%,0 0);
    -webkit-clip-path: polygon(75% 0,100% 50%,75% 100%,0 100%,25% 50%,0 0);
    background-color: var(--colour-background);
    opacity: 0;
    transition: opacity .5s ease-in,transform .3s ease-in-out 0ms;
}

.articles__content {
    background-color: var(--colour-background);
    color: var(--colour-text);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: calc(var(--base-grid)*2);
    display: flex;
    flex-direction: column;
    border: 2px solid var(--colour-background);
    justify-content: center;
    background-image: url("/Images/hrDep.png");
}

.articles__content--lhs {
    clip-path: polygon(0 0,51% 0,51% 100%,0 100%);
    -webkit-clip-path: polygon(0 0,51% 0,51% 100%,0 100%);
}

.articles__content--rhs {
    clip-path: polygon(50% 0,100% 0,100% 100%,50% 100%);
    -webkit-clip-path: polygon(50% 0,100% 0,100% 100%,50% 100%);
    transition: transform .5s ease-in-out,background-color .4s ease-in-out;
}

.articles__title {
    font-size: calc(var(--base-grid)*3);
    line-height: 1.125;
    font-weight: 700;
    /* letter-spacing: -.01em; */
    text-align: center;
}

.articles__footer {
    margin-top: auto;
    font-size: calc(var(--base-grid)*2);
    line-height: calc(var(--base-grid)*2);
    display: flex;
    justify-content: space-between;
}

.articles__link:hover .articles__content--rhs {
    background-color: var(--colour-background-folded);
    transform: rotateY(-50deg);
}

.articles__link:hover:after {
    opacity: 1;
    transform: translateX(calc(var(--base-grid)*1.5));
    transition: opacity .5s ease-in,transform .3s ease-in-out .25s;
}
/*.glassy {*/
/*    background: rgba(255, 255, 255, 0.2);*/
/*    border-radius: 10px;*/
/*    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);*/
/*    backdrop-filter: blur(10px);*/
/*    -webkit-backdrop-filter: blur(10px);*/
/*    padding: 20px;*/
/*    color: white;*/
/*    text-shadow: 1px 1px 2px black;*/
/*}*/
.glassy{
    background: rgb(255 255 255 / 0%);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
    color: #ffffff;
    text-shadow: 0px 0px 6px black;
    font-weight: 900;
    font-size: 25px !important;
    backdrop-filter: blur(7px) saturate(200%);
    -webkit-backdrop-filter: blur(7px) saturate(200%);
    background-color: rgba(6, 6, 6, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}
.title1 {
    font-size: 35px;
    line-height: 40px;
    font-weight: 900;
    background: linear-gradient(to right, #30cfd0 0, #330867 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
}
.title2 {
    font-size: 30px;
    background: linear-gradient(to right, #f52828 0, #1e9684 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    font-weight: 900;
}
.sidelogo img {
    max-height: 100px;
}

#chart_div {
    position: relative;
    background: linear-gradient(135deg, rgb(255 195 195), rgb(193 212 255));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); /* Subtle shadows */
    border-radius: 10px; /* Rounded corners for a smooth look */
    padding: 20px; /* Padding to ensure chart content is not clipped */
    backdrop-filter: blur(10px); /* Blur effect for the background */
}

#pie_chart_div {
    position: relative;
    background: linear-gradient(135deg, rgb(193 212 255),rgb(255 195 195));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); /* Subtle shadows */
    border-radius: 10px; /* Rounded corners for a smooth look */
    padding: 20px; /* Padding to ensure chart content is not clipped */
    backdrop-filter: blur(10px); /* Blur effect for the background */
}

.highcharts-background {
    fill: rgba(255, 255, 255, 0.0); /* Make the background of the chart transparent */
}

.specialBg{
    position: relative;
    background: linear-gradient(135deg, rgb(193 212 255),rgb(255 195 195));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); /* Subtle shadows */
    border-radius: 10px; /* Rounded corners for a smooth look */
    padding: 20px; /* Padding to ensure chart content is not clipped */
    backdrop-filter: blur(10px); /* Blur effect for the background */
}

.bg-glass{
    backdrop-filter: blur(17px) saturate(119%);
    -webkit-backdrop-filter: blur(17px) saturate(119%);
    background-color: rgba(255, 255, 255, 0.6) !important;
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}