@font-face {
    font-family: 'daydream';
    src: url('fonts/daydream.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'kiwi';
    src: url('fonts/KiwiSoda.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'pixel-love';
    src: url('fonts/pixel-love.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'cursive';
    src: url(fonts/Cursive.ttf);
}

@font-face {
    font-family: 'exepixelperfect';
    src: url(fonts/EXEPixelPerfect.ttf);
}

body{
    background-image: url('images/baltimore-convention-center-1680x0-c-default.jpg');
    background-size: cover;
    background-attachment: fixed;
    overflow-y: hidden;
    overflow-x: hidden;
}

.wrapper{
    width:98vw;
    height:45vw;
    margin-left:auto;
    margin-right:auto;
}

.button-link{
    padding: 0;
    margin: 0;
    text-decoration: none;
}

.flex-row{
    display:flex;
    flex-direction:row;
}

.flex-column{
    display:flex;
    flex-direction:column;
}

.header{
    display:flex;
    width:98vw;
    flex-direction: row-reverse;
    position:absolute;
    align-items: center;
    align-content: center;
}

.header h1{
    font-family: 'kiwi';
    margin:0;
    font-size: 6vw;
    color: #af3c66;
}

p{
    font-family: exepixelperfect;
    margin:0;
    font-size: 2vw;
    color: #af3c66;
}

ul{ 
    font-family: exepixelperfect;
    margin:0;
    font-size: 2vw;
    color: #af3c66;
    list-style-type:disc;
    padding:0;
}

li{
    margin-left: 2vw;
}

.pop-up-overlay{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color: rgba(0, 0, 0, 0.799);
    visibility: hidden;
}

.pop-up-content{
    margin-left:15vw;
    margin-top: 2vw;
}

.comic-display{
    width: min-content;
    display:flex;
    flex-direction: row;
}

.comic-control-container{
    display:flex;
    flex-direction:column;
    border: solid red 0.5vw;
}

.button{
    border: none;
    outline:none;
    text-decoration: none;
    background-color: none;
    margin-left: 1vw;
    margin-bottom: 1vw;
    padding: 0;
    padding-bottom: 0;
    height: min-content;
}

.comic-control{
    background-color: antiquewhite;
    border-radius: 4px;
    font-family: exepixelperfect;
    font-size:1.5vw;
    margin:1vw;
}

.comic-control:hover{
    cursor: pointer;
    background-color: #f8e1e9;
}

.button:hover{
    cursor: pointer;
}

.button img {
    height:30vw;
    margin: none;
    display: block;
}

.comicbook-scroller::-webkit-scrollbar {
  width: var(--sb-size)
}

.comicbook-scroller::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 1px;
}

.comicbook-scroller::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 1px;
  
}

.oneshot-scroller::-webkit-scrollbar {
  width: var(--sb-size)
}

.oneshot-scroller::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 1px;
}

.oneshot-scroller::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 1px;
  
}
.comicbook-scroller{
    height:50vw;
   width: auto;
   padding:2vw;
   padding-top: 1vw;
   padding-bottom: 0vw;
   overflow-y: scroll;
   overflow-x: hidden;
   direction:rtl;
   display: flex;
   flex-direction: column;
   gap:1.5vw;
   position:absolute;
   left:2vw;
   top:2vw;
   padding-left:1vw;

   --sb-track-color: #f8e1e9;
    --sb-thumb-color: #af3c66;
    --sb-size: 8px;
}

.comicbook-scroller img{
    filter: drop-shadow(3px 3px 3px rgba(56, 3, 3, 0.895));
}
.oneshot-scroller{
   height:27vw;
   width:min-content;
   overflow-y: scroll;
   display: flex;
   flex-direction: column;
   gap:0.75vw;
   position:absolute;
   left:66vw;
   top:8vw;
   padding-right:1vw;

   --sb-track-color: #f8e1e9;
    --sb-thumb-color: #af3c66;
    --sb-size: 8px;
}

.oneshot-scroller img{
    width:30vw;
}

.button-link-back{
    z-index: 10;
    padding:0;
    margin:0;
}

.button-link-back:hover{
    cursor:pointer;
    transform:rotate(10deg);
    filter: drop-shadow(0.5vw 0.5vw 0.5vw rgb(69, 44, 33));
}

.icon-tooltip{
    position:absolute;
    z-index: 100;
    background-color: rgb(7, 3, 35);
    color: #f886af;
    font-family: 'exepixelperfect';
    padding:0.25vw;
    font-size: 1.25vw;
}