/* THIS WHOLE CSS WAS MADE FROM SCRATCH BY @rdaphq  */



/* @import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-bold-rounded/css/uicons-bold-rounded.css'); */



/* FONTS */

.outfit {

  font-family: "Outfit", sans-serif;

  font-optical-sizing: auto;

  font-style: normal;

}

.inter {

  font-family: "Inter", sans-serif;

  font-optical-sizing: auto;

  font-style: normal;

}

.lexend {

  font-family: "Lexend", sans-serif;

  font-optical-sizing: auto;

  font-style: normal;

}

.funnel-sans {

    font-family: "Funnel Sans", sans-serif;

}

.funnel-display {

    font-family: "Funnel Display", sans-serif;

}





/* General Reset */

body, h1, h2, p, ul, li, a {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    user-select: none;

}   

  

body {

    font-family: Arial, sans-serif;

    line-height: 1.6;

    color: #333;

    transition: all .4s ease;

    width: 100%;

    min-width: 360px;

    scroll-behavior: smooth;

    height: 100%;

}

  

.header {

    background-color: #202225;

    color: #fff;

    text-align: center;

    transition: all .4s ease;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 21px 0;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 60;

    box-shadow: 0 1px 7px #c2c2c2;

}

.logo {

    height: 50px;

    margin-left: 30px;

    vertical-align: left;

}

  

.container {

    display: flex;

    height: auto;

    margin-top: 100px;

    z-index: 1;

}



.sb-icon {

    margin-right: 6px;

    display: inline-block;

    position: relative;

    top: 1px;

    color: #0077d8;

}

.sb-icon-l {

    margin-left: 10px;

    display: inline-block;

    position: relative;

    top: 3px;

}

.sidebar {

    background-color: #2f3136;

    color: #fff;

    min-width: 270px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    transition: all .4s ease;

    padding: 20px 0;

    z-index: 40;

    height: auto;

}

.nav-container {

    position: fixed;

    overflow-y: scroll;

    scrollbar-width: none;

    scroll-behavior: smooth;

    top: 0;

    bottom: 0;

    padding: 30px;

    margin-top: 90px;

    z-index: 40;

}

.sidebar #sub {

    font-size: 18px;

    text-transform: uppercase;

    margin-bottom: 8px;

    font-weight: 800;

    display: inline-block;

    font-family: "Funnel Display", sans-serif;

} 

.sidebar ul {

    list-style: none;

    margin-bottom: 30px;

} 

.sidebar a {

    color: #b9bbbe;

    text-decoration: none;

    display: block;

    padding: 7px 0;

    transition: color .3s ease;

}

.sidebar a:hover {

    color: #fff;

}

  

.content {
    min-height: 100vh;

    flex-grow: 1;

    padding: 20px 50px 20px 50px;

}



.content .headtitle {

    margin: 20px 0;

    font-size: 26px;

    font-weight: 700;

    text-transform: uppercase;

    line-height: 1;

    font-family: "Funnel Sans", sans-serif;

}



.content section .images-container {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: left;

    align-items: center;

    gap: 20px;

    margin-bottom: 30px;

}

.content section #img {

    /* border-radius: 14px; */

    border: 2px solid #000;

    box-shadow: 6px 6px 0 #000;

    max-width: 80%;

    margin-bottom: 80px;

    display: block;

    transition: all .4s ease;

    overflow: hidden;

}

body.dark .content section #img {

    /* border-radius: 14px; */

    border: 2px solid #bebebe;

    box-shadow: 6px 6px 0 #bebebe;

    /* border: 2px solid #333;

    box-shadow: 6px 6px 0 #333; */

    max-width: 80%;

    margin-bottom: 80px;

    display: block;

    transition: all .4s ease;

    overflow: hidden;

}

.content section p {

    padding-bottom: 30px;

    font-size: 16px;

    line-height: 1.6;

}

.content section p .bottomspacing {

    padding-bottom: 60px;

}



.content section p a {

    margin-bottom: 30px;

    font-size: 16px;

    line-height: 1.6;

    color: #0077d8;

    text-decoration: none;

    transition: all .2s ease;

}

.content section a:hover {

    color: #00406e;

}



.head {

    background-color: #be9cff;

    padding: 20px 30px;

    border-radius: 16px;

    margin-top: 20px;

    border: 5px solid #a078ec;

    color: #111;

    margin-bottom: 40px;

}



h1 {

    font-size: 40px;

    font-family: "Funnel Display", sans-serif;

    margin-bottom: 10px;

    font-weight: 700;

}



h2 {

    margin-bottom: 4px;

    font-size: 26px;

    font-family: "Funnel Sans", sans-serif;

    font-weight: 700;

}

 

/* Light Theme (default) */

body.light {

    background-color: #f4f4f4;

    color: #3a3a3a;

}



body.light .content section p {

    color: #6b6b6b;

}

  

body.light .header {

    background-color: #e4e4e4;

    color: #000;

    box-shadow: 0 0 10px #9b9b9b;

}

  

body.light .sidebar {

    background-color: #ddd;

    color: #000;

}

  

