@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/theater-wallpaper.jpg');
    background-size: cover;
    background-attachment: fixed;
    overflow-y: hidden;
    overflow-x: hidden;
}

h1{
    font-family: 'kiwi';
    margin:0;
    font-size: 6vw;
    color: rgb(85, 32, 100);
}

.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;
    position:absolute;
    align-items: left;
    align-content: left;
}

.header h1{
    font-family: 'kiwi';
    margin:0;
    font-size: 6vw;
    color: rgb(9, 36, 117);
}

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

.button-link-back{
    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: 10000;
    background-color: rgb(4, 35, 3);
    color: rgb(255, 139, 209);
    font-family: 'exepixelperfect';
    padding:0.25vw;
    font-size: 1.25vw;
}

.ipod-frame-text{
    position:absolute;
    top:10vw;
    left:4vw;
    width:16vw;
    height:12vw;
}

.ipod-frame-text h1 {
    font-family:'daydream';
    font-size: 1vw;
    color: rgb(203, 147, 255);
}

.ipod-frame-text p {
    font-family:'exepixelperfect';
    font-size: 1.5vw;
    color: rgb(203, 147, 255);
}

.project-timeline-grid{
    position:absolute;
    top:9vw;
    left:26vw;
    height: 35vw;
    width:50vw;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 2vw 1vw;
    overflow-y:scroll;
    align-items: center;

     --sb-track-color: #fb73d2;
    --sb-thumb-color: #8eecec;
    --sb-size: 8px;
}

.project-timeline-grid::-webkit-scrollbar {
  width: var(--sb-size)
}

.project-timeline-grid::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 1px;
}

.project-timeline-grid::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 1px;
  
}

@supports not selector(::-webkit-scrollbar) {
  .project-timeline-grid {
    scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}

.project-timeline-text{
    grid-column:span 2;

}

.project-timeline-text p{
   font-family: 'exepixelperfect';
    font-size: 1.5vw;
    margin-top: 0;
    margin-bottom: 0.55vw;
    color: rgb(9, 36, 117);
}

.project-timeline-text h3{
    font-family: 'daydream';
    font-size: 1.5vw;
    margin: 0;
    color: rgb(9, 36, 117);
}

.demo-banner{
    background-image: url(images/vid-projects-button-bg.png);
    background-size: cover;
    position:absolute;
    top:1vw;
    left:77vw;
    width:20vw;
    border: solid pink 0.25vw;
    border-radius: 3vw;
    text-align: center;
    justify-items: center;
    font-family: "daydream";
    font-size: 3vw;
    color: rgb(9, 36, 117);
}

.demo-banner:hover{
    cursor: pointer;
    filter: hue-rotate(180deg);
}

.demo-banner p{
    margin-top:auto;
    margin-bottom:auto;
}

.demo-banner h1{
    margin-top:auto;
    margin-bottom:auto;
    font-family: "exepixelperfect";
    font-size: 2vw;
    color: rgb(9, 36, 117);

}

.vid-scroller{
    height: 24vw;
    position:absolute;
    top:20vw;
    left:81vw;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-snap-align: center;

    --sb-track-color: #fb73d2;
    --sb-thumb-color: #8eecec;
    --sb-size: 3px;
}

.vid-scroller img {
    height:24vw;
    scroll-snap-align:start;
}

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

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

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

@supports not selector(::-webkit-scrollbar) {
  .project-timeline-grid {
    scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}