/* ### MAIN PAGE STUFF ### */
@font-face{
    font-family: Alan Sans;
    src: url(fonts/Alan_Sans/AlanSans-VariableFont_wght.ttf);
}
@font-face{
    font-family: Ubuntu Mono;
    src: url(fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf);
}
@font-face{
    font-family: Silkscreen;
    src: url(fonts/Silkscreen/Silkscreen-Regular.ttf);
}

*::selection {
  background: #c6c7fd;
  color: #52539e;
}
*::-moz-selection {
  background: #c6c7fd;
  color: #52539e;
}
*::-webkit-selection {
  background: #c6c7fd;
  color: #52539e;
}

body{
    position:relative;
    display:flex;
    flex-direction: column;
    align-items: center;
    background-image: url(images/home/heart-background.png);
    background-size: 21px;
    background-repeat: repeat;
}

#Everything{
    border:3px white solid;
    border-radius:5px;
    outline:#6a6acf 3px dashed;
    background-color: rgb(255,255,255, 0.5);
    display:flex;
    flex-direction: column;
    overflow:hidden;
}

/* +++ Header +++ */

.header-container{
    height:200px;
    width:100%;
    background-image: url(images/home/header/background.gif);
    border-bottom:3px solid white;
    box-shadow:0px 3px 2px rgb(103, 124, 207, 0.5);
    display:flex;
    justify-content:center;
    align-items:center;
}

.header-title{
    width:500px;
    height:auto;
    padding-bottom:20px;
}

#Scroller{
    display:flex;
    overflow:hidden;
    width:950px;
    border-bottom:3px solid white;
    box-shadow:0px 3px 2px rgb(103, 124, 207, 0.5);
}

.header-scroller{
    height:25px;
    display:flex;
    animation: scroll 30s linear infinite;
    animation-play-state:paused;
}

@keyframes scroll{
    from{transform: translateX(100%);}
    to{transform: translateX(-100%);} 
}

#Header img{
    filter: drop-shadow(5px 5px 3px rgb(103, 124, 207, 0.5));
}


/* +++ Sections +++ */
#Main{
    display:flex;
    width:950px;
}

#Header{
    display:flex;
    width:950px;
    align-items:center;
}

#Right{
    width:175px;
    padding-right:5px;
}

#Middle{
    width:550px;
    padding: 0 30px;
}

#Left{
    width:175px;
    padding-left:5px;
}

/* +++ Section Headers +++ */
h3{
    padding: 1px 0;
    border: white solid 2px;
    background-image: linear-gradient(rgb(53, 48, 143),rgb(150, 146, 221), rgb(53, 48, 143));
    font-family: Alan Sans, sans-serif;
    color: white;
    font-weight:500;
    font-size: 17px;
    text-align: center;
    margin-top:2px;
    margin-bottom:8px;
}

#Middle h3{
    border-radius:20px;
    padding: 0 20px;
}

#Right h3{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

#Left h3{
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

h3 img{
    width:24px;
    height:19px;
}

h2{
    font-size:17px;
    margin: 8px 0;
    font-family: Alan Sans, sans-serif;
}

/* +++ Section Containers +++ */
.section-container{
    padding:5px;
    border: #4040ad solid 3px;
    outline: white 2px solid;
    outline-offset: -4px;
    background-image: linear-gradient(rgb(53, 48, 143),rgb(150, 146, 221), rgb(53, 48, 143));
    font-family: "Ubuntu Mono", monospace;
    color:white;
    font-size:14px;
    box-shadow:3px 3px 2px rgb(103, 124, 207, 0.5),
    inset 2px 2px 5px rgba(66, 43, 114, 0.2),
    inset -2px -2px 5px rgba(66, 43, 114, 0.2);
}

.section-container, #Socials{
    margin-bottom:20px;
}

#Left .section-container{
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

#Middle .section-container{
    border-radius: 20px;
}

#Right .section-container{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

#Right .inner-section-container{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.me img{
    padding-left: 5px;
    width: 15px;
    height: 8px;
}

