@font-face {
    font-family: FlaemischeKanzleischrift;
    src: url("./font/Flaemische\ Kanzleischrift.ttf")
}

@font-face {
    font-family: MSGothic;
    src: url("./font/MS_Gothic.ttf");
}

/* General / Every Page CSS */
:root {
    --light-color: #F0F0F4;
    --dark-color: #222A68;
    /* Win98 -- Jordan Scales -- MIT License */
    --button-highlight: #ffffff;
    --button-face: #dfdfdf;
    --button-shadow: #808080;
    --window-frame: #0a0a0a;

    --border-window-outer: inset -1px -1px var(--window-frame),
        inset 1px 1px var(--button-face);
    --border-window-inner: inset -2px -2px var(--button-shadow),
        inset 2px 2px var(--button-highlight);

      --border-field: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--button-shadow),
    inset -2px -2px var(--button-face),
    inset 2px 2px var(--window-frame);


    --dialog-blue: #000080;
    --dialog-blue-light: #1084d0;
}

.window {
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  background: #c0c0c0;
  padding: 3px;
}


.title-bar {
  background: linear-gradient(
    90deg,
    var(--dialog-blue),
    var(--dialog-blue-light)
  );
}

.field-border {
  box-shadow: var(--border-field);
  padding: 2px;
}



    /* End Win98 -- Jordan Scales -- MIT License */

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }




    img {
                image-rendering: pixelated;
    }


    body { /* entire document */
        background-color: rgb(0, 159, 170) ;
        font-family: sans-serif;
    }

    h1 { /* 'feeble little horse' title */
        font-size: 24pt;
        background-color: var(--dark-color);
        color: #ffffff;
        text-align: center;
        cursor:pointer;
        user-select: none;
        font-weight:600;
        height:60px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom:10px;
    }


    main { /* main chunk, with nav bar and main section */
        min-width: 350px;
        max-width: 824px;
    }

    header, footer { /* top and bottom of page */
        background-color:lightcyan;
        padding: 2px 20px;
    }


header ul {
    display:flex;
    flex-direction:row;
    list-style-type: none;
    gap: 1em;
    flex-wrap:wrap;
}

header a {
    color: navy;
}

header a:hover , footer a:hover{
    background-color: navy;
    color: lightcyan;
}

header {
    margin-bottom:8px;
}

footer {
    margin-top: 8px;
}
    

footer span {
    cursor: pointer;
}

header a, footer a {
    color:black;
}

#countdown {
    background-color: rgb(55, 0, 255);
    color:rgb(242, 255, 240);
    text-align: center;
    padding:6px;
    margin-bottom:4px;
}

    #page { /* Container for whole site -- header, columns, footer */
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #columns { /* Container for three columns -- album, main, tour */
        display: flex;
        flex-wrap:wrap;
        flex: 1;
        justify-content: center;
        gap:0.5em;
    }

    #album-column { /* rightmost / top column -- album info, order link */
        background-image: url("./img/bg/grid.jpg");
        flex: 0 1 350px;
        display: flex;
        flex-direction: column;
        padding: 8px;
    }

    #tour-column { /* leftmost / bottom column -- tour info, seated embed*/
        background-color:rgb(255, 90, 214);
        color:white;
        flex: 0 1 350px;
        display: flex;
        flex-direction: column;
        padding: 8px;
    }

    aside {  /* both the Album and Tour columns */
        width: 300px;
    }

    aside img { /* make sure tour and album images never get bigger than the container */
        max-width: 400px;
        z-index: 0;
    }

    aside, main {
        min-height: 1000px;
   }

    #main-column { /* entire center section -- nav and chunk that changes on new page */
        background-color:#c0c0c0;
        color:white;
        flex: 0 1 900px;
    }

    #columns > aside, 
    #main-left > img, #main-left > div,
    #main-middle > img, #main-middle > div,
    #main-right > img, #main-right > div,
    #main-bottom > img, #main-bottom > div, 
    #visuaasdlisers img, #dog-gif-banner img, 
    #tour-bottom > img, #lyrics-ipod-pinkdog > img, #ipod-pinkdog > div
    {

        overflow: hidden;
    }

    #main-wrapper { /* center hub -- chunk that changes on new page */
        display:flex;
        flex-wrap: wrap;
        justify-content:center;
        flex-direction: row;
        min-height:760px; /* 800 default - 40 for nav*/
        padding: 4px;
    }

    #bitknot-tracklist {
        background-color: #cae785 ;
        color: #003b0d ;
    }


    main nav ul { /* nav bar list */
        list-style-type: none;
        display: flex;
        justify-content: center;
        align-items: space-evenly;
        color:black;
        min-height:40px;
        cursor:pointer;
        flex-wrap:wrap;
    }

    main nav ul li:hover {
        background-color: rgb(255, 251, 0);
    }

    main nav ul li img {
        height:100%;
        image-rendering: pixelated;
        background-color: #cccccc;
    }

    /* TOOLTIP TEXT */

.tooltip {
  position: relative;
  display: inline-block;
}


.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #fffb00;
  color: #000;
  text-align: center;
  border-radius: 0px;
  padding: 3px;
  position: absolute;
  z-index: 1;
  bottom: -100%;
  left: 50%;
  margin-left: -60px;
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

.tooltip .tooltiptext::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}




    /* ALBUM COLUMN */


    #album-text {
        background:white;
        padding:12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    #album-column h2 {
        font-size:32pt;
    }

    #album-text ol{
        font-family: 'Times New Roman', Times, serif;
    }

    #album-column ol {
        list-style-type: none;
        font-family: 'Times New Roman', Times, serif;
    }

    #album-column ol a {
        color:blue;
    }

    #album-column ol a:hover {
        background-color: yellow;
    }

    #album-text ol {
        max-height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #link-list {
        display: flex;justify-content: space-between;font-size:20px;
    }

  .marquee {
    height: 200px;
    overflow: hidden;
  }

  .track {
    animation: scroll 32s linear infinite;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .track li {
    font-size: 18px;
  }

  @keyframes scroll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
  }
    #dog-gif-banner {
        display: flex;
        justify-content: center;
    }

    #color-cubes { /* container for backgrounds*/
        width:100%;
        height:min-content;
        display: flex;
        flex-wrap: no-wrap;
        justify-content: center;
        background-color: var(--dark-color);
    }

    .swatch {
        width:100%;height:20px;cursor:pointer;border:0px;
    }



    #visualisers img {
        width:50%;
    }

    /* TOUR COLUMN */

    #tour-column h2 { /* cursive tour title */
        color:rgb(0, 255, 255);
        font-size: 100px;
        max-width: fit-content;
        font-family: FlaemischeKanzleischrift;
        margin-top:-20px;
    }

    #tour-top {
        display:flex;
        justify-content:space-evenly;
        align-items: center;
    
    }

    #tour-bottom {
        display: flex;
        flex-direction: column;
    }

    /* MAIN COLUMN */