@counter-style dropdown {
  system: cyclic;
  symbols: ' \25BE';
  suffix: " ";
}

@font-face {
  font-family: "Karma-Heading";
  src: url("../res/fonts/Karma Future.otf");
}

@font-face {
  font-family: "Karma-Text";
  src: url("../res/fonts/Karma Suture.otf");
}

@font-face {
  font-family: "Mister Pixel";
  src: url("../res/fonts/Mister Pixel Regular.otf");
}


html{
  background-image: url("../res/images/pexels-teobadini-windows-bkgd.jpg");
  background-position: 25% 50%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  margin: auto;
}

.karma-heading{
  font-family: "Karma-Heading", serif ;
  font-style: normal;
  font-size: 52px;
}

.karma-text{
  font-family: "Karma-Text";
  
  font-weight: 300;
}

p, li {
  font-weight: 300;
}

.window-container{
    border: 2px  rgba(0, 61, 215, 1) solid;
    background-color: rgb(241, 235, 226);
    border-radius: 5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    overflow-x: hidden;
    padding: 0px;
}

.window-title{
    background: linear-gradient(180deg, rgba(9, 151, 255, 1) 0%,
        rgba(0, 83, 238, 1) 8%,
        rgba(0, 80, 238, 1) 40%,
        rgba(0, 102, 255, 1) 88%,
        rgba(0, 102, 255, 1) 93%,
        rgba(0, 91, 255, 1) 95%,
        rgba(0, 61, 215, 1) 96%,
        rgba(0, 61, 215, 1) 100%);
    height: auto;
    width: 100%;
    color: white;
    text-align: left;
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0px;
    padding: 2px 0px 2px 2px;
    text-wrap: nowrap;
    
}

.window-heading{
    display: flex;
    flex-direction: row;
    list-style: none;
    padding-left: 0px;
    margin-top: 0px;
    margin-bottom: 2px;
    align-items: center;
}

.window-heading li{
    padding: 0px 6px;
    margin: 0px;
    
}

.window-heading li:first-of-type{
    padding: 0px 1px;
    margin: 0px;
    
}

.window-inner{
    
    background-color: white;
    border: 2px gray inset;
    margin: 2px 4px;
    padding-left: 10px;
}

li.buddies-item{
    list-style-type: dropdown;
    list-style-position: inside;
    
}

.buddies-item li{
    list-style-type: none;
}

#aim-buddies{
    /*add max width*/
    width: fit-content;
    max-height: 500px;
    display: grid;
    grid-template-rows: 0.5fr 0.8fr 5fr 1.5fr;
}
ul#aim-buttons{
    display: flex;
    flex-direction: row;
    padding: 4px;
    list-style-type: none;
}
#aim-buttons button{
    margin: 0px 10px;
    border-radius: 100%;
    box-shadow: 2px 2px 1px gray;
}

#aim-buttons button.active{
    top: 2px;
    left: 1px;
    box-shadow: none;
    background-color: rgba(128, 128, 128, 0.377);
}

dialog {
    width: 60%;
}

dialog ol{
    list-style-position: inside;
    padding: 5px;
}

dialog button{
    display: block;
    justify-self: center;
}


@media (max-device-width: 480px){
    .karma-heading{
      font-size: 36px;
    }
    .window-title{
        overflow-x: hidden;
        text-overflow: ellipsis;
        height: fit-content;
    }
    li.buddies-item{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    ul#aim-buttons{
        display:block;
    }
    #aim-buttons button{
        margin: 2px 2px;
    }
    li ul, li ol{
        padding-left: 8px;
    }
    #aim-buddies{
        display: flex;
        flex-direction: column;
    }
    
    #aim-buddies ul.window-heading li:not(:first-of-type):not(:last-of-type){
        display:none;
    }
    #aim-buddies .window-heading{
        width: 100vw;
    }
    
    #aim-buddies .window-inner{
      overflow-x: scroll;
      text-overflow: scroll;
    }
}