body.light .sidebar a {

    color: #444;

}

  

body.light .sidebar a:hover {

    color: #000;

}





  

  /* Dark Theme */

body.dark {

    background-color: #18191c;

    color: #fff;

}



body.dark .content section p {

    color: #c5c5c5;

}

  

body.dark .header {

    background-color: #202225;

    color: #fff;

    box-shadow: 0 0 10px #111;

}

  

body.dark .sidebar {

    background-color: #2f3136;

    color: #fff;

}

  

body.dark .sidebar a {

    color: #b9bbbe;

}

  

body.dark .sidebar a:hover {

    color: #fff;

}



.theme-toggle, .header-responsive {

    background: #444;

    color: #fff;

    border: none;

    padding: 10px 15px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 12px;

    position: absolute;

    font-family: "Funnel Display", sans-serif;

}



.theme-toggle {

    right: 26px;

    margin-left: auto;

    transition: all .2s ease;

} 

.theme-toggle:hover {

    background: #0077d8;

}



.header-responsive {

    right: 92px;

    margin-left: auto;

    transition: all .2s ease;

}

.header-responsive:hover {

    background: #ff5454;

}





html {

    scrollbar-width: 10px;

    scrollbar-color: #1b1b1b #303030;

    scroll-behavior: smooth;

}

/* ::-webkit-scrollbar {

    width: 8px;

}

::-webkit-scrollbar-track {

    background: #181818;

}

::-webkit-scrollbar-thumb {

    background: #4e4e4e;

    background-clip: content-box;

    border-radius: 100px;

    transition: all .2s ease;

}

::-webkit-scrollbar-thumb:hover {

    background-color: #747474;

} */



.paging {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 12px 0;

    margin: 80px 0 20px 0;

}



.btn {

    border: 2px solid transparent;

    text-decoration: none;

    padding: 10px 30px;

    background: #444;

    color: #fff;

    border-radius: 8px;

    margin-right: 10px;

    font-weight: 600;

    transition: all .2s ease;

    font-size: 16px;

    font-family: "Funnel Display", sans-serif;

}

.btn:hover {

    background: #0077d8;

}



footer {

    background-color: #0e0e0e;

    padding: 10px 0;

    z-index: 50;

    color: #fff;

    text-align: center;

    position: relative;

    font-size: 12px;

}



#scrollButton {

    position: fixed;

    bottom: 30px;

    right: 30px;

    z-index: 60;

    border: none;

    border-radius: 26px;

    outline: none;

    font-size: 12px;

    padding: 18px 20px;

    cursor: pointer;

    background-color: #0077d8;

    transition: all .2s ease;

    display: none;

    scroll-behavior: smooth;

}

#scrollButton:hover {

    background-color: #005fa3;

}



.examples-block {

    padding: 12px 0;

    margin-bottom: 80px;

}

.toExample {

    display: block;

    margin-bottom: 14px;

    text-decoration: none;

    color: #0077d8;

}







.tip, .warn, .important {

    padding: 20px;

    width: fit-content;

    border-radius: 12px;

    margin-bottom: 40px;

}

.tip i, .warn i, .important i {

    position: relative;

    top: 5px;

    margin-right: 10px;

    font-size: 22px;

}

.tip {

    border: 3px solid #57ff8f;

    background-color: #85ffbc;

    color: #407440;

}

.warn {

    border: 3px solid #ffe23d;

    background-color: #ffec7e;

    color: #a59a3a;

}

.important {

    border: 3px solid #ff7a7a;

    background-color: #ffa9a9;

    color: #c94a4a;

}

.anotherlink {

    font-size: 18px;

    line-height: 2;

    color: #0077d8;

    text-decoration: none;

    transition: all .2s ease;

}



.errors-container {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);



    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.errors-container h1 {

    font-size: 200px;

    font-family: "Funnel Display", sans-serif;

    font-weight: 800;

    color: #0077d8;

    margin: 0;

    line-height: 1.2;

}

.errors-container p {

    font-size: 40px;

    text-align: center;

    font-family: "Funnel Sans", sans-serif;

    font-weight: 600;

    line-height: 1;

    margin-bottom: 60px;

}

.errors-container a {

    background-color: #111;

    padding: 10px 26px;

    border-radius: 32px;

    font-size: 18px;

    color: #e7e7e7;

    text-decoration: none;

    transition: all .2s ease;

}











/* Responsive Design */

@media only screen and (max-width: 940px) {

    .container {

      flex-direction: column;

    }

  

    .sidebar {

        display: none;

        position: relative;

    }

    .nav-container {

        position: relative;

        margin-top: 10px;

    }



    .title {

        text-align: right;

    }



    .content {

        margin-left: 0;

    }



    .content section .images-container {

        display: flex;

        flex-direction: column;

        flex-wrap: wrap;

        justify-content: center;

        align-items: center;

    }

}



@media only screen and (max-width: 660px) {

    .container {

      flex-direction: column;

    }

  

    .sidebar {

      display: none;

    }



    .title {

        text-align: right;

    }



    .btn {

        font-size: 12px;

        padding: 8px 20px;

    }

}