@font-face {
  font-family: 'NeueBit';
  src: url('assets/Bitmap Font Pack/PPNeueBit-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'Mondwest';
  src: url('assets/Bitmap Font Pack/PPMondwest-Regular.woff2') format('opentype');
}

@font-face {
    font-family: 'Special-Elite';
    src: url('assets/Pixelify_Sans,Special_Elite/Special_Elite/SpecialElite-Regular.ttf') format('truetype');
}

body {
    background-color: rgb(179, 171, 138);
}

::selection {
    background-color: rgb(179, 171, 138);
    color: rgb(73, 58, 90);
}

#music_player {
    display: grid;
    position: fixed;
    grid-template-rows: 1fr 5fr 4fr;
    right: 0;
    max-height: 450px;
    width: 30%;
    margin-right: 10%;
    background-color: rgb(73, 58, 90);
    border: 2px solid rgb(48, 38, 59);
    color: rgb(179, 171, 138);
    z-index: 999;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.window {
    display: flex;
    justify-content: end;
    padding-right: 5px;
    align-items: center;
    height: 100%;
    border-bottom: 2px solid rgb(48, 38, 59);
    background-image: linear-gradient(to bottom, rgb(73, 58, 90), rgb(48, 38, 59));
}

.window > button {
    font-size: 2rem;
}

.window > p {
    margin: 10px;
    font-family: 'Mondwest';
    margin-right: auto;
}

button {
    font-family: 'Mondwest';
    background-color: rgb(73, 58, 90);
    color: rgb(179, 171, 138);
}

.row {
    width: 30%;
    height: auto;
    font-size: 2.6rem;
}

.details {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin-right: 5px;
}

.album-cover {
    grid-area: 1 / 1 / 2 / 2;
}

.text {
    display: flex;
    grid-area: 1 / 2 / 2 / 3;
    justify-content: center;
    align-items: start;
    flex-direction: column;
}

h2 {
    font-family: 'Mondwest';
}

.album-cover > img {
    transform: scale(0.7);
    background-color: rgb(49, 63, 77);
}

#container {
    display: grid;
    gap: 0;
    grid-template-rows: 5% 4% 2fr 7% 1fr 1fr 1fr 1fr;
}

.div1{
    display: grid;
    grid-template-columns: 1fr 3fr;
    color: rgb(73, 58, 90);
    place-content: center;
    margin: 0;
    padding: 5% 5% 0 0;
}


.div2 {
    display: flex;
    justify-content: space-evenly;
    align-items: end;
    font-family: 'Mondwest';
    color: rgb(73, 58, 90);
    max-height: 100%;
}

.div3{
    display: grid;
    place-content: center;
    grid-template-columns: 1fr 1fr 1fr;
}

.div4 {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.div5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
}

.announcements {
    display: grid;
    grid-template-rows: 1fr 5fr;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    height: 90%;
    width: 65%;
    background-color: rgb(73, 58, 90);
    color: rgb(179, 171, 138);
}

.aSmallRectangle {
    height: 80%;
    width: 95%;
    background-color: rgb(71, 86, 71);
    justify-content: center;
    align-content: start;
    text-align: center;
    border: 2px solid rgb(179, 171, 138);
    margin-top: 3%;
}

.aLargeRectangle {
    display: grid;
    height: 90%;
    width: 95%;
    background-color: rgb(71, 86, 71);
    border: 2px solid rgb(179, 171, 138);
    overflow: scroll;
}

.entry {
    display: flex;
    flex-direction: column;
    height: auto;
    width: auto;
    background-color: rgb(71, 86, 71);
    color: rgb(179, 171, 138);
    margin: 10%;
    text-align: justify;
    border-top: 3px solid rgb(179, 171, 138);
    font-family: 'Mondwest';
}

.chat {
    display: grid;
    grid-template-rows: 1fr 4fr 1fr;
    justify-items: center;
    align-items: center;
    height: 90%;
    width: 50%;
    background-color: rgb(73, 58, 90);
    color: rgb(179, 171, 138);
}

