:root {
    --p: #00be6d;
    --b: #f2f2f2;
    --t: black;
    --gradPrime: linear-gradient(#017a47, #02ed8a);
    --revGradPrime: linear-gradient(#02ed8a, #017a47);
    --gradBlack: linear-gradient(180deg, #575757, #383838 50.52%, #303030);
    --reversGradBlack: linear-gradient(180deg, #303030, 50.52%, #575757);
    --gradWhite: linear-gradient(#fff, #bbb);
    --x: #3b3b3b;
    --d: #292b2c;
    --lighterblack: #e6dcdc;
    --lightblack: #a7a7a7;
    --premidlightblack: #5b5b5b;
    --midblack: #bbbbbb;
    --midlightblack: #3b3b3b;
    --mediumblack: #2c2c2c;
    --black: black;
    --white: white;
    --lightwhite: #a8a8a8
    --s: #e8e8e8
    --dp: #cf9802;
    --lb: #141414;
    --tb: #000000ee;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: content-box;
    font-family: sans-serif;
}

body { background-color: var(--b); }

a { text-decoration: none; }

#container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    position: relative;
}

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

#top_nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gradBlack);
    padding: 5px 5px 3px 5px;
}
#top_nav .left {
    display: flex;
    align-items: center;
}
#top_nav .left .ham{
    margin: 0 10px;
}
#top_nav .right {
    display: flex;
    align-items: center;
}
#top_nav .right .login_btn {
    color: var(--p);
    border: 2px solid var(--p);
    padding: 5px 20px;
    font-weight: bold;
}

#left_list {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    left:-100vw;
    top: 0;
    position: absolute;
    background: white;
    z-index: 100;
    transition: left 0.5s ease;
}
#left_list .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gradBlack);
    width: calc(100vw-40px);
    padding: 3px 10px;
}
#left_list .inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 90%; 
}
#left_list .inner .links {
    display: flex;
    flex-direction: column;
    margin: 20px;
}
#left_list .inner .links .link {
    display: flex;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: var(--t);
    margin: 5px;
    padding: 10px;
}
.inner .social {
    display: flex;
    justify-content: space-evenly;
}
.inner .social .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
	color: black;
}
.inner .footer {
    display: flex;
    flex-direction: column;
    background: var(--s);
    text-align: center;
    color: var(--t);
}

.hide_eye {
    display: none;
}

#result_wrapper {
    display: none;
    justify-content: center;
    align-items: center;
    width: calc(100% - 40px);
    padding: 10px;
    height: 100%;
}
#result_wrapper #result_message {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.next_arrow { 
    border: solid gray;
    transform: rotate(-45deg);
}

.arrow, .white_arrow, .back_arrow, .next_arrow, .white_up_arrow {
    border-width: 0 2px 2px 0;
    padding: 4px;
}

.res_message {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.loader {
    display: flex;
    justify-self: center;
    align-self: center;
    border: 16px solid #f3f3f3;
    border-top: 16px solid var(--p);
    border-radius: 50%;
    margin: 50px;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}
.small_loader {
    display: flex;
    justify-self: center;
    align-self: center;
    border: 5px solid #f3f3f3;
    border-top: 5px solid black;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    animation: spin 2s linear infinite;
}
.small_green_loader {
    display: flex;
    justify-self: center;
    align-self: center;
    border: 5px solid #f3f3f3;
    border-top: 5px solid green;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    } 100% {
        transform: rotate(360deg);
    }
}