404 Not Found

PATH: root / quizcss

@import "parts/reset";
html {
    scrollbar-color: #000 #fff;
    scrollbar-width: thin;
    font-size: 18px;
    scroll-behavior: smooth;
    @media only screen and (max-width: 1600px) {
        font-size: 16px;
    }
    @media only screen and (max-width: 1400px) {
        font-size: 15px;
    }
}

html,
body {
    height: 100%;
}

body {
    background: #f7f7f7;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    line-height: 1.3;
    color: #333;
    font-size: 16px;
    font-weight: 400;
}

h1,
h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

p {
    margin-bottom: 10px;
    &:last-of-type {
        margin-bottom: 0;
    }
}

a {
    transition: all 0.3s ease 0s;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    &:hover {
        color: #09C269;
    }
}

#content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
}

#mess {
    color: var(--Black, #15181A);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
}

.quiz-box {
    .flex {
        display: flex;
    }
    .field {}
    .btn {
        border: none;
        background: #0A7B58;
        color: #fff;
        padding: 15px 30px;
        font-weight: 600;
        height: auto;
        text-align: center;
        text-decoration: none;
        transition: all .3s ease 0s;
        &:hover,
        &:focus,
        &:active {
            background: #333;
        }
    }
    .btn2 {
        border-radius: 8px;
        background: var(--Green, #0A7B58);
        text-decoration: none;
        color: #fff;
        width: auto;
        cursor: pointer;
        &:hover,
        &:focus {
            color: #fff;
            background: var(--Green, #086648);
        }
    }
    button {
        width: 100%;
        outline: none;
        cursor: pointer;
        transition: all 0.3s ease 0s;
        background: #FFF;
        text-align: left;
        margin-top: 10px;
        padding: 12px;
        border-radius: 7px;
        border: 2px solid #15181A;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        &:focus {
            background: initial;
        }
        &.good {
            background: #0A7B58;
            pointer-events: none;
            color: #fff;
        }
        &.false {
            pointer-events: none;
            color: #fff;
            background: #C30B0B;
        }
        &:hover,
        &:active {
            background: #ececec;
        }
    }
    h2 {
        text-align: center;
        font-size: 2rem;
        width: 100%;
        margin-top: 3rem;
    }
}

#score {
    font-weight: 600;
    margin-left: 0px;
    margin-top: 2px;
    color: #0A7B58;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    position: absolute;
    visibility: hidden;
    &.show {
        visibility: visible;
    }
}

.time {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    margin-left: 10px;
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    top: 2px;
    span {
        margin-left: 10px;
    }
}

.p-big {
    margin-bottom: 10px!important;
    font-size: 20px;
}

.time-line {
    width: 100%;
    height: 8px;
    background: #D9D9D9;
    position: absolute;
    top: -17px;
    border-radius: 7px;
    &.red {
        background: #C30B0B;
    }
}

#time-line {
    background: #0A7B58;
    height: 8px;
    display: inline-block;
    z-index: 1;
    width: 100%;
    position: absolute;
    border-radius: 7px;
    &.start {
        animation: 60s in-out linear;
        width: 0;
    }
    @keyframes in-out {
        0% {
            width: 100%;
            background: #0A7B58;
        }
        50% {
            background: #0A7B58;
        }
        100% {
            width: 0;
            background: #C30B0B;
        }
    }
}

.totaltime-f {
    position: fixed;
    left: 20px;
    top: 20px;
}

