@import "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css";

:root{
    --accent: #b938c2;
    --light: #ffddea;
    --dark: #2C092F;
    --midtone1: #CAA8F5;
    --midtone2: #9984D4;
}

*:not(h1){
  font-family: 'Rubik', sans-serif;
}

*{
    overflow-wrap: normal;
}

html{
    width: 100%;
    min-height: 100%;
    max-height: fit-content;
    background-color: none;
}

body{
    width: 100%;
    min-height: 100%;
    height: fit-content;
    background-image: url(./img/scroll1.webp);
    background-size: cover;
    animation: backgroundPan 60s linear infinite;
    margin:0;
    padding:0;

}

header{
    overflow: hidden;
    height: fit-content;
    width: 100%;
    background-color: var(--dark);
    color: var(--light);
    font-family: "Sarpanch:wght@900", sans-serif;
}

a{
    color: var(--ligth);
}

a:hover{
    color: var(--accent);
}

.footer{
    background-color: var(--midtone2);
    bottom: 0;
    width: 100%;
    color:var(--dark);
    border-bottom: var(--midtone2) solid;
    box-shadow: 50% 50% 50% var(--accent) in;
}


main{
    margin-top: 3%;
    margin-bottom: 3%;
}

.title {
    justify-content: center; 
    flex-direction: row;
    font-family: "Sarpanch", sans-serif;
    padding-top: 10pt;
    color: var(--light);
    font-size: 70px;
}


#define{
    justify-content: center; 
    flex-direction: row;
}

h4{
    color: var(--dark);
    font-size: 24pt;
    background-color: var(--midtone1);
    font-weight: bold;
}

label {
    font-size: 18pt;
    padding-left: 5pt;
}

main{
    height: fit-content;
    width: 100%;
    margin:3%, 0;
    padding:0;

}
.heading{
    background-color: var(--midtone2);
    color: var(--dark);
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    box-shadow: 0.0125em 0.25em rgb(10, 10, 10/ 10%);
    border-bottom: var(--midtone1) solid;
    margin-bottom: 0%;
    line-height: 3;
    background-color: var(--light);
    border: var(--accent) solid;
    font-weight: 900;
}

h3{
    background-color: var(--midtone2);
    font-size: 17px;
    padding-left: 1%;
    color: var(--light);
}

.ul{
    border: var(--accent) solid;
    border-top: none;
}


.card{
    background-color: var(--midtone1);
}

@keyframes backgroundPan{
    0%   {background-position: 320px -100px;}
    50%  {background-position: 0 -100px;}
    75%  {background-position: -320px -100px;}
    100% {background-position: -680px -100px;}
}

.mContent{
    height: fit-content;
}

section{
    height:100%;
}

#gameFind{
    display: flex;
    flex-flow: column nowrap;
    color: var(--midtone1);
}


#sPlat{
    width: 100%;
}

#sGenre {
    width: 100%;
}

.uInput{
    min-height: 880px;
    border-right: 2px solid var(--midtone1);
    border-right: 2px solid var(--accent);
    height: 690px;
}

.finder{
    height: auto;
    padding-left: 10px;
    padding-right: 4px;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
}

.gamesList{
    height: 60%;
}



#formSubmit{
    background-color: var(--accent);
    padding-left: 10px;
    margin-top: 20px;
    margin-bottom: 25px;
    height: auto;
    line-height: 3.0;
}


#gameImage{
    width: 100%;
    height: 100%;
}

article.article{
    background-color: var(--dark);
}
.box{
    padding-top: 0;
}
#top5{
    background: transparent;
    /* height: 250pt;
    width: 200pt; */
    margin: 0, 2%
}

#gameInfo {
    /* height: 250pt;
    width: 200pt; */
    background: transparent;
}

.info{
    background-color: var(--midtone1);
    margin: 0%;
    border: none;
    line-height: 3;
    padding-left: 5%;
}

#gamePic {
    position: relative;
    right: 20px;
    border: 1pt solid var(--dark);
    height: 100%;
    margin-top: 5%;
    margin-right: 5%;
    padding: .3%;
    border: var(--accent) solid;
    background-color: var(--light);
}


#top-5{
    border: 2pt solid var(--dark);
    height: 250pt;
    width: 200pt;
}


#gameTitle {
    border: 2pt solid var(--dark);
    height: 250pt;
    width: 200pt;

}

.carousel #streams {
    min-height: 250px;
    min-width: 250px;
    margin: 10px
}

iframe {
    padding: 10px;
}

li{
    list-style: none;
    background-color: var(--midtone1);
    border-bottom: var(--dark) solid;

}

footer{
    margin-top: auto;
}
.footer {
    padding: 10px;
    display: flex;
    position: relative;
    text-align: left;
    color: var(--onyx); 
    background-color: var(--midtone2);
    bottom: 0;
    width: 100%;

  }

button{
    border: none;
    min-height: 100%;
    min-width: 100%;
    line-height: 3.0;
    background-color: var(--midtone2);
    color: var(--light);
    
}

/*added button effects */
button:hover{
    background-color: var(--accent);
}


button:active {
    background-color: var(--accent);
    transform: translateY(2px);
  }

.card-header-title{
    color: var(--light);
    border-bottom: var(--accent) solid;
}