@font-face {
    font-family: popstarpop;
    src: url(../Assets/Fonts/popstarregular-cufonfonts/POPSTAR_pop.TTF);
}

@font-face {
    font-family:pocket_ball;
    src:url(../Assets/Fonts/pocket-ball-cufonfonts/PocketBallCondensed-gVE5.otf);
}

@font-face{
    font-family:nolinga;
    src:url(../Assets/Fonts/Nolinga-Jpv6n.otf);
}
body {
    background: radial-gradient(ellipse 45% 60% at 100% 55%, rgb(95, 116, 255) 5%, rgba(199, 223, 242, 0.432) 100%), url("../Assets/Images/3Dart/Webassets/Website_Background_Scalable_2.png");
    /* background: radial-gradient(circle at 50% 90%, #a9b4ffff, #a9b4ffff); */


    background-size: cover;

    background-repeat: no-repeat;
    background-position-x: center;
    background-blend-mode: multiply, normal;
    margin: 0;
    color: black;
    font-family: nolinga, calibri;
    overflow: hidden;
    max-width: 100vw;
    height: 100vh;
    min-width: 100%;
    z-index: 1;
}

main {
    display: flex;
}

#decals {
    position: absolute;
    min-height: 100vh;
    min-width: 100vw;
    margin: 0px;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

#decal_1 {
    position: absolute;
    bottom: 0px;
    left: 0px;

    min-width: 50%;
    width: 100%;
    transform: scale(1.2, 1.3)translate(0%, 45%);
    z-index: 2;
}

#decal_2 {
    position: absolute;
    top: 0px;
    left: 0px;
    min-width: 50%;
    width: 100%;
    transform: scale(1.4, 1.4) translate(-5%, 12%);
    z-index: 4;
    /* backdrop-filter: blur(2px); */
}



#decal_3 {
    position: absolute;
    bottom: 2em;
    left: 2em;
    z-index: 4;
}

#decal_4 {
    position: absolute;
    transform: rotate(180deg);
    right: 2em;
    top: 2em;
    z-index: 4;
}

#decal_5 {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 220%;
    transform: translate(-25%, 7%);
    z-index: 3;
}

#decal_6 {
    position: absolute;
    bottom: 0px;
    right: 30%;
    height: 150%;
    transform: translate(0%, 28%);
    z-index: 2;
}

#decal_7 {
    position: absolute;
    top: -5vh;
    right: 20%;
    height: 120%;
    /* transform: translate(0%, 28%); */
    z-index: 3;
}

#decal_8 {
    position: absolute;
    height: 100%;
    top: 0px;
    left: 5%;
    /* transform: translate(0%, 28%); */
    z-index: 1;
}

#decal_9 {
    position: absolute;
    left: 50%;
    bottom: 0%;
    height: 100%;
    transform: scale(1.2, 1.2) translate(-40%, 30%) rotate(20deg);
    opacity: 0.9;
    z-index: 0;
}

h1 {
    font-family: popstarpop;
    margin: 0.1em;
}

#Title {
    font-size: 8em;
    position: relative;
    right: -2em;
    top: 0.5em;

}

aside {
    position: relative;
    display: flex;
    flex-direction: column;

    justify-self: end;
    align-self: center;
    margin-left: auto;
    padding: 1em;
    min-width: 20%;
    width: 30%;
    height: fit-content;
    border-radius: 20px;
    background-color: white;
    z-index: 4;
}

header {
    width: 100%;

    height: 10vh;
    display: flex;
    justify-content: flex-start;
    
    /* background: linear-gradient( rgb(241, 251, 255), rgba(157, 239, 233, 0.322)) border-box; */
    /* border-bottom: 1px solid rgb(157, 239,233); */
    /* background:linear-gradient(); */
    /* backdrop-filter: blur(3px); */
    z-index: 10;
}

.goBack {
    position: relative;
    display: flex;
    padding:10px;
    margin: 20px;
    margin-top: 0px;
    height:1.5em;
    background-color: rgb(207, 207, 207);
    text-align: center;
    justify-content: center;
    align-items: center;
    
}
.goBack a{
    font-family: pocket_ball;
    text-decoration: none;
    color:rgb(0, 0, 0);
}
section {
    overflow: scroll;
    position: relative;
    float: left;
    /* left: 30px; */
    margin-left: 5%;
    overflow-x: hidden;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    height: 90vh;
    width: 50vw;
}

section  a {
    text-decoration: none;
}
.card {
    /* Placement & size*/
    margin: auto;
    overflow: hidden;
    /* width:100%; */
    /* Number divided must be equal to placeholder + javascript */
    
    min-height: calc(100%/6);
    height: fit-content;
    /* Format for inner contents */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    font-size: 12pt;


    margin: 0px;
    color:white;

    margin-top:0.5em;
    width: 95%;

}

/* Number divided must be equal to card height + javascript */
/* Glass Styling: Following tutoial by Kevin Powell on Youtube*/


.placeholder {
    background: transparent;
    width: 100%;
    min-height: calc((100%/6)*2);

}
.glass {
    border-radius: 20px;
    --border-width: 2px;
    position: relative;
    background: hsl(176, 72%, 78%, 0.2);
    backdrop-filter: blur(6px);
}
.glass::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    /* background: linear-gradient(hsl(176,72,78) , hsl(0, 0%, 100%)); */
    background: linear-gradient(#d5edff, #4d70f0) border-box;
    border: var(--border-width) solid transparent;
    mask: linear-gradient(black) border-box,
        linear-gradient(black) padding-box;
    mask-composite: subtract;
}


.card_thumbnail {
    display: flex;
    align-content: center;
    max-width:100%;
    max-height:100%;
    padding:10px;
    grid-column: 1/2;
    grid-row: 1/2;
    overflow: hidden;
}
.card_thumbnail>img{
    object-fit: contain;
    margin: auto;
    border-radius: 10px;
    max-height: 100%;
    max-width: 100%;
}

.card_text {
    display: flex;
    flex-direction: column;
    grid-column: 2/6;
    grid-row: 1/2;
    padding-left: 20px;
    padding-right:10px;
}

.card_text h2 {
    font-size: 2.5em;
    margin-top: 0.125em;
    margin-bottom: 0.125em;
    font-family: pocket_ball;
}

.hidden {
    opacity: 0;
    transition: all 0.2s;
}

@media(prefers-reduced-motion) {
    .hidden {
        transition: none;
    }
}



.show {
    opacity: 1;
}

aside h2{
    font-family: pocket_ball;
}
