.cc { 
    font-family: 'curse_casualregular', Arial, sans-serif; 
    text-shadow: 2px 3px 4px black;
    font-weight: 100;
}

h1.cc {
    line-height: 33px;
    margin-bottom: 0px;
    margin-top: 28px;
}

body {
    background: #52006c;
    color: white;
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif; 
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
  }

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: linear-gradient(0deg, rgb(57 10 147 / 51%) 0%, rgb(160 0 223) 41%, rgb(0 212 255 / 0%) 100%);
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0px 0px 6px 2px black;
    width: 740px;
    overflow-y: auto;
    max-height: calc(100vh - 45px);
}

#mods {
    overflow: hidden;
    max-height: 170px;
    background: linear-gradient(0deg, rgb(57 10 147 / 51%) 0%, rgb(106 0 148) 45%, rgb(0 212 255 / 0%) 100%);
}

img {
    max-width: 100%;
}

#mod-title {
    background: rgb(6 37 106 / 22%);
    padding: 10px;
    text-align: center;
    font-family: 'curse_casualregular', Arial, sans-serif; 
    font-weight: 100;
    margin: 0px;
}

.inner-pane {
    border-radius: 5px;
    box-shadow: 0px 0px 6px 2px black;
    width: calc(100% - 40px);
    background: #6a0094;
    padding: 10px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 12px;
}

.panes
{
    margin-top: 20px;
    width: 100%;

    display: flex;
    background: #00687261;
    border-radius: 13px;
    border: 1px solid #00000042;
}


.panes .pane-1 {
    float: left;
    margin: 0px;
}

.panes .pane-2 {
    float: right;
}

.panes .pane-1-2 {
    width: 50%;
}

.panes .pane-1-3 {
    width: 33.3%;
}

.panes .pane-2-3 {
    width: 66.6%;
}

.panes .pane-1 img, .panes .pane-2 img {
    padding: 10px;
    width: calc(100% - 20px);
}

.glide__slides img:hover {
    transform:scale(1.1);
    -ms-transform:scale(1.1); /* IE 9 */
    -moz-transform:scale(1.1); /* Firefox */
    -webkit-transform:scale(1.1); /* Safari and Chrome */
    -o-transform:scale(1.1); /* Opera */
    transition: all .2s ease;
}

button.fullw {
    width: 100%;
}

button {
    background: #fff700;
    border: 1px solid yellow;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    transition: all .2s ease;
}

button:hover {
    background: #faf55d;
}

.mod-icon
{
    cursor: pointer;
}

.sbs
{
    display: table;
    width: 100%;
}

.sbs .row {
    display: table-row;
}

.sbttn {
    background: #00808040;
    padding: 5px;
    margin: 5px;
    border-radius: 75px;
    color: white;
    cursor: pointer;
    border: 2px solid #00000033;
    transition: all .2s ease;
}

.sbttn:hover {
    background: #00acac40;
}

.sbs .row .cell {
    display: table-cell;
    text-align: center;
    width: 25%;
    padding: 0px;
}

h1.header {
    font-size: 48px;
    text-align: center;
    padding-bottom: -2px;
    color: #ffd400;
    line-height: 58px;
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 0px;
}

.sbs .row .cell p {
    font-family: 'curse_casualregular', Arial, sans-serif; 
    font-weight: 100;
    font-size: 16px;
}

.sbs .row .cell p .fa {
    font-size: 32px;
}

.pane-1 iframe, .pane-2 iframe
{
    width: 100%;
    height: 185px;
    border: 0px;
    border-radius: 10px;
}

@media all and (max-width: 800px) {
    .popup {
        width: calc(100% - 40px);
        height: calc(100% - 40px);
    }

    .panes .pane-1 {
        float: left;
        margin: 0px;
    }
    
    .panes .pane-2 {
        float: left;
    }
    
    .panes .pane-1-2 {
        width: 100%;
    }
    
    .panes .pane-1-3 {
        width: 100%;
    }
    
    .panes .pane-2-3 {
        width: 100%;
    }
}