.inner-section-container{
    background-image: linear-gradient(rgba(160, 175, 235, 0.3),#677ccf, #98a9eb, rgba(160, 175, 235, 0.3));
    padding: 8px;
    text-align: center;
    border: white 2px solid;
    box-shadow:
        2px 2px 2px rgb(103, 124, 207, 0.5),
        inset 2px 2px 5px rgb(244, 238, 255, 0.5),
        inset -2px -2px 5px rgb(244, 238, 255, 0.5);
}

#Middle .inner-section-container{
    padding: 8px 20px;
    background-image: linear-gradient(rgb(88, 69, 170), rgba(115, 134, 206, 0.9), rgba(182, 192, 233, 0.859)),
    url(images/home/hearts.gif);
    border-radius:20px;
}

.me{
    font-size: 12px; 
    color:#a7aee8;
}

#Left .inner-section-container{
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.about-me-container{
    padding:5px; 
    text-align:left; 
    border: white, 1px, dashed; 
    outline-offset: -4px;
    border-radius:10px; 
    box-shadow:2px 2px 2px rgb(103, 124, 207, 0.5),
    inset 2px 2px 5px rgba(66, 43, 114, 0.2),
    inset -2px -2px 5px rgba(66, 43, 114, 0.2);
    background-color: rgba(255,255,255,0.1);
    margin-top:8px;
}

.about-me-container h4{
    text-align:center;
}

.about-me-container p{
    margin-top:5px;
    margin-bottom:8px;
}

nav{
    display:flex;
    flex-direction: column;
    gap:12px;
    width:100%;
}

nav h3{
    border:#4040ad 3px solid;
    outline: white 2px solid;
    outline-offset: -4px;
    box-shadow:3px 3px 2px rgb(103, 124, 207, 0.5),
    inset 2px 2px 5px rgba(66, 43, 114, 0.2),
    inset -2px -2px 5px rgba(66, 43, 114, 0.2);
    margin-bottom:0;
}

#Navigation{
    margin-bottom:20px;
}

#Navigation a{
    background-image:
    linear-gradient(to left,rgb(69, 90, 170), rgba(115, 134, 206, 0.8), rgba(200, 209, 244, 0.63));
    background-size: auto, 21px;
    color: white;
    border:#4040ad 3px solid;
    outline: white 2px solid;
    outline-offset: -4px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    font-family: Alan Sans, sans-serif;
    text-align: right;
    font-size:15px;
    padding: 5px;
    box-shadow:3px 3px 2px rgb(103, 124, 207, 0.5),
    inset 2px 2px 5px rgb(244, 238, 255, 0.5),
    inset -2px -2px 5px rgb(244, 238, 255, 0.5);
}

.simp-image img{
    width:155px;
    height:155px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-bottom:8px;
    margin-top:2px;
    box-shadow:
    2px 2px 2px rgb(103, 124, 207, 0.5),
    inset 2px 2px 5px rgb(244, 238, 255, 0.5),
    inset -2px -2px 5px rgb(244, 238, 255, 0.5);
    border: 2px dashed rgb(255, 255, 255);
}

.simp-section-text{
    text-align: center;
}

.simp-section-text p{
    text-align: center;
    margin-bottom:5px;
    margin-top:5px;
}

.simp-section-text span{
    font-size:13px;
    color:rgb(166, 164, 216);
}

#Socials a{
    background-image:
    linear-gradient(to right,rgb(69, 90, 170), rgba(115, 134, 206, 0.8), rgba(200, 209, 244, 0.63));
    background-size: auto, 21px;
    color: white;
    border:#4040ad 3px solid;
    outline: white 2px solid;
    outline-offset: -4px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    font-family: Alan Sans, sans-serif;
    text-align: left;
    font-size:15px;
    padding: 5px;
    box-shadow:3px 3px 2px rgb(103, 124, 207, 0.5),
    inset 2px 2px 5px rgb(244, 238, 255, 0.5),
    inset -2px -2px 5px rgb(244, 238, 255, 0.5);
}

.inspo-links{
    display:flex;
    flex-wrap: wrap;
    gap:3px;
    justify-content: center;
}

