/* CSS Reset */
html, body, div, p, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

a:link,
a:visited {
    text-decoration: none;
    color: #000;
}

a:link:hover,
a:visited:hover {
    color: rgb(2, 177, 247);
}

body {
    margin-bottom: 160px;
    font-family: "Source Sans Pro", Arial, sans-serif;
}

html {
    position: relative;
    min-height: 100%;
}


/* Navigation Bar */
.nav-bar-center {
    display: flex;
    z-index: 11;
    position: fixed;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 70px;
    background-color: #fff;
    color: #1f2b3e;;
    font-size: 17px;
    font-weight: bold;
    box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.1);
}

.nav-bar-width {
    width: 1200px;
}

.nav-bar {
    display: flex;
    align-items: center;
    margin: 10px;
}

.nav-bar-left-title {
    display: flex;
    flex: auto;
    align-items: center;
    width: 50%;
}

.nav-bar-left-title-web-title {
    flex: none;
    cursor: pointer;
}

.nav-bar-left-title-web-title-color {
    color: #1f2b3e;
}

.nav-bar-logo {
    width: 120px;
    height: auto;
}

.nav-bar-left-title-drama-list {
    display: flex;
    justify-content: left;
    align-items: center;
    flex: none;
    margin-left: 20px;
}

.nav-bar-left-title-drama-icon {
    width: 30px;
    height: auto;
    cursor: pointer;
}

.nav-bar-left-title-drama-title {
    margin-left: 15px;
    cursor: pointer;
}

.nav-bar-right-title {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    width: 40%;
}

.nav-bar-right-title-add-drama-icon {
    width: 30px;
    height: auto;
    cursor: pointer;
}

.nav-bar-right-title-add-drama {
    flex: none;
    margin: 0px 20px 0px 10px;
    cursor: pointer;
}

.nav-bar-right-title-add-drama:hover {
    color: rgb(2, 177, 247);
}

.nav-bar-right-title-signin-icon {
    width: 30px;
    height: auto;
    cursor: pointer;
}

.nav-bar-right-title-signin-before {
    flex: none;
    margin-left: 10px;
    cursor: pointer;
}

.nav-bar-right-title-profile-picture {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgb(209, 206, 206);
    object-fit: cover;
}

.nav-bar-right-title-profile-picture:hover {
    filter: brightness(0.8) contrast(120%);
}


/* Footer */
.footer {
    display: flex;
    position: absolute;
    bottom: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    margin-top: 80px;
    background-color: #1f2b3e;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.footer-text {
    margin: 20px;
}

/* Color */
:root {
    --white-color: #fff;
    --gray-color: gray;
}

/* Scroll Bar */
    body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: var(--white-color);
}

body::-webkit-scrollbar-thumb {
    background: var(--gray-color);
    border-radius: 10px;
}


/* Other Devices */
@media(max-width:1200px) {

    .nav-bar-logo {
        margin-left: 20px;
    }

    .nav-bar-right-title-signin {
        margin-right: 20px;
    }

    .nav-bar-right-title-profile-picture {
        margin-right: 20px;
    }

}

@media(max-width:600px) {

    .nav-bar-left-title-drama-title,
    .nav-bar-right-title-add-drama,
    .nav-bar-right-title-signin-before {
        display: none;
    }

    .nav-bar-right-title-add-drama-icon,
    .nav-bar-right-title-signin-icon,
    .nav-bar-right-title-signin-after {
        margin-right: 20px;
    }

    .nav-bar-right-title-profile-picture {
        margin-right: 0px;
    }

}