#mainheading {
    display: flex;
    flex-direction: column;
    align-items: center;

}

#mainbody {
    background: #000217;
    background: linear-gradient(180deg, rgba(0, 2, 23, 1) 0%, rgba(2, 14, 53, 1) 50%, rgba(0, 2, 23, 1) 100%);
    background-size: cover;
    background-repeat: round;
    color: #000217;
}

#mainheadingl1,
#mainheadingl2 {
    color: #95b2ef;
    margin: 2px;
    
}

#mainheadingl2 {
    font-size: 70px;
    text-transform: uppercase;
}

#mainheadingl1 {
    font-size: 45px;
}

#mainheadingimg {
    width: 250px;
    margin-top: 10px;
    border-width: 5px;
    border-style: solid;
    border-color: #95b2ef;
}

#mainfiles {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 120px;
    margin-bottom: 30px
}

#mainfilesimg {
    position: relative
}

#mainfileshandl,
#mainfileshandr {
    position: absolute;
    z-index: -1;
    width: 250px
}

#mainfilescase {
    width: 400px
}

#mainfileshandr {
    left: 70%;
    rotate: 10deg
}

#mainfileshandl {
    right: 70%;
    rotate: -10deg
}

#mainfilesl1,
#mainfilesl2 {
    color: #95b2ef;
    font-size: 55px;
    text-transform: uppercase;
    
}

#mainfilesenter {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 40%;
    font-size: 45px;
    color: white;
    text-decoration: none;
}

#centercontent,
#leftcontent,
#rightcontent {
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

#leftcontent,
#rightcontent {
    justify-content: space-evenly;
    margin-left: 80px;
    margin-right: 80px;
}

.mainpagestructure {
    display: flex;
    justify-content: space-between;
}

.mainsidemenuheading {
    font-size: 25px;
    padding-top: 10px;
    padding-bottom:10px;
    color: #95b2ef;
    text-align: center;
    text-transform: uppercase;
}

.mainsidemenutext {
    font-size: 18px;
    padding: 5px;
    color: #b9caf0;
    text-align: center;

}

.mainsidemenu {
    width: 220px;
    height: fit-content;
    background-color: #13183a;
    border-color: #95b2ef;
    border-width: 5px;
    border-style: solid;
    border-radius: 25px;
    margin: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mainsidemenu.small{
    height: 60px;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 15px;
}

.mainsidemenulink:hover{
    width: 105%;
    margin: -2.5%;
}


.mainfftoggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.mainfftoggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ffslider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #06032b;
  transition: .4s;
  border-radius: 25px;
  outline-width: 5px;
  outline-color: #2a326c ;
  outline-style: solid;
}

.ffslider:before {
  position: absolute;
  content: "";
  height: 25px;
  width: 25px;
  left: 0px;
  bottom: 0px;
  background-color: #95b2ef;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .ffslider {
  background-color: #2a326c;
}

input:checked + .ffslider:before {
  transform: translateX(25px);
}

.player {
    display: flex;
    align-items: center;
    align-content: stretch;
    justify-content: end;
    flex-direction: column;
    flex-wrap: nowrap;
    width: fit-content;
    position: relative;
}

.playerbody {
    background-color: hsla(226, 93%, 11%, 0.5);
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    opacity: 0;
    transition: all .2s ease-in-out;
    position: absolute;
}

.buttonelements {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.leftpanel {
    display: flex;
    margin: 5px;
    align-items: center;
    align-content: stretch;
    justify-content: space-between;
}

.playerbuttonbg {
    border-radius: 999px;
    border: none;
    margin: 3px;
    background-color: hsla(0, 0%, 100%, 0.2);
    transition: all .1s ease-in-out;
}

.playerbuttonbg:hover {
    transform: scale(1.1);
    background-color: hsla(0, 0%, 100%, 0.1);
    cursor: pointer;
}

.fscreenbutton {
    margin-right: 10px;
}

@font-face {
    font-family: HuiFont;
    src: url(Placa\ Fina.ttf);
}

@font-face {
    font-family: FileFont;
    src: url(Secret\ Service\ Typewriter\ Regular.ttf);
}

@font-face {
    font-family: ConsoleFont;
    src: url(VCR_OSD_MONO.ttf);
}

@font-face {
    font-family: DiscordRusFont;
    src: url(OpenSans-Regular.ttf);
}

button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00021700;
    border-width: 0px;
}

