@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}
@keyframes rainbow {
    0%   { color: hsl(172, 80%, 50%); }
    50%  { color: hsl(272, 100%, 75%); }
    100% { color: hsl(172, 80%, 50%); }
}
:root {
    --text: rgb(244, 228, 255);
    --background: rgba(21, 2, 37);
    --primary: rgba(189, 108, 255,);
    --secondary: rgba(164, 11, 81);
    --accent: rgba(242, 49, 63);
    --containerbg: rgba(189, 108, 255, 0.5);
     font-family: Inter, sans-serif;
     font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
* {
    margin: 0;
    box-sizing: border-box;
}
/* link color */
a:link {
    color: var(--secondary);
}

/* visited link */
a:visited {
    color: var(--primary);
}

/* mouse over link */
a:hover {
    color: var(--accent);
}

/* selected link */
a:active {
    color: var(--background);
}
body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-content: center;
    background-image: url('src/Images/PinkJapaneseBG.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    align-items: center;
    justify-content: flex-start; 
    padding: 15px;
}
.welcometxt { 
    animation-name: rainbow;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    letter-spacing: .1em;
    text-shadow: 0 -1px 0 #fff, 0 1px 0 #ffffff, 0 2px 0 #e4e4e4, 0 3px 0 rgb(217, 217, 217), 0 4px 0 #9b9b9b, 0 5px 0 #828282, 0 6px 0 #6f6f6f, 0 7px 0 #4f4f4f, 0 8px 0 #454545, 0 9px 0 #363636, 0 10px 0 #2d2d2d, 0 11px 0 #1b1b1b, 0 12px 0 #0f0f0f, 0 13px 0 #0a0a0a, 0 14px 0 #000000, 0 15px 0 #000000, 0 22px 30px rgb(0, 0, 0);
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}
h2 { 
    color: var(--text);
    font-size: medium;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}
.container { 
    display: flex;
    flex-wrap: wrap;
    background-color:  var(--containerbg);
    border: 2px solid rgb(26, 230, 204);
    border-radius: 12px;
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(5px) saturate(180%);
    padding: 20px;
    margin: 15px;
    max-width: 1000px;
}
.welcome {
    text-align: center;
}
.titletext {
    color: var(--text);
}
.item {
    margin:15px;
    flex: 1;
}
.imagebox img {
    border: 3px solid rgb(26, 230, 204);
    border-radius: 12px;
    margin: 3px;
}
.imagebox {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}
.songs {
    text-align: center;
    position: relative;
}
.tangertxt {
    position: absolute;
    left: 130px;
    bottom: 175px;
    transform: translate(-50%, -50%);
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
.hphtxt {
    position: absolute;
    left: 287px;
    bottom: 175px;
    transform: translate(-50%, -50%);
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
.kgctxt {
    position: absolute;
    left: 450px;
    bottom: 175px;
    transform: translate(-50%, -50%);
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
.femttxt {
    position: absolute;
    left: 610px;
    bottom: 175px;
    transform: translate(-50%, -50%);
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */ 
}
.c418txt {
    position: absolute;
    left: 770px;
    bottom: 175px;
    transform: translate(-50%, -50%);
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
.adotxt {
    position: absolute;
    left: 130px;
    bottom: 15px;
    transform: translate(-50%, -50%);
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
.kinggnutxt {
    position: absolute;
    left: 287px;
    bottom: 15px;
    transform: translate(-50%, -50%);
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */ 
}
.omoritxt {
    position: absolute;
    left: 450px;
    bottom: 15px;
    transform: translate(-50%, -50%);
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */ 
}
.creepynutstxt {
    position: absolute;
    left: 610px;
    bottom: 15px;
    transform: translate(-50%, -50%);
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */ 
}
.calamitytxt {
    position: absolute;
    left: 770px;
    bottom: 15px;
    transform: translate(-50%, -50%);
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */ 
}