body{
    overflow-x: hidden;
    background-color: #d1d5db;
    position: relative;
    overflow-x: hidden;
    margin: 0;
    background-image: radial-gradient(rgba(0, 0, 0, 0.25) 1px, transparent 0);
    background-size: 40px 40px;
    user-select: text;
}


#background{
    animation: color-cycle 60s infinite forwards;
    top: -100vmax;
    left: -100vmax;
    position: fixed;
    z-index: -100;
    height: 500vmax;
    width: 500vmax;
    border-radius: 100vmax;
    /* background-image: conic-gradient(from 0deg at 50% 50%, #412731FF 0%, #26353d 20%, #1C4A3FFF 40%, #1E2D55FF 60%, #2E113BFF 80%, #412731FF 100%); */
    background-image: conic-gradient(from 0deg at 50% 50%, #4F343EFF 0%, #43284FFF 20%, #414E70FF 40%, #2D5049FF 60%, #374850FF 80%, #4F343EFF 100%);
    filter: grayscale(50%);
    transform-origin: center;
}

.category > h1 {
    height: min-content;
    flex-grow: 0;
    margin: 0;
}

.category{
    display: grid;
    justify-content: space-around;
    flex-direction: column;
    grid-template-columns: repeat(2, 1fr);
}

.highlight{
    border-radius: 2vw;
    margin: 2vw;
    padding: 5vmin;
    position: relative;
    min-height: min-content;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 40px;
    overflow: hidden; /* Crucial for containing the shine */
    transition: transform 0.3s ease, border-color 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

@keyframes color-cycle {
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

.highlight-inverted{
    text-align: right;
}


.highlight-table {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    margin-top: 2vmax;
    display: grid;
    min-height: 10vmin;
    column-count: 2;
    gap: 20px;
    grid-auto-rows: 1fr;
}

.highlight-table-item {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #2A3439;
    color: #fafafc;
    text-align: left;
    display: grid;
    border-radius: 2vw;
    padding: 2vmax;
}

.highlight-item-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10vh;
}


.read-font{
  font-family: "Google Sans Code", monospace;
  font-optical-sizing: auto;
  font-weight: 10;
  font-style: normal;
}

.h-t-i-title {
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 5vmin;
    margin-top: 1vmin;
}

.h-t-i-text{
    margin: 1vmax;
}

.h-t-i-img{
    filter: invert(75%) sepia(76%) saturate(1537%) hue-rotate(359deg) brightness(102%) contrast(107%);    width: 10vmin;
    justify-self: center;
    object-fit: contain;
    height: 10vmax;
    aspect-ratio: initial;
}

.highlight-table-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);

}

.highlight-title{
    margin: 2vw;
    text-transform: uppercase;
    font-size: xx-large;
    color: #fafafc;
}

.highlight-subtitle{
    margin: 2vw;
    font-size: xx-large;
    color: #feca00;
}

.highlight-text{
    margin: 2vw;
    margin-top: 5vmax;
    font-size: large;
    color: #fafafc;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.highlight-icon{
    position: absolute;
    top: 1vh;
    right: 2vw;
    filter: invert(75%) sepia(76%) saturate(1537%) hue-rotate(359deg) brightness(102%) contrast(107%);
}

.highlight-icon-inverted{
    position: absolute;
    top: 0.5vh;
    left: 1vw;
    filter: invert(75%) sepia(76%) saturate(1537%) hue-rotate(359deg) brightness(102%) contrast(107%);
}

.highlight-icon > img{
    height: 10vmax;
}

.highlight-icon-inverted > img{
    height: 10vmax;
}

.logo-ext{
    filter: grayscale(100%) brightness(200%);
    width: 10vmax;
}

.parsec-font {
  font-family: "Bruno Ace SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

hr{
    border: none;
}

#contact{
    width: 100vw;
    left: 0;
    position: relative;
    bottom: 0;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0), #1e4e7a);
}

#contact > .highlight{
    position: relative;
    border: none;
    box-shadow: none;
    background-image: none;
    margin: 0;
    margin-left: -1vmin;
}



#imgLogo{
    right: 3vmax;
    top: 5vmax;
    filter: none;
    object-fit: contain;
    filter: drop-shadow(5px 5px 5px #222);
}

#parsecLogo{
    display: none;
}

.center{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

#parsec-img{
    display: none;
}

#parsec-text{
    animation: loading_strobe 2s infinite alternate;
    width: 80vw;
}