.hoveroverlay {
    mask-image: url(huiplay.svg);
    width: 60px;
    height: 60px;
    background-color: white;
    position: absolute;
}

.huiplayhighlight,
.huivolumehighlight,
.huifscreenhighlight,
.huipausehighlight,
.huimutehighlight {
    position: absolute;
    width: 30px;
    height: 30px;
}

.huiplayhighlight:hover {
    background-color: #00021733;
    mask-image: url(huiplay.svg);
    mask-size: 30px;
    cursor: pointer;
}

.huipausehighlight:hover {
    background-color: #00021733;
    mask-image: url(huipause.svg);
    mask-size: 30px;
    cursor: pointer;
}

.huiplayhighlight:active {
    background-color: #00021771;
    mask-image: url(huiplay.svg);
    mask-size: 30px;
}

.huipausehighlight:active {
    background-color: #00021771;
    mask-image: url(huipause.svg);
    mask-size: 30px;
}

.huivolumehighlight:hover {
    background-color: #00021733;
    mask-image: url(huivolume.svg);
    mask-size: 30px;
    cursor: pointer;
}

.huivolumehighlight:active {
    background-color: #00021771;
    mask-image: url(huivolume.svg);
    mask-size: 30px;
}

.huimutehighlight:hover {
    background-color: #00021733;
    mask-image: url(huimuted.svg);
    mask-size: 30px;
    cursor: pointer;
}

.huimutehighlight:active {
    background-color: #00021771;
    mask-image: url(huimuted.svg);
    mask-size: 30px;
}

.huifscreenhighlight:hover {
    background-color: #00021733;
    mask-image: url(huifscreen.svg);
    mask-size: 30px;
    cursor: pointer;
}

.huifscreenhighlight:active {
    background-color: #00021771;
    mask-image: url(huifscreen.svg);
    mask-size: 30px;
}

.timesliderwrapper {
    width: 100%;
    margin: 0px;
    display: flex;
    align-items: center;
}

.timeslider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    z-index: 3;
    accent-color: #97c7ff;
}

.timeslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background-color: #97c7ff;
}

.tooltip {
    background-color: #97c7ff;
    color: #6b6b6b;
    border-radius: .25rem;
    bottom: 120%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-weight: 600;
    padding: 10px;
    display: none;
}

.timeslider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: none;
    background-color: #97c7ff;
}

.volumeslider {
    margin: 5px;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 20px;
    z-index: 3;
    accent-color: #000217;
    background-color: #000217;
    overflow: hidden;
}

.volumeslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 30px;
    border-radius: 0px;
    background-color: #b4d6fe;
    box-shadow: -200px 0 0 200px #97c7ff;
}

.volumeslider::-moz-range-thumb {
    width: 12px;
    height: 30px;
    border-radius: 0px;
    border: none;
    background-color: #b4d6fe;
    box-shadow: -200px 0 0 200px #97c7ff;
}

.player:hover .playerbody {
    opacity: 1;
}

.hfpagestructure {
    width: 100%;
    display: none;
    justify-content: start;
    align-items: center;
    flex-direction: column;

}

* {
    font-family: HuiFont;
    margin: 0px;
    padding: 0px;
}

