@font-face {
  font-family: tempting; 
  src: url(tempting.ttf); 
}

@font-face {
  font-family: cabbage; 
  src: url(Cabbagetown.ttf);
}


.container {
    display: grid;
    position: fixed;
    grid-template-columns: 1fr 2fr 6fr 3fr 1fr;
    grid-template-rows: 1fr 7fr;
    grid-template-areas: 
        'emptyl left header header emptyr'
        'emptyl left center right emptyr';
    width: 100vw;
    height: 100vh;
    top: 0;
    right: 0;
}

.header {
    grid-area: header;
    background-color: rgb(225, 148, 157);
    min-height: 0;
    font-family: cabbage;
    font-size: 170%; 
    text-align: right;
    color: #fff3e6;
    font-style: italic;
    padding: 1%; 
    white-space: normal; 
}

.emptyl {
    grid-area: emptyl;
    background-image: url("im/background.jpg");
    background-size: fill;
}

.left {
    display: grid;
    grid-area: left;
    grid-template-columns: auto;
    align-content: space-evenly;
    background-color: rgb(253, 189, 196);
}

.center {
    display: grid;
    grid-area: center;
    height: 100%;
    width: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 0.5fr 6fr 1fr;
    grid-template-areas:
        'track'
        'main'
        'center_im';
    text-align: left;
    font-size: 0.5em;
    background-color: #fff3e6;
}

.right {
    display: grid;
    grid-area: right;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr auto 2fr;
    grid-template-areas:
        'new'
        'music_box'
        'blinkiebox'
        'updates';
    align-content: space-evenly;
    background-color: rgb(253, 189, 196);
}


.direct_button {
    width: 90%;
    height: 200%;
    background-color: #fff3e6;
    border-color: lightblue;
    margin: auto;
}

.new {
    grid-area: new;
    padding: 1%;
}

.blinkiebox {
    display: grid;
    grid-area: blinkiebox;
    grid-template-columns: auto auto;
    grid-template-rows: repeat(13, auto);
    align-content: start;
    justify-content: left;
    margin-bottom: 3%;

}

.blinkie {
    display: block;
}

.updates {
    display: grid;
    grid-area: updates;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 
        'update_title'
        'update_board';
}

.update_title {
    grid-area: update_title;
    text-align: center;
    font-weight: bold;
    color: white;
    background-color: lightblue;
    margin-left: 15%;
    margin-right: 15%;

}

.update_board {
    grid-area: update_board;
    border-color: rgb(173, 216, 230);
    background-color: rgb(222, 184, 135);
    border-style: ridge;
    border-width: thick;
    margin: 3%;
    padding: 1%;
    color: white

}

.main {
    grid-area: main;
    text-align: center;
    min-height: 0;
}

.chat {
    grid-area: chat;
    height: 1fr;
    width: 1fr;
}

.center_im {
    grid-area: center_im;
    display: grid;
    height: 1fr;
    min-height: 0;
    min-width: 0;
}

.center_im img {
    object-fit: contain;
}

.music_box {
    grid-area: music_box;
}

.music_player {
    width: 90%;
}

.motel_sign {
    position: fixed;
    bottom: -5%;
    left: 0;
    height: 105%;
    width: auto;
    transform: rotate(7deg);
}

.lamb {
    position: fixed;
    transform: rotate(-10deg) scaleX(-1);
    left: 0;
    bottom: -3%;
    height: 20%;
    width: auto;
}

.mermaid {
    height: 95%;
    width: auto;
}

.emptyr {
    grid-area: emptyr;
    background-image: url("im/background.jpg");
    background-size: fill;
}


.banner {
    background-color: lightcyan;
    grid-area: track;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%; /* Adjust the height as needed */
    overflow: hidden;

    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
 
.banner_track {
    display: flex;
    animation: scroll 15s linear infinite;
    font-size: 3em;
    color: rgb(225, 148, 157);
    white-space: nowrap;
    width: fit-content;

}


@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}