@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');

/*@import url('https://fonts.googleapis.com/css2?family=Akronim&family=Caesar+Dressing&family=Frijole&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sirin+Stencil&display=swap');*/

@import url('https://fonts.googleapis.com/css2?family=Rye&display=swap');

:root {
    --font-1: "Barlow", sans-serif;
    --font-2: "Rajdhani", sans-serif;
    --font-3: "Rye", serif;
    /*--font-3: "Sirin Stencil", sans-serif;*/
    /*--font-3: "Caesar Dressing", system-ui;*/
    
    --color-w: #fff;
    --color-b: #000;
    --color-444: #444;
    
    --color-1: #be9674; 
    --color-2: #101010; /*manu*/
    --color-3: #0e0e0e; /*box*/
    --color-4: #cb8346;
    --color-5: #020202;
    --color-6: #b7b7b7;
    --color-7: #221e1a;

    --size-15: 15px;
    
    --fontWeight-1: 100;
    --fontWeight-2: 200;
    --fontWeight-3: 300;
    --fontWeight-4: 400;
    --fontWeight-5: 500;
    --fontWeight-6: 600;
    --fontWeight-7: 700;
}

body {
    overflow-x: hidden;
    font-family: var(--font-1);
    background: var(--color-2);
}
a {
    text-decoration: none;
}
a,span {
    display: inline-block;
}

.relative {
    position: relative!important;
}
.navbar-toggler {
    margin-left: auto;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' class='bi bi-list' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E");
    width: 40px;
    height: 40px;
}
.navbar-toggler-icon.open {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' class='bi bi-x' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 4.646a.5.5 0 011-.707L8 6.293l2.354-2.354a.5.5 0 01.707.707L8.707 7l2.354 2.354a.5.5 0 01-.707.707L8 7.707l-2.354 2.354a.5.5 0 01-.707-.707L7.293 7 4.646 4.646z'/%3E%3C/svg%3E");
}
.buttons-box {
    display: flex;
    justify-content: center;
}
.btn1 {
    position: relative;
    z-index: 2;
    padding: 18px 30px;
    text-align: center;
    margin-right: 15px;
    background: var(--color-1);
    color: var(--color-w);
    border-radius: 0;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--font-2);
    width: 140px;
    white-space: nowrap;
    transition: 1s;
}
.btn2 {
    border: 1px solid #222d3b;
    color: #fffdfd;
    background: 0 0;
    padding: 18px 30px;
    text-align: center;
    margin-right: 15px;
    border-radius: 0;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--font-2);
    width: 140px;
    white-space: nowrap;
    transition: 1s;
}
.optimalizePadding {
    padding: 18px 22px;
}
#alert {
    font-family: var(--font-2);
    color: red;
    font-size: 16px;
}
/*-----------------------TOP------------------------*/
.top {
    padding: 10px 0;
    background: var(--color-1);
    color: var(--color-w);
    font-weight: 500;
}
.top span {
    margin-right: 10px;
}
.top .phone,
.top .mail {
    position: relative;
    width: 16px;
    height: 16px;
    top: 3px;
}
.top .phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z'/%3E%3C/svg%3E");
}
.top .mail {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z'/%3E%3C/svg%3E");
}
/*-----------------------NAV------------------------*/
.navbar {
    padding: 45px 0;
}
.navbar .navbar-brand {
    font-family: var(--font-3);
    font-weight: 700;
    font-size: 40px;
    color: var(--color-w);
}
.navbar .navbar-collapse {
    justify-content: flex-end;
}
.navbar .btns {
    display: flex;
    justify-content: flex-end;
}
.navbar .navbar-nav .nav-item a,
.navbar .btn2 {
    position: relative;
    color: var(--color-w);
    margin: 0 20px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    transition: .5s;
}
.navbar .btn2 {
    font-size: 17px;
    border: 0px solid #222d3b;
    padding: 0px 0px;
    margin: 0 8px;
}
.navbar .navbar-nav .nav-item a:hover {
    color: var(--color-1);
    transition: .5s;
} 