#messages {
    display: flex;
    justify-content: start;
    width: 80%;
    margin: 2%;
}

#form {
    display: flex;
    height: 50%;
    width: 90%;
    margin-top: 10px;
}

#input {
    height: 80%;
    width: 100%;
    font-family: 'Mondwest';
}

.div6 {
    display: flex;
    place-content: end;
}

.nique-box {
    display: flex;
    height: 80%;
    width: 70%;
    background-color: rgb(73, 58, 90);
    padding: 2%;
}

.div7 {
    display: grid;
    justify-items: start;
    align-items: center;
}

.hue-box {
    display: flex;
    height: 80%;
    width: 70%;
    background-color: rgb(73, 58, 90);
    padding: 2%;
}

.div8 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ace-box {
    display: flex;
    height: 80%;
    width: 70%;
    background-color: rgb(73, 58, 90);
    padding: 2%;
}

.quote {
    display: grid;
    width: 50%;
    font-family: 'Mondwest';
    font-size: 1.5em;
    text-align: justify;
}

.img-box {
    position: relative;
    background-color: rgb(179, 171, 138);
    width: 45%;
    height: 100%;
    left: 5%;
}

img {
    width: clamp(100%, 80%, 100%);
}

.blackgrit {
    background: var(--blackGrit);
    background-size: 400px;
    padding: 2rem 0;
    position: relative;
}

.whitegrit {
    background: var(--whiteGrit);
    background-size: 200px;
    /* padding: 2rem 0; */
    position: relative;
}


:root {
    --blackGrit: url(assets/blackgrit.webp);
    --whiteGrit: url(assets/whitegrit.png);
}

.slider-container {
    display: grid;
    grid-auto-rows: 15% 70%;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: start;
    width: 100%;
    height: 100%;
}

.slider {
    display: flex;
    justify-content: center;
    align-items: start;
    height: 100%;
    gap: 10px;
    padding: 0;
    margin: 0 10px;
    font-family: 'Mondwest';
}

.slider > p {
    margin-top: -0.05%;
    width: 30px;
}

.slider-color {
    width: 80%;
    height: 100%;
    margin: 0px 6px;
    background: linear-gradient(to right, rgb(179, 171, 138) 0%, transparent 0%);
    outline: 2px solid;
}

.play {
    display: flex;
    transform: scale(0.5);
    justify-content: center;
    margin-top: -8%;
}

.scale {
    transform: scale(0.7);
}

.box {
    background-color: rgb(73, 58, 90);
    position: relative;
    height: 42%;
    width: 9%;
    border-radius: 10%;
    border: 2px solid rgb(48, 38, 59);
}


.rectangle {
    height: 100%;
    width: 100%;
    background-color: rgb(73, 58, 90);
}

.hover-box {
    display: grid;
    grid-template-rows: 1fr 5fr;
    position: absolute;
    background-color: rgb(73, 58, 90);
    font-family: 'Mondwest';
    height: 250%;
    width: 200%;
    left: -65%;
    top: 110%;
    border-radius: 5%;
    justify-content: center;
    text-align: justify;
    color: rgb(179, 171, 138);
    padding: 20%;
    border: 2px solid rgb(48, 38, 59);
}

@media (max-width: 680px) {
        #container {
            display: grid;
            margin: 0.5em;
            /* background-color: rgb(174, 173, 174); */
            grid-template-rows: 1fr 4% 2fr 4% 2fr 2fr 2fr;
        }

        .div2 {
            display: flex;
            justify-content: space-evenly;
            align-items: start;
            font-family: 'Mondwest';
            color: rgb(73, 58, 90);
            max-height: 100%;
        }

        .row {
            font-size: 0.9rem;
            height: 70%;
        }
        
        #music-player {
            min-width: 90%;
            max-height: 100px;
        }

        .play {
            display: flex;
            transform: scale(0.2);
            margin-top: 0;
        }
    }