/* main css */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

body {
    font-family:        'Nunito', sans-serif;
    background-color:   #1e1e2e;    
    color:              #cdd6f4;
}

.main-container {
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    justify-items:      center;
    gap:                10px;
    padding-bottom:     150px;
}

.bar-cont {
    display:                flex;
    gap:                    10px;
    border-radius:          20px;
    align-items:            center;
    justify-content:        center;
    background-color:   #313244;
    color:              #cdd6f4;
}

.greetings, .widget {
    background-color:   #313244;
    color:              #cdd6f4;
    border:             3px solid #313244;  
    border-radius:          20px;
    padding-left:           10px;
    padding-right:          10px;
    max-width: 650px;
}

.bar-cont {
    padding:                10px;
}

.bar-cont img {
    border-radius:          10px;
}

.bar-cont a {
    display:                flex;
    flex-wrap:              nowrap;
}

.bar-cont a {
    background-color:   #45475a;
    color:              #cdd6f4;
    text-decoration:        none;
    padding:                10px;
    border-radius:          10px;
}

.bar {
    position:           fixed;
    z-index:            9999;         
    width:              auto;           
    bottom:             10px;         
    left:               50%;             
    transform:          translateX(-50%);
}

.bar-focused-button {
    background-color: #6c7086 !important;
}

.musicplayer-container {
    display:            flex;
    flex-direction:     row;
    align-items:        center;
    justify-self:       center;
    gap:                10px;
    padding-bottom:     10px;
    padding-top:        10px;
}

.musicplayer-container img {
    border-radius:  10px;
    width: 200px;
    height: 200px;
}

fieldset.widget:nth-child(3) {
    height: 160px;
}

.widget legend {
    background-color:   #45475a;
    border-radius:      10px;
    padding:            4px;
    margin-left:        10px;
}

.info {
    display:            flex;
    flex-direction:     row;
    gap:                10px;
}

.info img {
    height:             133px;
    width:              133px;
    border-radius:      10px;
}

.link {
    color:              #89b4fa;
    text-decoration:    #89b4fa 1px dotted underline;
}

.link-sn {
    background-color:   #45475a;
    font-size:          20px;
    border-radius:      10px;
    padding:            5px;
}

.music img {
    height:         250px;
    width:          250px;
    margin-top:     10px;
    border-radius:  10px;
}

.music {
    align-items:    center;
    text-align:     center;
    padding-bottom: 10px;
}

div.music > a > img {
    height:     32px;
    width:      32px;
}

.music-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.music img {
    height: 230px;
    width: 230px;
    margin: 10px;
    border-radius: 10px;
}