.hfheader {
    z-index: 1;
    width: 100%;
    height: 100px;
    background-color: #13183a;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hfheadericoncontainer,
.hfheaderbuttoncontainer {
    width: 60px;
    height: 60px;
    border-style: solid;
    border-width: 5px;
    border-color: #95b2ef;
}

.hfheaderleftside {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 3%;
}

.hfheadername {
    margin: 15px;
    color: #95b2ef;
    font-size: 45px;
    white-space: nowrap;
    overflow: hidden;
}

@media only screen and (max-width: 700px) {
    .hfheadername {
        font-size: 33px;
    }
}

.hfheadericon {
    width: 100%;
}

.hfheaderbuttoncontainer {
    margin: 3%;
}

.hfheaderbuttonicon {
    position: absolute;
    width: 55px;
}

.dropdownbutton {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.dropdowncontent {
    display: none;
    position: absolute;
    right: 3%;
    min-width: 100px;
    background-color: #13183a;
    border-color: #95b2ef;
    border-style: solid;
    border-width: 5px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdowncontent a {
    color: #95b2ef;
    margin: 12px;
    text-decoration: none;
    display: block;
    font-size: 20px;
}

.dropdowncontent a:hover {
    background-color: #95b1ef26;
}

.hfheaderbuttoncontainer:hover .dropdowncontent {
    display: block;
}

.hffile {
    background-color: #000217;
    border-style: solid;
    border-width: 5px;
    border-color: #95b2ef;
    width: fit-content;
    height: fit-content;
    min-width: 150px;
    min-height: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hffiletextcontainer {
    background-color: #13183a;
    height: 100%;
    width: 100%;
}

.hffiletext {
    color: #95b2ef;
    padding: 3%;
    font-family: FileFont;
}

.hfimage {
    width: 100%;
    max-width: 500px;
    max-height: 500px;
}

.hfvideo {
    width: 100%;
    max-width: 600px;
    max-height: 600px;
}

.player:fullscreen .hfvideo {
    width: 100%;
    max-width: none;
    max-height: none;
}

#hflistcontainer {
    z-index: 4;
    position: sticky;
    top: 20px;
    right: 96.5%
}

#hflist {

    position: absolute;
    top: 50px;
    background-color: #13183a;
    border-color: #95b2ef;
    border-width: 5px;
    border-style: solid;
    width: 120px;
    height: fit-content;
    display: flex;
    flex-direction: column;
}

.hflisttext {
    font-size: 18px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-decoration: none;
    color: #b9caf0;
    transition: all .1s ease-in-out;
}

.hflisttext:hover {
    color: white;
}

.hccontrols{
    display: flex;
    flex-direction: column;
    background-color: #13183a;
    border-top: 5px solid #95b2ef;
    border-bottom: 5px solid #95b2ef;
    padding-top: 10px;
    padding-bottom: 10px;
}

.hccolors, .hchats, .hcsave{
    display: flex;
    flex-direction: row;
    padding: 5px;
    align-items: center;
    margin-left: 10px;
}

.hccolors input, .hchats input, .hcsave input{
    font-family: FileFont;
    color: #95b2ef;
    font-size: 15px;
    margin: 3px;
}

.hctext{
    font-family: FileFont;
    margin: 3px;
    margin-left: 10px;
    color: #95b2ef;
    font-size: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    -webkit-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

.hcinput{
    background-color: #2a326c;
    border-width: 2px;
    border-color: #2a326c;
    margin-right: 20px;
    padding: 5px;
    margin-left: 10px;
    border-radius: 10px;
    border-style: solid;
    width: 20%;
    transition: .1s;
}

#hcnameeditor{
    width: 40%;
}

#hcnameeditorfield{
    border-style: none;
    background-color: #06032b;
    margin: 0px;
    padding-left: 2px;
}

.hcinput:active{
    background-color:#161b49;
}

#color{
    border-radius: 5px;
    background-color: transparent;
    width: 1em;
    height: 1em;
    margin: 0px;
    margin-left: 1em;
}

#invertbutton{
    border-radius: 5px;
    width: 1em;
    height: 1em;
    margin-left: 1em;
    background-color: #06032b;
}

#invert:checked ~ #invertbutton {
  background-color:#95b2ef;
}

input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

input[type="color"]::-webkit-color-swatch {
	border: none;
    border-radius: 5px;
    width: 35px;
    height: 35px;
}

.hcinvis{
    display: none;
}

.lockedfile{
    background-color: #06032b;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column ;
    align-items: center;
}

.lockediconcontainer{
    width: fit-content;
    height: fit-content;
    border-radius: 999px;
    background-color: #030118;
    margin-top: 30px;
    margin-bottom: 10px;
}

.lockedfiletext{
    color:#95b2ef;
    font-size: 30px;
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
}