/*----------------------HEADER----------------------*/
header {
    background: var(--color-5);
    padding: 100px 0;
}
header .box {
    background: var(--color-3);
    border: 1px solid #323232;
    box-shadow: 0 5px 83px rgb(3 43 86 / 12%);
    overflow: hidden;
    padding: 64px 22px 50px;
    text-align: center;
    transition: .5s;
}
header .box h2 {
    font-family: var(--font-2);
    font-weight: 700;
    font-size: 24px;
    color: var(--color-1);
}
header .box h3 {
    font-family: var(--font-2);
    font-weight: 700;
    font-size: 40px;
    color: var(--color-w);
    margin: 36px 0 15px;
    text-transform: capitalize;
    line-height: 1.2;
}
header .box p {
    font-family: var(--font-2);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-w);
    margin: 0 0 33px;
}
/*-----------------------SEC1-----------------------*/
.sec01 {
    padding: 10px 0 50px 0;
}
/*-----------------------addWordArea-----------------------*/
.addWordArea,
.allWords,
.showTest {
    background: var(--color-2);
}
.addWordArea .box,
.showTest .box {
    background: var(--color-b);
    border: 1px solid var(--color-1);
    padding: 82px 70px 98px 305px;
}
.addWordArea .box .title-box,
.allWords .box .title-box,
.showTest .box .title-box {
    position: relative;
    margin-bottom: 38px;
}
.addWordArea .box .title-box h2,
.allWords .box .title-box h2,
.showTest .box .title-box h2 {
    font-family: var(--font-2);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-1);
    margin: auto;
    text-transform: capitalize;
}
.addWordArea .box .title-box h3,
.allWords .box .title-box h3,
.showTest .box .title-box h3 {
    font-family: var(--font-2);
    font-size: 50px;
    font-weight: 700;
    color: var(--color-w);
    margin-top: 10px;
    text-transform: uppercase;
}
.addWordArea .box .title-box img,
.allWords .box .title-box img,
.showTest .box .title-box img {
    max-width: 100%;
    height: auto;
}
.addWordArea .box .title-box p,
.allWords .box .title-box p,
.showTest .box .title-box p {
    font-family: var(--font-1);
    width: 88%;
    margin-top: 10px;
}
.addWordArea .box .title-box a {
    margin-top: 20px;
}
.addWordArea .box .form-box input,
.addWordArea .box .form-box select,
.addWordArea .box .form-box a, 
.showTest .box .form-box input,
.showTest .box .form-box select,
.showTest .box .form-box a {
    color: var(--color-6);
    color: var(--color-6);
    border-style: solid;
    border-width: 0 0 1px;
    border-color: #282828;
    border-radius: 0;
    padding: 0 20px 0 5px;
    width: 88%;
    margin-top: 10px;
    width: 100%;
    height: 55px;
    outline: 0;
    margin-bottom: 23px;
    background: #FAFAFA00;
}

/*-----------------------allWords-----------------------*/

.allWords .box {
    text-align: center;
    padding: 82px 0 10px;
}
.allWords .box .title-box p {
    width: 100%;
    color: var(--color-6);
}
.allWords .list-box .item-box {
    border: 1px solid var(--color-7);
    padding: 26px 20px 30px;
    margin: 0 0 30px;
    transition: .5s;
}
.allWords .list-box .item-box a {
    margin: 0px 10px;
}
.allWords .list-box .item-box a span {
    position: relative;
    width: 50px;
    height: 50px;
}
.allWords .list-box .item-box a .archive {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23be9674' viewBox='0 0 16 16'%3E%3Cpath d='M12.643 15C13.979 15 15 13.845 15 12.5V5H1v7.5C1 13.845 2.021 15 3.357 15zM5.5 7h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1M.8 1a.8.8 0 0 0-.8.8V3a.8.8 0 0 0 .8.8h14.4A.8.8 0 0 0 16 3V1.8a.8.8 0 0 0-.8-.8z'/%3E%3C/svg%3E");
}
.allWords .list-box .item-box a .wordsDB {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23be9674' viewBox='0 0 16 16'%3E%3Cpath d='M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1'/%3E%3C/svg%3E");
}
.allWords .list-box .item-box a .delete {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23be9674' viewBox='0 0 16 16'%3E%3Cpath d='M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5'/%3E%3C/svg%3E");
}