.inspo-links img{
    width:65px;
}

.blinkie-container{
    display:flex;
    flex-direction: column;
    align-items: center;
    gap:4px;
}

.blinkie-container img{
    width:150px;
    height:20px;
}

#Music-Box{
    display: flex;
    align-items:center;
    justify-content:center;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

#Title-Box{
    overflow:hidden;
}

#Music-Box p{
    margin:0;
    animation: song-title 6s linear infinite; 
    white-space: nowrap;
}
@keyframes song-title {
    from {transform: translateX(120%);}
    to {transform: translateX(-120%);}
}

.song-cover img{
    width:155px;
    height:155px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    margin-bottom:8px;
    margin-top:2px;
    background-color:grey;
    border: 2px dashed white;
}
.song-button-box{
    z-index:5;
    font-weight:bold;
}
#Play:hover{
    cursor:pointer;
}

#Fav-Song p{
    margin-top:5px;
}

.simp-section-text{
    margin-bottom:5px;
}

#Fav-Song span{
    font-size:13px;
    color:rgb(166, 164, 216);
}

#Fav-Song{
    text-align: center;
}

#Updates h4{
    font-size:15px;
    margin-top:5px;
    margin-bottom:0;
    font-family: Alan Sans, sans-serif;
}

#Newest-Blog h4{
    font-size:15px;
    margin-top:5px;
    margin-bottom:0;
    font-family: Alan Sans, sans-serif;
}

#Newest-Blog p{
    text-align:left;
    font-size: 13px;
}

.about-me-container img{
    width:50px;
    height:50px;
    border:2px white solid;
    border-radius:5px;
    margin-right:20px;
}

#Newest-Blog .inner-section-container{
    display:flex;
    flex-direction: column;
    
    height:300px;
}

#Newest-Blog span{
    text-align:left;
    display:flex;
    margin-top:15px;
    font-size:13px;
    margin-bottom:10px;
}

#Newest-Blog .about-me-container{
    padding:20px;
    border-radius:20px; 
    overflow-y:scroll;
    scrollbar-width: none;
}

.blog-container{
    display:flex;
    gap:10px;
}

#Updates p{
    margin-top:8px;
}

#Updates .inner-section-container{
    overflow-y:scroll;
    height:175px;
    font-size: 13px;
}

.blinkie-container a{
    text-decoration: none;
    margin-bottom:-4px;
}
.artwork{
    display:flex;
}

.artwork a{
    text-decoration: none;
}

.artwork img{
    width:100%;
    height:auto;
    margin:0;
    display:flex;
}

#Newest-Artwork .inner-section-container{
    padding:0;
    overflow:hidden;
}

/* +++ Footer +++ */

footer{
    height:100px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding-top:20px;
    margin-bottom:-15px;
    text-align:center;
    font-family:"Ubuntu Mono", monospace;
    font-size:16px;
    color:#656ca1;
    border-top:3px solid white;
}

/* +++ Decoration +++ */

.decoration{
    position:absolute;
}

.lace{
    background-image: url(images/home/decoration/lace.gif);
    background-repeat: repeat;
    transform: translateY(-14px);
    overflow: hidden;
    display:flex;
}

.lace-footer{
    background-image: url(images/home/decoration/lace.gif);
    background-repeat: repeat;
    transform: translateY(38px);
    overflow: hidden;
    display:flex;
}

.reverse{
    transform:scaleX(-1);
}


/* ### PORTFOLIO PAGE STUFF ### */
#Left-Large{
    width:725px;
    padding: 0 40px;
}
.portfolio-header-container h3{
    border-radius:20px;
    border: 3px #4040ad solid;
    outline: white 2px solid;
    outline-offset: -4px;
    margin-bottom:30px;
}

.portfolio-container h3{
    border-radius:20px;
    border: 3px #4040ad solid;
    outline: white 2px solid;
    outline-offset: -4px;
    margin-bottom:10px;
}

.portfolio-image-container{
    columns:3;
    column-gap:5px;
    margin-bottom:50px;
}   

