:root {
    --widget-color: #101010;
    --green: #00D000;
    --red: #D00000;
    --blue: #34BBB9;
}
.horizontal{
    display: flex;
    height: 100vh;
}
.horizontal .content{
    overflow-y: scroll;
    width: 100%;
}
.widget{
    padding: 25px;
    margin: 12.5px;
    background: var(--widget-color);
    display: flex;
    flex-direction: column;
}
.widget h3{
    font-size: 20px;
    font-weight: 500;
}

/* nav */

nav{
    padding: 25px;
    background: var(--widget-color);
    height: calc(100% - 50px);
}
nav a .logo{
    height: 30px;
}
nav a .logosmall{
    display: none;
}
nav .items{
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 25px;
}
nav .items a{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 500;
    filter: brightness(50%);
}
nav .items a:hover{
    filter: brightness(100%);
}
nav .items a.active{
    filter: brightness(100%);
}
nav .items a img{
    width: 30px;
}

.secnav{
    display: flex;
}
.secnav .items{
    height: fit-content;
}
.secnav .items div{
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 25px;
}
.secnav .items div a{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 500;
    filter: brightness(50%);
}
.secnav .items div a:hover{
    filter: brightness(100%);
}
.secnav .items div a.active{
    filter: brightness(100%);
}
.secnav .items div a img{
    width: 30px;
}

@media (max-width: 1000px) {
    nav .items a span{
        display: none;
    }
    nav a .logo{
        display: none;
    }
    nav a .logosmall{
        display: block;
    }
    nav .items a img{
        padding: 5px;
    }
    
    .secnav{
        flex-direction: column;
    }
    .secnav .items div{
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.secnav form label{
    display: flex;
    flex-direction: column;
    padding: 12.5px 0;
    gap: 5px;
    font-size: 20px;
    font-weight: 400;
}
.secnav form .title{
    display: flex;
}
.secnav form .title h3{
    margin-right: auto;
}
.secnav form .title button{
    margin-left: 25px;
    margin: -6px 0;
}

.table{
    overflow-x: scroll;
    margin: 0 -25px;
}
.table .header{
    display: flex;
    margin: 25px 0 10px;
    padding: 0 25px;
}
.table .header h4{
    font-size: 16px;
    font-weight: 300;
    color: #808080;
}
.table a{
    display: flex;
    padding: 10px 25px;
    font-size: 20px;
    font-weight: 400;
    border-bottom: solid 1px #505050;
    min-width: fit-content;
}
.table a:last-of-type{
    border-bottom: none;
}
.table a:hover{
    background: #505050;
}

/* documentation */

.widget h4{
    font-size: 18px;
    font-weight: 400;
    margin: 25px 0 10px;
    color: #808080;
    text-transform: uppercase;
}
.widget p{
    font-size: 16px;
    margin: 10px 0;
}
.widget p a{
    font-weight: 600;
    color: var(--blue);
}
.widget bold{
    font-weight: 600;
}
.widget .code{
    margin: 10px 0;
    padding: 12px 25px;
    background: #303030;
    border-radius: 10px;
    outline: none;
    border: none;
    width: calc(100% - 50px);
    max-width: 600px;
}

.parameters{
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: fit-content;
}
.parameters .parameter{
    background: #202020;
    border-radius: 10px;
    padding: 25px;
}
.parameters .parameter section{
    display: flex;
    justify-content: space-between;
    gap: 50px;
}
.parameters .parameter div{
    display: flex;
    gap: 15px;
    align-items: center;
}
.parameters .parameter .name{
    font-size: 20px;
    font-weight: 500;
}
.parameters .parameter .type{
    color: #808080;
}
.parameters .parameter .note{
    color: var(--red);
}
.parameters .parameter .example{
    border: none;
    outline: none;
    color: #808080;
    padding: 12px 25px;
    background: #303030;
    border-radius: 10px;
    width: fit-content;
    font-size: 16px;
    overflow: scroll;
    max-width: calc(100% - 50px);
}

.endpoints .endpoint > input{
    display: none;
}
.endpoints .endpoint > div{
    display: none;
}
.endpoints .endpoint > input:checked + label img{
    transform: rotate(90deg);
}
.endpoints .endpoint > input:checked + label + div{
    display: block;
}
.endpoints .endpoint .title{
    display: flex;
    align-items: center;
}
.endpoints .endpoint .title img{
    height: 30px;
}

.endpoints .endpoint .url{
    margin: 10px 0;
    padding: 10px;
    background: #202020;
    border-radius: 10px;
    max-width: 600px;
    display: flex;
    gap: 25px;
    align-items: center;
}
.endpoints .endpoint .url .methods{
    display: flex;
    gap: 10px;
}
.endpoints .endpoint .url .methods span{
    padding: 6px 15px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 500;
    background: #303030;
}
.endpoints .endpoint .url .methods .green{
    color: var(--green);
}
.endpoints .endpoint .url .methods .blue{
    color: var(--blue);
}
.endpoints .endpoint .url h3{
    margin-right: 25px;
}

@media (max-width: 900px) {
    .endpoints .endpoint .url{
        flex-direction: column;
        align-items: start;
        gap: 10px;
        padding: 25px;
    }
    .parameters .parameter section{
        flex-direction: column;
        gap: 10px;
    }
}
@media (max-width: 500px) {
    .parameters .parameter div{
        flex-wrap: wrap;
        gap: 10px;
    }
}