@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');


:root {
    --main-color: white;
    --highlight: #167fca;
    --bg: #f0f0f0;
    --hover: #c3c3c3;
    --s1: rgba(22, 31, 39, 0.42);
    --s2: rgba(19, 26, 32, 0.08);
    --txt: black;
}



body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--txt)
}

.titlebar {
    padding: 0px;
    margin-top: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    background-color: var(--main-color);
    height: 10vh;
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-shadow:
    var(--s1) 0px 60px 123px -25px,
    var(--s2) 0px 35px 75px -35px; 
    color: var(--txt);
}

.titlebar .titlebar-head {
    box-sizing: border-box;
    padding: 1vw;
    width: 40vw;
    height: inherit;
    font-family: Inter;
    font-size: 2vw;
    font: Inter;
    font-weight: 800;
    text-align: center;
    color: var(--txt);

}

.titlebar .titlebar-tool {
    box-sizing: border-box;
    margin-right: 0vw;
    margin-top: 0vw;
    padding: 1vw;
    width: 60vw;
    height: inherit;
    display: flex;
    justify-content: flex-end;
    align-items: center; 
}

#titlebar-display-container {
    float: right;
    box-sizing: border-box;
    padding: 1vw;
    display: flex;
    height: inherit;
    width: auto;
    align-items: center;
}

#display-switch {
    width: 4.5vw;
}

#dark {
    height: 3vh;
    width: 3vh;
}

#light {
    height: 3vh;
    width: 3vh;
}

#play {
    height: 3vh;
    width: 3vh;
}

.titlebar-btn {
    margin-right: 1vw;
    background: transparent;
    border: transparent;
    border-radius: 3vw;

}

.titlebar-btn:hover{
    border-radius: 0.3vw;
    background: var(--hover);

}

#snap {
    height: 3vh;
    width: 3vh;
}


.main-layout {
    padding-left: 15vw;
    padding-right: 15vw;
    padding-top: 15vh;
    padding-bottom: 10vh;
    height: 50vh;
    width: 50vw;
    position: relative;
    display: inline-block;
    margin-right: 0vw;
    text-align: center;
    font-family: Inter;
    font-size: 1vw;
    color: var(--txt);
}


.sidebar {
    font-family: Inter;
    margin-top: 8vw;
    margin-bottom: 10vw;
    margin-left: 2vw;
    width: 15vw;
    float: left;
    height: 65vh;
    background-color: var(--main-color);
    padding: 1vw;
    border-radius: 3vw;
    position: relative;
    box-shadow:
    var(--s1) 0px 60px 123px -25px,
    var(--s2) 0px 35px 75px -35px; 
    text-align: center;
    font-size: 1vw;
    justify-content: center;
    color: var(--txt);
}

.sidebar .button {
    margin: 0vw;
    padding: 0.5vw;
    font-size: 1vw;
    font-family: Inter;
    font: Inter;
    font-weight: 600;
    justify-content: center;
    border: var(--main-color);
    width: 10vw;
    border-radius: 1vw;
    overflow: hidden;
    background-color: var(--main-color);
    color: var(--txt);
}

.sub-layout {
    height: 35vw;
    width: 50vw;
    box-shadow:
    var(--s1) 0px 60px 123px -25px,
    var(--s2) 0px 35px 75px -35px;
    color: var(--txt);
} 

.sub-layout- {
    height: 35vw;
    width: 50vw;
    color: var(--txt);
    justify-content: center;
}

.sub-layout- .info-container {
    padding-left: 10vw;
    padding-right: 10vw;
    width: 30vw;
    height: 40vw;
    font-size: 0.75vw;
}

.sub-layout- .info-container .sub-info{ 
    height: auto;
    box-sizing: border-box;
    padding: 1vw;
    border-radius: 2vw;
    border-color: var(--highlight);
    background-color: var(--highlight);
    color: azure;
    overflow-wrap: break-word;
    justify-content: center;
    
}

.sub-layout- .info-container .br{
    height: 1vh;
    
}

.sidebar .button:hover {
    background-color: var(--hover);
    color: var(--txt);
}

.sidebar .button:focus{
    color: var(--main-color);
    background-color: var(--highlight);
    color: var(--txt);
}