.allWords .list-box .item-box h2 {
    font-family: var(--font-2);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-w);
    margin-top: 10px;
    text-transform: uppercase;
}

.allWords .list-box .item-box h3 {
    font-family: var(--font-1);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-6);
    text-transform: uppercase;
}

.allWords .list-box .item-box p {
    font-family: var(--font-1);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-6);
    text-transform: uppercase;
}


/*-----------------------allWords-----------------------*/
.showTest h1,
.showTest .box .title-box #iloscPytan {
    color: var(--color-w);
}
.secRep .resultContainer {
    background: var(--color-b);
    border: 1px solid var(--color-1);
    padding: 20px 0 50px;
    margin: auto;
}
.secRep .resultContainer table {
    margin: auto;;
}

.secRep .resultContainer h3 {
    color: var(--color-w);
}
.secRep .resultContainer table tr th {
    color: var(--color-1);
    padding: 10px 40px 40px 40px;
    border: 1px solid #ccc;
}
.secRep .resultContainer table tr td {
    color: var(--color-w);
    border: 1px dotted grey;
    text-transform: capitalize;
    
}
.secRep .resultContainer table .wrong-answer {
    color: red;
}


















/*--------------------ANIMATIONS--------------------*/
@keyframes animationName1 {
    0% {
        
    }
    100% {
        
    }
}





/*----------------------MEDIA----------------------*/

/*Rozdzielczość Monitory - Laptopy*/
@media (max-width: 1399.98px) {
}

/*Rozdzielczość Tablety poziomo */
@media (max-width: 1199.98px) {
}

/*Rozdzielczość Tablety pionowo */
@media (max-width: 991.98px) {
    .top {
        display: none;
    }
    .navbar {
        background: var(--color-1);
        padding: 5px 0;
    }
    .navbar .container {
        padding: 0;
        max-width: 100%;
    }
    .navbar .navbar-brand {
        margin-left: 40px;
        font-size: 35px;
    }
    .navbar .navbar-toggler {
        margin-right: 40px;
    }
    .navbar .btn1 {
        margin-right: 10px;
    }
    .navbar .navbar-collapse {
        background: var(--color-w);
    }
    .navbar .navbar-nav .nav-item {
        border-top: 1px solid #ddd;
    }
    .navbar .navbar-nav .nav-item a,
    .navbar .btn2 {
        color: var(--color-444);
        padding: 12px;
        font-size: 16px;
    }
    .navbar .btn2 {
        width: 0px;
        margin: 0 20px;
        font-weight: 700;
    }
    
    header {
        background: var(--color-2);
        padding: 20px 0;
    } 
    header .box {
        padding: 24px 22px 15px;
    }
    header .box h3 {
        margin: 16px 0 8px;
    }
    header .box p {
        margin: 0 0 10px;
    }
    
    .sec01 .box {
        display: flex;
        justify-content: center;
    }
    .sec01 .box a {
        margin-right: 0px;
        margin: 0 10px;
    }
}

/*Rozdzielczość Smartfony Poziomo */
@media (max-width: 767.98px) {
    
    .navbar .btns {
        display: block;
    }
    .addWordArea .box,
    .showTest .box {
        padding: 82px 20px 98px 20px;
        margin: 30px 0 0 0;
    }
    .addWordArea .box .title-box h2,
    .allWords .box .title-box h2,
    .showTest .box .title-box h2 {
        margin-bottom: 4px;
        font-size: 15px;
    }
    .addWordArea .box .title-box h3,
    .allWords .box .title-box h3,
    .showTest .box .title-box h3 {
        line-height: 30px;
        font-size: 20px;
    }
    .addWordArea .box .title-box p,
    .allWords .box .title-box p,
    .showTest .box .title-box p {
        width: 100%;
    }
    .allWords .box {
        padding: 82px 20px 10px 20px;
    }
    .secRep .resultContainer table tr th {
        padding: 10px 0 40px 0;
    }
}

/*Rozdzielczość Smartfony Pionowo */
@media (max-width: 575.98px) {
}