.blog-image-container img{
    height:200px;
    width:200px;
    object-fit: cover;
    border: 3px #4040ad solid;
    outline: white 2px solid;
    outline-offset: -4px;
    border-radius:10px;
}
.blog-image-container{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
}

.portfolio-project-container{
    display:flex;
    flex-wrap: wrap;
    justify-content:center;
    gap:5px;
}

.portfolio-image-container img{
    display:block;
    break-inside: avoid;
    margin-bottom:5px;
    width:220px;
    height:100%;
    border: 3px #4040ad solid;
    outline: white 2px solid;
    outline-offset: -4px;
    justify-self: center;
}

.portfolio-project-container img{
    display:block;
    break-inside: avoid;
    width:auto;
    height:250px;
    border: 3px #4040ad solid;
    outline: white 2px solid;
    outline-offset: -4px;
    justify-self: center;
}

.portfolio-container h2{
    color: #4040ad;
    text-align: center;
}

#Left-Large .section-container{
    border-radius: 20px;
    margin-top:20px;
    margin-bottom:50px;
}

#Left-Large .inner-section-container{
    border-radius: 20px;
}

#Left-Large p{
    text-align:left;
    padding: 0 10px;
}

p a{
    color:white;
}

.single-image img{
    height:350px;
}

#Left-Large hr{
    border:3px #4040ad solid;
    margin-bottom:30px;
}

#Middle hr{
    border: 1px white solid;
}

/* +++ Character Stuff +++ */

/* NiGHTs used as base */
.characters-container{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    overflow:hidden;
    position:relative;
    margin-top:10px;
    margin-bottom:20px;
    height:300px;
    background-image:linear-gradient(to right, rgb(40, 38, 103),  rgb(102, 97, 200),  rgb(139, 135, 215));
    border: white 3px solid;
    outline: #221ea3 3px solid;
    border-radius:20px;
}
.characters-container::after{
    position:absolute;
    content:' ';
    height:10px;
    bottom:0;
    left:0;
    right:0;
    background:linear-gradient(to top, rgba(255,255,255,0.5),rgba(255,255,255,0.2), transparent);        
}
.characters-container::before{
    position:absolute;
    content:' ';
    height:10px;
    top:0;
    left:0;
    right:0;
    background:linear-gradient(to bottom, rgba(56, 36, 145, 0.5),rgba(58, 36, 145, 0.2), transparent);
    z-index:3;
}

#Sonic .characters-container{
    background-image:linear-gradient(to right, rgb(38, 66, 103),  rgb(97, 126, 200),  rgb(135, 168, 215));
    outline: #1e58a3 3px solid;
}
#Sonic .characters-container::before{
    background:linear-gradient(to bottom, rgba(36, 109, 145, 0.5),rgba(36, 94, 145, 0.2), transparent);
}

#Silver .characters-container{
    background-image:linear-gradient(to right, rgb(137, 107, 35),  rgb(200, 162, 97),  rgb(215, 186, 135));
    outline: #a3791e 3px solid;
}
#Silver .characters-container::before{
    background:linear-gradient(to bottom, rgba(145, 116, 36, 0.5),rgba(145, 105, 36, 0.2), transparent);
}

#Rin-Len .characters-container{
    background-image:linear-gradient(to right, rgb(36, 111, 124),  rgb(97, 193, 200),  rgb(135, 215, 215));
    outline: #1e9ca3 3px solid;
}
#Rin-Len .characters-container::before{
    background:linear-gradient(to bottom, rgba(36, 145, 134, 0.5),rgba(36, 143, 145, 0.2), transparent);
}

#Luka .characters-container{
    background-image:linear-gradient(to right, rgb(36, 94, 124),  rgb(97, 171, 200),  rgb(135, 184, 215));
    outline: #1e6ca3 3px solid;
}
#Luka .characters-container::before{
    background:linear-gradient(to bottom, rgba(36, 123, 145, 0.5),rgba(36, 109, 145, 0.2), transparent);
}