.quiz-box {
    width: 848px;
    min-height: 456px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 60px;
    button {}
    .bg {
        background: transparent;
        padding: 50px;
        width: 100%;
        min-height: 366px;
        #question {
            text-align: center;
            width: 100%;
            font-size: 24px;
            font-style: normal;
            font-weight: 600;
            margin-top: 3rem;
        }
        p,
        h2,
        h1 {}
        &.bg-center {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
            h2 {
                margin: 0;
                margin-bottom: 10px;
            }
        }
    }
    .start {
        flex-direction: column;
        display: flex;
        p {
            text-align: left;
        }
        .p1 {
            margin: 15px;
        }
        .center {
            text-align: center;
        }
        .btn {
            margin-bottom: 10px;
        }
        &.hidden {
            opacity: 0;
            display: none;
        }
    }
    .quiz {
        display: flex;
        width: 100%;
        flex-direction: column;
        visibility: hidden;
        opacity: 0;
        display: none;
        transition: all .4s;
        &.show {
            display: flex;
            opacity: 1;
            visibility: visible;
        }
    }
}

.flex {
    position: relative;
}

#div-lose {
    visibility: hidden;
    opacity: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    position: relative;
    text-align: center;
    &.show {
        display: flex;
        opacity: 1;
        visibility: visible;
    }
}

#div-lose2 {
    visibility: hidden;
    opacity: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    position: relative;
    text-align: center;
    &.show {
        display: flex;
        opacity: 1;
        visibility: visible;
    }
}

.info-box {
    display: flex;
    padding: 10px 0;
    margin: 15px 0;
    svg {
        color: #09C269;
        fill: #09C269;
        width: auto;
        height: 21px;
    }
    p {
        text-align: center;
        width: 100%;
        a {
            color: #086648;
            font-weight: 600;
            &:hover {
                color: #09C269;
            }
        }
    }
}

.win {
    display: none;
    display: block;
    opacity: 1;
    visibility: visible;
    h2 {
        margin-bottom: 0;
        color: var(--Green, #0A7B58);
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        text-transform: uppercase;
    }
    .p-big {
        color: var(--Black, #15181A);
        text-align: center;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 130%;
        margin-bottom: 1.5rem!important;
        /* 31.2px */
    }
    .center {
        display: flex;
        flex-direction: column;
        text-align: center;
        max-width: 500px;
        justify-content: center;
        margin: auto;
    }
    .btn {
        margin-bottom: 10px;
    }
    &.show {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}

#time-info {
    font-weight: 600;
}

form {
    >div {
        margin-top: 10px;
        position: relative;
        text-align: left;
        label {
            cursor: pointer;
            padding-left: 30px;
            font-size: 16px;
            display: block;
            a {
                font-weight: 600;
                color: #0A7B58;
            }
        }
    }
    input[type=text],
    input[type=email] {
        width: 100%;
        outline: none;
        transition: all .3s ease 0s;
        border-radius: 7px;
        border: 2px solid var(--Black, #15181A);
        background: #fff;
        text-align: left;
        margin-top: 10px;
        padding: 10px;
        padding-left: 15px;
        font-weight: 600;
    }
    input[type="checkbox"] {
        margin: 0;
        left: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        text-align: left;
    }
    label::before {
        content: "";
        width: 20px !important;
        height: 20px !important;
        // transform: scale(0);
        transition: 120ms transform ease-in-out;
        border-radius: 4px;
        border: 2px solid var(--Black, #15181A);
        display: block;
        opacity: 1;
        position: absolute;
        top: 0;
        left: 0;
    }
    input[type=checkbox]:checked~label::before {
        background: #086648;
    }
}

.win {
    .btn {
        margin-top: 20px;
    }
}

.show-all {
    justify-content: flex-start!important;
    align-items: flex-start!important;
    padding: 20px;
    margin: 10px 0;
    ul {
        font-size: 15px;
        width: 100%;
        li {
            border-bottom: 1px solid #111;
            padding: 10px 0;
            &:hover {
                background: #dbdbdb;
            }
            span {
                width: 10%;
                display: inline-block;
                &.id {
                    width: 40px;
                }
                &.id2 {
                    width: 70px;
                }
                &.email {
                    width: 300px;
                }
            }
        }
    }
}

[+] ..
[-] bg.jpg [edit]
[+] parts
[-] style.scss [edit]
[-] style.css [edit]