.lockedinputcontainer{
    background-color: #95b2ef;
    height: fit-content;
    padding: 5px;
    width: 280px;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 40px;
    border-radius: 50px;
}

.lockedinput{
    text-align: center;
    padding: 0px;
    background-color: #95b2ef;
    border: none;
    color: #161b49;
    font-size: 1em;
}

input::placeholder {
  color: #2a326c;
  opacity: 0.5;
}

.lockedicon{
    width: 200px;
}

.tlpagestructure {
    width: 100%;
    display: none;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    row-gap: 20px;
    margin-bottom: 30px;
}

.tlpartcontainer{
    display: flex;
    justify-content: center;
    align-items: start;
    height: fit-content;
    width: fit-content;
}

.tlpartdesccontainer{
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    height: fit-content;
    width: fit-content;
    margin-left: -60px;
    margin-right: -60px;
    z-index: -3;
}

.tlpartdesctext{
    color: #95b2ef;
    font-size: 30px;
    margin-top: 15px;
    text-align: center;
    width:  200px;
}

.tlparticon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 25px;
    background-color: #95b2ef;
}

.tlparticontext{
    font-size: 60px;
    color: #02051c;
}

.tlpartinfocontainer, .tlparttheorycontainer{
    display: flex;
    justify-content: center;
    width: fit-content;
    height: fit-content;
}