#Madoka .characters-container{
    background-image:linear-gradient(to right, rgb(124, 36, 83),  rgb(200, 97, 148),  rgb(215, 135, 175));
    outline: #a31e56 3px solid;

}
#Madoka .characters-container::before{
    background:linear-gradient(to bottom, rgba(145, 36, 83, 0.5),rgba(145, 36, 83, 0.2), transparent);
}

#Homura .characters-container{
    background-image:linear-gradient(to right, rgb(83, 36, 124),  rgb(152, 97, 200),  rgb(170, 135, 215));
    outline: #601ea3 3px solid;
}
#Homura .characters-container::before{
    background:linear-gradient(to bottom, rgba(101, 36, 145, 0.5),rgba(112, 36, 145, 0.2), transparent);
}

#Junko .characters-container{
    background-image:linear-gradient(to right, rgb(124, 36, 55),  rgb(200, 97, 130),  rgb(215, 135, 160));
    outline: #a31e46 3px solid;
}
#Junko .characters-container::before{
    background:linear-gradient(to bottom, rgba(145, 36, 74, 0.5),rgba(145, 36, 71, 0.2), transparent);
}

#Narancia .characters-container{
    background-image:linear-gradient(to right, rgb(84, 36, 124),  rgb(160, 97, 200),  rgb(190, 135, 215));
    outline: #651ea3 3px solid;
}
#Narancia .characters-container::before{
    background:linear-gradient(to bottom, rgba(101, 36, 145, 0.5),rgba(101, 36, 145, 0.2), transparent);
}

#Fugo .characters-container{
    background-image:linear-gradient(to right, rgb(40, 36, 124),  rgb(102, 97, 200),  rgb(135, 139, 215));
    outline: #1e20a3 3px solid;
}
#Fugo .characters-container::before{
    background:linear-gradient(to bottom, rgba(52, 36, 145, 0.5),rgba(49, 36, 145, 0.2), transparent);
}

#Chung .characters-container{
    background-image:linear-gradient(to right, rgb(36, 95, 124),  rgb(97, 169, 200),  rgb(135, 191, 215));
    outline: #1e86a3 3px solid;
}
#Chung .characters-container::before{
    background:linear-gradient(to bottom, rgba(36, 118, 145, 0.5),rgba(36, 125, 145, 0.2), transparent);
}

#Komaeda .characters-container{
    background-image:linear-gradient(to right, rgb(36, 124, 92),  rgb(72, 176, 134),  rgb(135, 215, 174));
    outline: #1ea377 3px solid;
}
#Komaeda .characters-container::before{
    background:linear-gradient(to bottom, rgba(36, 145, 89, 0.5),rgba(36, 145, 85, 0.2), transparent);
}

#Hinata .characters-container{
    background-image:linear-gradient(to right, rgb(78, 124, 36),  rgb(136, 175, 72),  rgb(174, 215, 135));
    outline: #5ca31e 3px solid;
}
#Hinata .characters-container::before{
    background:linear-gradient(to bottom, rgba(85, 145, 36, 0.5),rgba(96, 145, 36, 0.2), transparent);
}

#Grace .characters-container{
    background-image:linear-gradient(to right, rgb(124, 36, 115),  rgb(175, 72, 166),  rgb(215, 135, 206));
    outline: #a31ea3 3px solid;
}
#Grace .characters-container::before{
    background:linear-gradient(to bottom, rgba(145, 36, 143, 0.5),rgba(145, 36, 140, 0.2), transparent);
}

#Kazuya .characters-container{
    background-image:linear-gradient(to right, rgb(36, 37, 124),  rgb(77, 72, 175),  rgb(144, 135, 215));
    outline: #1e30a3 3px solid;
}
#Kazuya .characters-container::before{
    background:linear-gradient(to bottom, rgba(36, 43, 145, 0.5),rgba(40, 36, 145, 0.2), transparent);
}

#Atsuro .characters-container{
    background-image:linear-gradient(to right, rgb(124, 61, 36),  rgb(175, 101, 72),  rgb(215, 158, 135));
    outline: #a34d1e 3px solid;
}
#Atsuro .characters-container::before{
    background:linear-gradient(to bottom, rgba(145, 71, 36, 0.5),rgba(145, 63, 36, 0.2), transparent);
}

