@font-face {
  font-family: Charter-Roman;
  font-display: swap;
  src: url('./fonts/Charter-Roman/font.ttf');
}


body
{
    margin:0;
    padding:0;
    background-color: #000;
    font-family: 'Charter-Roman';
    color: #ccc;
    overflow: hidden;
    font-smooth: always;
    -webkit-font-smoothing: ;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    height: 100vh;
    height: -webkit-fill-available;   
}

html {
    height: -webkit-fill-available;

}

div {
    box-sizing: border-box;
}

a {
    color: #ccc;
    text-decoration: none;
}

#main {
    display: flex;
    height: -webkit-fill-available;
    width: 100vw;
    padding-right: 0vh;
    padding-left: 4vh;
    justify-content: right;
    flex: 1;
    border:px solid #aaa;
}

#content {
    display: flex;
    min-height: 100vh;
    min-height: -webkit-fill-available;  
    height: -webkit-fill-available;
    width: calc(100vh*0.59);
    flex-direction: column;
    justify-content: flex-start;
    background-color: #000;
    border:px solid #aaa;
}

#mainside {
    display: flex;
    height: -webkit-fill-available;
    width: 100vw;
    padding-right: 0vw;
    padding-left: 0vw;
    justify-content: center;
    flex: 1;
}

#contentside {
    display: flex;
    height: -webkit-fill-available;
    flex-direction: column;
    justify-content: flex-start;
    width:100vw;
}

#languages {
    width: 4vh;
    top: 50vh;
    height:50vh;
    color: var(--textcolor);
    padding-top: 2.5vh;
    display: flex;
    align-content: flex-start;
    justify-content: space-between;
    justify-content: ;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    position: fixed;
    z-index: 999;
    left: 0px;
    background-color: black;
    font-size: calc(1.85vh);
    border: 1px solid #aaa;
}

.lang {
     text-decoration: ;
     cursor: pointer; 
}

#header {
    width: 4vh;
    height:50vh;
    top: 0;
    color: var(--textcolor);
    padding-top: 2.5vh;
    display: flex;
    align-content: flex-start;
    justify-content: space-between;
    justify-content: ;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    position: fixed;
    z-index: 999;
    left: 0px;
    background-color: black;
    font-size: calc(1.85vh);
    border: 1px solid #aaa;
}


#img_track {
    align-items: center;
    justify-content: center;
    display: flex;
    max-width: ;  
    margin:auto;
    height: -webkit-fill-available;
    border-left: 1px solid #aaa; 
    border-right: 1px solid #aaa; 
    border-top: 1px solid #aaa; 
    background-color: #aaa;
}

#img_track > img {
    align-items: flex-start;
    justify-content: center;
    object-fit: contain;
    width: 100%;  
    border-top: px solid #aaa;
    border-bottom: px solid #aaa;

}


#blank {
    display: flex;
    height: 0vh;
    border-top: px solid #aaa;
    border-bottom: px solid #aaa;
}


#now_playing {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    height: ;
    font-size: calc(1.85vh);
    padding-left:0vh;
    padding-top: 0vh;
    align-items: center;   
}

#now_playing > div {
    padding: 0vh;
}

#controls {
    display: flex;
    padding: 1vh;
    padding-left:2.5vh;
    padding-right:1.5vh;
    padding-bottom: ;
    flex-direction: row;
    justify-content: space-between;
    height: -webkit-fill-available;
    border: 1px solid #aaa; 
 }

.control {
    display: flex;
    height: auto;
    width: auto;
}

.control > img {
    object-fit: contain;
    width: 7.6vh;
    height: 100%;
}

#controls > img {

    height: ;
    width: ;
}