@media only screen and (max-width: 1070px) {
    .category{
        display: flex;
    }
    #parsecLogoText{
        display: none;
    }
    #parsecLogo{
        display: block;
    }
    .highlight-table{
        grid-template-columns: repeat(2, 1fr);
    }
    .center > #parsec-text {
        display: none;
    }
    .center > #parsec-img {
        display: block;
        width: 50vmin;
        animation: pie-reveal 10s infinite linear;
    }
}

 @media only screen and (max-width: 600px) 
 {
    .highlight-table{
        grid-template-columns: repeat(1, 1fr);
    }    
 }

 
@keyframes pie-reveal {
    0%{mask: conic-gradient(#000 0deg,   transparent 0deg);}
    1%{mask: conic-gradient(#000 7deg,   transparent 0deg);}
    2%{mask: conic-gradient(#000 14deg,   transparent 0deg);}
    3%{mask: conic-gradient(#000 21deg,   transparent 0deg);}
    4%{mask: conic-gradient(#000 28deg,   transparent 0deg);}
    5%{mask: conic-gradient(#000 35deg,   transparent 0deg);}
    6%{mask: conic-gradient(#000 42deg,   transparent 0deg);}
    7%{mask: conic-gradient(#000 49deg,   transparent 0deg);}
    8%{mask: conic-gradient(#000 56deg,   transparent 0deg);}
    9%{mask: conic-gradient(#000 63deg,   transparent 0deg);}
    10%{mask: conic-gradient(#000 70deg,   transparent 0deg);}
    11%{mask: conic-gradient(#000 77deg,   transparent 0deg);}
    12%{mask: conic-gradient(#000 84deg,   transparent 0deg);}
    13%{mask: conic-gradient(#000 91deg,   transparent 0deg);}
    14%{mask: conic-gradient(#000 98deg,   transparent 0deg);}
    15%{mask: conic-gradient(#000 105deg,   transparent 0deg);}
    16%{mask: conic-gradient(#000 112deg,   transparent 0deg);}
    17%{mask: conic-gradient(#000 119deg,   transparent 0deg);}
    18%{mask: conic-gradient(#000 126deg,   transparent 0deg);}
    19%{mask: conic-gradient(#000 133deg,   transparent 0deg);}
    20%{mask: conic-gradient(#000 140deg,   transparent 0deg);}
    21%{mask: conic-gradient(#000 147deg,   transparent 0deg);}
    22%{mask: conic-gradient(#000 154deg,   transparent 0deg);}
    23%{mask: conic-gradient(#000 161deg,   transparent 0deg);}
    24%{mask: conic-gradient(#000 168deg,   transparent 0deg);}
    25%{mask: conic-gradient(#000 175deg,   transparent 0deg);}
    26%{mask: conic-gradient(#000 182deg,   transparent 0deg);}
    27%{mask: conic-gradient(#000 189deg,   transparent 0deg);}
    28%{mask: conic-gradient(#000 196deg,   transparent 0deg);}
    29%{mask: conic-gradient(#000 203deg,   transparent 0deg);}
    30%{mask: conic-gradient(#000 210deg,   transparent 0deg);}
    31%{mask: conic-gradient(#000 217deg,   transparent 0deg);}
    32%{mask: conic-gradient(#000 224deg,   transparent 0deg);}
    33%{mask: conic-gradient(#000 231deg,   transparent 0deg);}
    34%{mask: conic-gradient(#000 238deg,   transparent 0deg);}
    35%{mask: conic-gradient(#000 245deg,   transparent 0deg);}
    36%{mask: conic-gradient(#000 252deg,   transparent 0deg);}
    37%{mask: conic-gradient(#000 260deg,   transparent 0deg);}
    38%{mask: conic-gradient(#000 267deg,   transparent 0deg);}
    39%{mask: conic-gradient(#000 274deg,   transparent 0deg);}
    40%{mask: conic-gradient(#000 281deg,   transparent 0deg);}
    41%{mask: conic-gradient(#000 288deg,   transparent 0deg);}
    42%{mask: conic-gradient(#000 295deg,   transparent 0deg);}
    43%{mask: conic-gradient(#000 302deg,   transparent 0deg);}
    44%{mask: conic-gradient(#000 310deg,   transparent 0deg);}
    45%{mask: conic-gradient(#000 318deg,   transparent 0deg);}
    46%{mask: conic-gradient(#000 324deg,   transparent 0deg);}
    47%{mask: conic-gradient(#000 334deg,   transparent 0deg);}
    48%{mask: conic-gradient(#000 341deg,   transparent 0deg);}
    49%{mask: conic-gradient(#000 350deg,   transparent 0deg);}    /* --- HIDE PHASE (50% to 100% of time) --- */
    /* We shift the start of the gradient to "empty" the circle */
    50%{mask: conic-gradient(transparent 0deg,   #000 0deg);}
    51%{mask: conic-gradient(transparent 7deg,   #000 0deg);}
    52%{mask: conic-gradient(transparent 14deg,   #000 0deg);}
    53%{mask: conic-gradient(transparent 21deg,   #000 0deg);}
    54%{mask: conic-gradient(transparent 28deg,   #000 0deg);}
    55%{mask: conic-gradient(transparent 35deg,   #000 0deg);}
    56%{mask: conic-gradient(transparent 42deg,   #000 0deg);}
    57%{mask: conic-gradient(transparent 49deg,   #000 0deg);}
    58%{mask: conic-gradient(transparent 56deg,   #000 0deg);}
    59%{mask: conic-gradient(transparent 63deg,   #000 0deg);}
    60%{mask: conic-gradient(transparent 70deg,   #000 0deg);}
    61%{mask: conic-gradient(transparent 77deg,   #000 0deg);}
    62%{mask: conic-gradient(transparent 84deg,   #000 0deg);}
    63%{mask: conic-gradient(transparent 91deg,   #000 0deg);}
    64%{mask: conic-gradient(transparent 98deg,   #000 0deg);}
    65%{mask: conic-gradient(transparent 105deg,   #000 0deg);}
    66%{mask: conic-gradient(transparent 112deg,   #000 0deg);}
    67%{mask: conic-gradient(transparent 119deg,   #000 0deg);}
    68%{mask: conic-gradient(transparent 126deg,   #000 0deg);}
    69%{mask: conic-gradient(transparent 133deg,   #000 0deg);}
    70%{mask: conic-gradient(transparent 140deg,   #000 0deg);}
    71%{mask: conic-gradient(transparent 147deg,   #000 0deg);}
    72%{mask: conic-gradient(transparent 154deg,   #000 0deg);}
    73%{mask: conic-gradient(transparent 161deg,   #000 0deg);}
    74%{mask: conic-gradient(transparent 168deg,   #000 0deg);}
    75%{mask: conic-gradient(transparent 175deg,   #000 0deg);}
    76%{mask: conic-gradient(transparent 182deg,   #000 0deg);}
    77%{mask: conic-gradient(transparent 189deg,   #000 0deg);}
    78%{mask: conic-gradient(transparent 196deg,   #000 0deg);}
    79%{mask: conic-gradient(transparent 203deg,   #000 0deg);}
    80%{mask: conic-gradient(transparent 210deg,   #000 0deg);}
    81%{mask: conic-gradient(transparent 217deg,   #000 0deg);}
    82%{mask: conic-gradient(transparent 224deg,   #000 0deg);}
    83%{mask: conic-gradient(transparent 231deg,   #000 0deg);}
    84%{mask: conic-gradient(transparent 238deg,   #000 0deg);}
    85%{mask: conic-gradient(transparent 245deg,   #000 0deg);}
    86%{mask: conic-gradient(transparent 252deg,   #000 0deg);}
    87%{mask: conic-gradient(transparent 259deg,   #000 0deg);}
    88%{mask: conic-gradient(transparent 266deg,   #000 0deg);}
    89%{mask: conic-gradient(transparent 273deg,   #000 0deg);}
    90%{mask: conic-gradient(transparent 280deg,   #000 0deg);}
    91%{mask: conic-gradient(transparent 287deg,   #000 0deg);}
    92%{mask: conic-gradient(transparent 294deg,   #000 0deg);}
    93%{mask: conic-gradient(transparent 301deg,   #000 0deg);}
    94%{mask: conic-gradient(transparent 308deg,   #000 0deg);}
    95%{mask: conic-gradient(transparent 315deg,   #000 0deg);}
    96%{mask: conic-gradient(transparent 322deg,   #000 0deg);}
    97%{mask: conic-gradient(transparent 329deg,   #000 0deg);}
    98%{mask: conic-gradient(transparent 336deg,   #000 0deg);}
    99%{mask: conic-gradient(transparent 343deg,   #000 0deg);}
    100%{mask: conic-gradient(transparent 350deg,   #000 0deg);} }

@keyframes loading_strobe {
    0%{filter: opacity(1);}
    100%{filter: opacity(0);}
}