#Naoya .characters-container{
    background-image:linear-gradient(to right, rgb(124, 36, 36),  rgb(175, 72, 72),  rgb(215, 135, 135));
    outline: #a31e1e 3px solid;
}
#Naoya .characters-container::before{
    background:linear-gradient(to bottom, rgba(145, 36, 36, 0.5),rgba(145, 36, 36, 0.2), transparent);
}

#Hibiki .characters-container{
    background-image:linear-gradient(to right, rgb(36, 93, 124),  rgb(72, 135, 175),  rgb(135, 179, 215));
    outline: #1e86a3 3px solid;
}
#Hibiki .characters-container::before{
    background:linear-gradient(to bottom, rgba(36, 112, 145, 0.5),rgba(36, 112, 145, 0.2), transparent);
}

#Yamato .characters-container{
    background-image:linear-gradient(to right, rgb(124, 115, 36),  rgb(175, 165, 72),  rgb(215, 210, 135));
    outline: #a3961e 3px solid;
}
#Yamato .characters-container::before{
    background:linear-gradient(to bottom, rgba(145, 134, 36, 0.5),rgba(145, 134, 36, 0.2), transparent);
}

#Sora .characters-container{
    background-image:linear-gradient(to right, rgb(36, 52, 124),  rgb(72, 108, 175),  rgb(135, 160, 215));
    outline: #1e4da3 3px solid;
}
#Sora .characters-container::before{
    background:linear-gradient(to bottom, rgba(36, 81, 145, 0.5),rgba(36, 81, 145, 0.2), transparent);
}

#Riku .characters-container{
    background-image:linear-gradient(to right, rgb(36, 124, 111),  rgb(72, 175, 149),  rgb(135, 215, 198));
    outline: #1ea388 3px solid;
}
#Riku .characters-container::before{
    background:linear-gradient(to bottom, rgba(36, 145, 125, 0.5),rgba(36, 145, 129, 0.2), transparent);
}

#Venti .characters-container{
    background-image:linear-gradient(to right, rgb(36, 124, 84),  rgb(72, 175, 118),  rgb(135, 215, 163));
    outline: #1ea363 3px solid;
}
#Venti .characters-container::before{
    background:linear-gradient(to bottom, rgba(36, 145, 96, 0.5),rgba(36, 145, 96, 0.2), transparent);
}

#Kinich .characters-container{
    background-image:linear-gradient(to right, rgb(68, 124, 36),  rgb(106, 175, 72),  rgb(162, 215, 135));
    outline: #4fa31e 3px solid;
}
#Kinich .characters-container::before{
    background:linear-gradient(to bottom, rgba(78, 145, 36, 0.5),rgba(71, 145, 36, 0.2), transparent);
}

#Ajaw .characters-container{
    background-image:linear-gradient(to right, rgb(25, 107, 15),  rgb(41, 146, 27), rgb(71, 190, 55));
    outline: #147e04 3px solid;
}
#Ajaw .characters-container::before{
    background:linear-gradient(to bottom, rgba(27, 127, 16, 0.5),rgba(16, 149, 21, 0.2), transparent);
}


.character-header{
    font-family:"Silkscreen", sans-serif;
    color:rgb(255, 255, 255);
    font-size:50px;
    z-index:1;
    padding-left:10px;
    background-image:linear-gradient(to right, rgba(255,255,255,0.5), rgba(255,255,255,0.2  ), transparent);
    width:max-content;
}

.series-header{
    font-family:"Silkscreen", sans-serif;
    color:rgb(174, 172, 186);
    font-size:15px;
    padding-left:20px;
    padding-bottom:10px;
    z-index:1;
}

.character-header span{
    z-index:1;
}

.background-image{
    position:absolute;
    object-fit:cover;
    top:0;
    width:80%;
    height:80%;
    mask-image:linear-gradient(to bottom, black 30%, transparent);
    mix-blend-mode: luminosity; 
}