.tlpartinfoiconcontainer, .tlparttheoryiconcontainer{
    background-color: #13183a;
    width: 100px;
    height: 100px;
    margin-left: 15px;
    margin-right: 15px;
    border-radius: 10px;
    border-color: #95b2ef;
    border-width: 5px;
    border-style: solid;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.tlpartinfoicon, .tlparttheoryicon{
    width: 100%;
    transition: all .1s ease-out ;
}

.tlparttheorybutton, .tlpartinfobutton{
    cursor: pointer;
}

.tlparttheorylock, .tlpartinfolock{
    mask-image: url(huilock.svg);
    mask-size: 100%;
    background-color:#95b2ef;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 4;
    opacity: 0;
    transition: all .2s ease-out ;
}

.JSchecktext{
    font-size: 100px;
    color: #95b2ef;
    padding-top: 1000px;
}

.tlpartinfotextcontainer , .tlparttheorytextcontainer{
    width: 250px;
    height: 350px;
    border-radius: 10px;
    background-color: #13183a;
    border-color: #95b2ef;
    border-width: 5px;
    border-style: solid;
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position:relative;
    transition: all .2s ease-in-out;
    opacity: 0;
}

.tlpartinfotext, .tlparttheorytext{
    text-align: center;
    font-size: 20px;
    color: #95b2ef;
    margin-left: 4px;
    margin-right: 4px;
    overflow-wrap: normal;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.tlpartinfoimage{
    width: 95%;
    margin: 3px;
    border-radius: 5px;
}

.tlconnectorcontainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -190px;
}

.tlconnector{
    width: 15px;
    height: 45px;
    border-radius: 15px;
    background-color: #95b2ef;
    margin-bottom: 25px;
    opacity: 0.5;
}

.aboutpagestructure{
    position:absolute;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
}

.abouttextbg{
    width: fit-content + 10px;
    height: fit-content + 10px;
    max-width: 40%;
    background-color: rgba(3, 1, 24, 0.5);
    position:absolute;
    border-left-width: 3px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-style: solid;
    border-top-style: none;
    border-color: #2a326c7d;
    transition: opacity .2s ease-out;
}

.abouttext{
    font-family: ConsoleFont;
    color: white;
    font-size: 18px;
    padding: 5px;
    text-align: center;
    overflow-wrap: normal;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    transition: font-size 0.2s ease-out;
    
}

.windowbanner{
    height: 30px;
    width: 100%;
    background-color: #2a326c7d;
    display: flex;
    justify-content: end;
    align-items: center;
    transition: height 0.2s ease-out;
}

.aboutcrossicon{
    margin: 2px;
    width: 20px;
    height: 90%;
}

.aboutcrossbutton{
    cursor: pointer ;
}

.galpagestructure {
    width: 100%;
    display: none;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    row-gap: 70px;
    margin-bottom: 30px;
}

.galOVcontainer{
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 80px;
    width: fit-content;
    height: fit-content;
}

.galOV{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    border-style: solid;
    border-width: 5px;
    border-color: #95b2ef;
    background-color: #13183a;
    width: 420px;
    height: fit-content;
    overflow: hidden;
}

.galOVimage{
    width: 50%;
    border-right-style: solid;
    border-right-color: #95b2ef;
    border-right-width: 3px;
    cursor:pointer
}

.galOVtextcont{
    display: flex;
    flex-direction: column;
    justify-content: start;
    row-gap: 5px;
    padding: 10px;
    width: 50%;
    height: 10%;
}

.galOVtextheading{
    font-family: FileFont;
    color: #95b2ef;
    font-size: 17px;
    overflow-wrap: normal;
}

.galOVtext{
    font-family: FileFont;
    color: #95b2ef;
    font-size: 14px;
    overflow-wrap: normal;
}

.galdetOVcontainer{
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:hsla(235, 100%, 5%, 0.5);
  z-index: 2;
  opacity: 0;
  transition: opacity, .2s ease-in-out;
}

.galdetOV{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #13183a;
  border-style: solid;
  border-color: #95b2ef;
  border-width: 5px;
  border-radius: 25px;
  width: 700px;
  height: fit-content;
  overflow: hidden;
}

.galdetOVheader{
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 30px;
    column-gap: 65%;
    width:100%;
    background-color:#13183a;
    border-bottom-style: solid;
    border-color: #95b2ef;
    border-width: 3px;
    height: 40px;
}

.galdetOVtextcontainer{
    display: flex;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
}

.galdetOVmaintext{
    font-size: 18px;
    overflow-wrap: normal;
    width: 65%;
    margin: 10px;
    color: #95b2ef;
}

.galdetOVprofile{
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    padding: 10px;
    width: 35%;
}

.galdetOVimage{
    width: 100%;
    border-style: solid;
    border-color: #95b2ef;
    border-width: 3px;
}

.galdetOVtext{
    font-family: FileFont;
    color: #95b2ef;
    font-size: 14px;
    overflow-wrap: normal;
    width: 100%;
    margin-left: 10px;
}

.galdetOVheadercross{
    width: 35px;
    height: 35px;
    cursor: pointer;
}

.galdetOVheadername{
    font-size: 35px;
    color: #95b2ef;
}

.docpagestructure {
    width: 100%;
    display: none;
    justify-content: start;
    align-items: start  ;
    flex-direction: column;
    row-gap: 50px;
}

.doccontents {
    background-color: #13183a;
    border-color: #95b2ef;
    border-radius: 25px;
    border-width: 5px;
    border-style: solid;
    display: flex;
    width: fit-content;
    height: fit-content ;
    margin-left: 4%;
    margin-top: -50px
}

.doccontentstextcont{
    height: fit-content;
    width: 750px;
    display: flex;
    padding: 15px;
    flex-direction: column;
}

.docheading1{
    font-size: 30px;
    color:#95b2ef;
}

.docheading2{
    font-size: 25px;
    color:#95b2ef
}

.doctextelement{
    border-radius: 25px;
    background-color: #13183a;
    display: flex;
    width: fit-content;
    height: fit-content;
    margin-left: 4%;
}

.doctextcontainer{
    padding: 15px;
    display: flex;
    flex-direction: column;
    height: fit-content;
    width: 1000px;
    row-gap: 10px;
}

.doctext{
    font-size: 20px;
    text-decoration: none;
    color:#95b2ef;
    overflow-wrap: normal;
    width: 100%;
    line-height: 1.5;
}

* {
    scrollbar-color: #95b2ef #13183a
}

.docbackcontainer{
    opacity: 0;
    top: 85%;
    left: 92.5%;
    z-index: 4;
    position:sticky;
    transition: all .2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.docbacktotop{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #13183a;
    border-radius: 100%;
    border-style: solid;
    border-color:#2a326c;
    border-width: 2px;
    width: fit-content;
    height: fit-content;
    transition: all .3s ease-in-out;
}

.docbacktotop:hover{
    border-width: 5px;
     border-color:#95b2ef;
}

.docbackimage{
    width: 75px;
    height: 75px;
    transition: all .2s ease-in-out;
}

.docbackimage:hover{
    width: 80px;
    height: 80px;
}

.doclink{
    font-size: 20px;
    text-decoration: none;
    color:#95b2ef;
    overflow-wrap: normal;
    width: 100%;
    line-height: 1.5;
    transition: all .2s ease-in-out;
}

.docpassfield{
    width: 8.5em;
    background-color: #2a326c;
    font-size: 20px;
    height: 1.4em;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0.2em;
    color: #95b2ef;
    border-color: #13183a;
    border-style: solid;
}

.docpassfield::placeholder{
   color: hsla(221, 74%, 76%, 0.5);
}

.doclink:hover{
    color:white
}

.docfile{
    display: flex;
    justify-content:space-between ;
    background-color: #13183a;
    border-width: 5px;
    border-style: solid;
    border-color: #95b2ef;
    
    width: 850px;
    height: 200px;
    border-radius: 10px;
}

.docfiletextcontainer, .docfilerustextcontainer{
    background-color: #323339;
    width: 425px;
    display: flex;
    flex-direction: column;
    padding-top: 15px;
    padding-bottom: 15px;
}

.docfilediscordtext.toolong, .docfilerusdiscordtext.toolong{
    overflow: auto;
    scrollbar-color: #7D7E87 #323339;
}

.docfiletextcontainer{
    border-right-width: 5px;
    border-right-style: solid;
    border-right-color: #95b2ef;
}

.docfilerustextcontainer{
    width: 100%;
    display: none;
}

.docfilediscordtext, .docfilerusdiscordtext{
    padding-left: 20px;
    font-size: 13px;
    line-height: 22px;
    color: #EAEAEC;
    overflow: hidden;
    font-family: DiscordRusFont;
    padding-right: 5px;
}

.docfilediscordtext:hover, .docfilerusdiscordtext:hover{
    background-color: #3A3B41;
}

.docfileothercontainer{
    width: 50%;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.docfiledesccontainer{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    width: 100%;
}

.docfileloadingscreen{
    background-color: #2a326c;
    z-index: 1;
    min-width: 100%;
    height: 0%;
    position: absolute;
    transition: height .2s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.docfileloadingtext{
    font-size: 40px;
    color: #95b2ef;
}

.docfiledesctext{
    color: #95b2ef;
    font-family: FileFont;
    font-size: 16px;
    overflow: hidden;
    margin: 15px;
}

.docfilecontainer{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 4%;
}

.docfilebuttoncontainer{
    background-color: #13183a;
    border-radius: 15px;
    border-style: solid;
    border-width: 5px;
    border-color: #95b2ef;
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    margin-left: 20px;
}

.docfilebuttoncontainer .doctext{
    font-size: 20px;
    text-decoration: none;
    color:#95b2ef;
    overflow-wrap: normal;
    width: 100%;
    line-height: 1;
    text-align: center;
}

.docfileswitchbutton{
    background-color: #95b2ef;
    width: 50px;
    height: 50px;
    margin: 10px;
    border-radius: 100%;
    transition: rotate .2s ease-in-out;
    cursor: pointer;
    position: relative;
}

.docfileswitch{
    background-color: #13183a;
    width: 10px;
    height: 25px;
    border-radius: 5px;
    position: absolute;
    top: 2px;
}

.doctextimage{
    width: 15%;
    border-radius: 15px;
    border-style: solid;
    border-width: 5px;
    border-color:#2a326c;
}

.pjpagestructure {
    width: 100%;
    display: none;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    row-gap: 30px;
}

.pjdropdown{
    background-color: #13183a;
    border-color: #95b2ef;
    border-radius: 25px;
    border-width: 5px;
    border-style: solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 50px;

}

.pjdropdowntextcont{
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    padding: 15px;
    width: fit-content;
    height: fit-content;
}

.pfdropdownheading{
    font-size: 20px;
    color: #95b2ef;
}

.pjdropdowntext{
    font-size: 15px;
    color: #95b2ef;
}

.pjdropdownbutton{
    width: 50px;
    height: 50px;
    background-color: #95b2ef;
    border-radius: 100%;
    margin: 20px;
    cursor: pointer;
    transition: all .2s ease-out;
}

.pjdropdownbuttonicon{
    width: 80%;
    height: 80%;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.pjcontent{
    width: fit-content;
    height: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #13183a;
    border-color: #95b2ef;
    border-radius: 25px;
    border-width: 5px;
    border-style: solid;
    margin-left: 50px;
    transition: all .3s ease-out;
    overflow: hidden;
    padding-left: 30px;
    padding-right: 30px;
    column-gap: 30px;
}

.pjcontentimagecontainer{
    border-radius: 50px;
    row-gap: 5px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #2a326c;
    height: 80%;
    width: 250px;
}

.pjcontenttextcontainer{
    border-radius: 50px;
    row-gap: 5px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #2a326c;
    height: 80%;
    width: 250px;
}

.pjcontentimage{
    width: 85%;
    margin-top: 15px;
    margin-bottom: 5px;
    border-color:#13183a;
    border-width: 3px;
    border-style:solid;
    border-radius: 50px;
}

.pjcontentheading, .pjcontenttext{
    color: #95b2ef;
    overflow-wrap: normal;
    width: 96%;
    text-align: center;
    margin-bottom: 5px;
}

.pjcontentheading{
    font-size: 20px;
}

.pjcontenttext{
    font-size: 17px;
}

.pjcontentimagecontainer .pjcontentheading,.pjcontentimagecontainer .pjcontenttext{
    font-family: FileFont;
    font-size: 15px;
    width: 90%;
}

.pjcontenthorizontalcontainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 30px;
    height: 85%;
    padding: 15px;
}

.pjcontenthorizontaltext{
    border-radius: 50px;
    row-gap: 5px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    background-color: #2a326c;
    height: 50%;
    width: 560px;
}

.pjcontenthorizontaltext .pjcontentheading,.pjcontenthorizontaltext .pjcontenttext{
    color: #95b2ef;
    overflow-wrap: normal;
    width: 90%;
    text-align: start;
    margin-left: 15px;
}

.pjcontenthoricon{
    border-radius: 100%;
    vertical-align: middle;
    width: 1.5em;
    height: 1.5em;
    border-style: solid;
    border-color: #2a326c;
    border-width: 0.1em;
    margin-right: 5px;
}

.pjlink{
    text-decoration: none;
}

.pjlink:hover{
    text-decoration: underline;
}

.cdpagestructure {
    width: 100%;
    display: none;
    justify-content: start;
    flex-direction: column;
    row-gap: 50px;
}

.cdbackgroundcontainer{
    width:  fit-content;
    height: fit-content;
    margin-left: 100px;
    display: flex;
    flex-direction: column;
}

.cdtextbackground{
    background-color: #13183a;
    width: 800px;
    height: fit-content;
    display: flex;
    border-radius: 20px;
    flex-direction: column;
}

.cdheadingbackground{
    background-color: #13183a;
    width: 400px;
    height: 70px;
    margin-left: 30px;
    display: flex;
    justify-content: center;
    border-radius: 20px;
    margin-bottom: -20px;
    align-items: center;
}

.cdtext, .cdheading{
    color: #95b2ef;
    width: 90%;
    padding: 10px;
    padding-left: 25px;
    overflow-wrap:break-word;
    line-height: 2em;
}

.cdtext{
    font-size: 20px;
    row-gap: 20px;
}

.cdlink{
    color: white;
    text-decoration: none;
}

.cdheading{
    font-size: 25px;
    margin-top: -10px;
    text-decoration: underline;
}

.cdtextbackground .cdheading{
    font-size: 22px;
    padding-left: 25px;
    margin-bottom: -10px;
}

.disabled{
    opacity: 0.5;
    cursor: default;
     -webkit-user-select: none;
     -ms-user-select: none; 
     user-select: none; 
}

.emote {
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
}

*:focus {
    outline: none;
}