/* +++ Game Stuff Page +++ */
.game-cover{
    display:flex;
    align-items: center;
}

.game-cover img{
    width:150px;
    border-radius:10px;
    border: 3px #4040ad solid;
    outline: white 2px solid;
    outline-offset: -5px;
    margin:20px;
}

.game-info{
    display:flex;
    flex-direction: column;
    gap:15px;
    position:relative;
    z-index: 3;
}
.game-info span{
    margin:0;
    padding:4px;
    color:#32325e;
    font-size:18px;
    font-family: "Ubuntu Mono", monospace;
    background-image: linear-gradient(to right, rgb(255, 255, 255),rgb(255, 255, 255, 0.4),rgb(255, 255, 255, 0.2), rgb(255, 255, 255, 0));
}

.game-info span::before{ /* ngl these pseudo thingies are kinda wild */
    content:'';
    vertical-align:middle;
    border-left: #4040ad 3px solid;
    padding-right:10px;
    margin-left:-4px;
}

.game-info p{
    margin:0;
}

#Game-Cards .section-container{
    padding-right:110px;
    position:relative;
    overflow:hidden;
    margin-top:10px;
}

#Game-Cards .inner-section-container{
    text-align:left;
}

.thoughts{   
    padding-left:10px;
}

.thoughts h4{
    font-size:18px;
    margin:10px;
    font-weight:400;
    color:#32325e;
    background-image: linear-gradient(to right, rgb(255, 255, 255),rgb(255, 255, 255, 0.1),rgb(255, 255, 255, 0), rgb(255, 255, 255, 0));
    padding-left:10px;
}

.thoughts h4::before{
    content: '';
    border-left: #4040ad 3px solid;
    padding-right:10px;
    margin-left:-10px;
}

#Game-Cards .about-me-container{
    margin-left:20px;
    margin-right:20px;
    position: relative;
    z-index: 3;
}

#Game-Cards .inner-section-container{
    margin-left:20px;
    margin-bottom:20px;
    position: relative;
    z-index: 3;
    background-image: linear-gradient(rgba(160, 175, 235, 0.3),rgba(103, 124, 207,0.9),rgba(152, 169, 235,0.9), rgba(160, 175, 235, 0.3));
}

.game-side-pics{
    position:absolute;
    z-index: 1;
    mix-blend-mode: luminosity; 
}

#Game-Cards h3{
    margin-bottom:5px;
}

.songs img{
    position:absolute;
    width:40%;
    top:-10%;
    right:0;
    mask-image:linear-gradient(to right, transparent 0%, rgb(102, 97, 200));
    mix-blend-mode: normal;
    filter:brightness(80%);
    transform: translateX(10px);
    border-radius: 20px;
}

#Lapis, #Angelic-Layer, #Quasar, #Shylph, #Clione, #Love-Is-Eternity, #Dreamin, #Happy, #Amazing-Mighty, #Bookmaker,
#Silent-Echochamber, #Finorza, #Heaven, #Daydream-Cafe, #Get-Free, #Live-Fast-Die-Young, #Meltdown, #Promise, #Magnet, 
#Denkoh-Sekka, #Bring-It-On, #Luka-Luka, #Conflict, #Conflict-Remix, #Synthesis, #Lumivoyage, #Back-To-The-Gate, #Gate-Openerz,
#Pixel-Diver, #Wingless, #All-My-Friends, #Under-Mebius, #Raise-Your-Hands, #Logos, #Revive, #Candy-Spaceship, #Valkyrie-Assault,
#C18H27N03{
    position:relative;
    overflow:hidden;
    padding:0;
}

#Music-Cards .section-container{
    margin-bottom:10px;
}

#Music-Cards h3{
    margin-bottom:5px;
}

#Music-Cards .section-container{
    margin-top:0;
    margin-bottom:20px;
}

#Conventions .section-container{
    margin-bottom:20px;
}

#Conventions h3{
    margin-bottom:5px;
}

#Conventions hr{
    margin-top:50px;
    margin-bottom:50px;
}

#Conventions a{
    color:white;
    text-decoration: none;
}