:root{
    --facebook-color : #3b5998;
    --td-backcolor:#b6caf3;
    --text-color:white;
    --text-color1:rgb(222, 220, 220);
    --text-color2:rgb(246, 245, 245);
}
* {
    margin: 0;
    padding: 0;
}
html {
    box-sizing: border-box;
    font-weight: 500;
}
.container {
    height: 100vh;
    background:var(--facebook-color);
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* align-items: center; */
}
.list-table-a {
    text-decoration: none;
    color:black;
    font-size:1rem;
}
.list-main-div, .view-content, .update-content, .write-content, .confirmdel-content {
    width:1000px;
    /* height:100vh; */
    margin:auto;
    display:flex;
    justify-content: center;
    /* align-items: center; */
    /* border: 2px solid grey; */
    /* overflow: hidden; */
    background: #f8f8f8;
    flex-direction: column;
}
.list-table-td-no, .list-table-td-name, .list-table-td-date, .list-table-td-subject, .view-content-td-number, .view-content-td-date, .view-content-td-name, .view-content-td-subject, .view-content-td-memo1, .update-content-td-number, .update-content-td-date,.update-content-td-name,.update-content-td-subject,.update-content-td-memo, .update-content-td-pass, .write-content-td-name, .write-content-td-subject, .write-content-td-memo, .write-content-td-pass {
    text-align: center;
}
.view-content-td-memo2 {
    line-height:180%;
    height:300px;
    vertical-align: top;
    overflow: hidden;
}

.list-table-td-subject:hover {
    background:#f8f8f8;
}
.list-tag {
    display: inline-block;
    text-align: center;
    padding:0.5rem;
    background: var(--facebook-color);
}
.list-tag-A {
    
}
.list-tag > a, a {
    text-decoration: none;
    color: var(--text-color);
    display:inline-block;
    padding:0.3rem;
}
.list-head-tag {
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color:azure;
    text-align: center;
    padding:0.5rem;
    background: var(--facebook-color);
}
.list-head-tag > a {
    position: absolute;
    right: 10px;
    padding:0.2rem;
    font-size: 0.8rem;
}

th {
	background-color: #ccc;	
}
td, th {
	text-align: left;
	padding: 0.5rem 1rem;
}

td {
    background: var(--td-backcolor);
}

.login-content {
    position: relative;
    text-align: center;
    width:380px;
    height:170px;
    margin:auto;
    display:flex;
    justify-content: center;
    /* border: 2px solid grey; */
    overflow: hidden;
    background: var(--td-backcolor);
    flex-direction: column;
    border-radius: 0.3rem;
}
.login-content > p {
    position:absolute;
    top:15px;
    left:110px;
    
}
.login-id {
    position: absolute;
    top:60px;
    left: 90px;
}
.login-input {
    position: absolute;
    top:60px;
    left: 110px;
}
.login-pw {
    position: absolute;
    top:90px;
    left: 20px;
}
.login-pw-input {
    position: absolute;
    top:90px;
    left: 110px;
}
.login-box {
    position: absolute;
    top:125px;
    left: 168px;
    padding: 4px;
    border:none;
}

.view-table, .update-table, .write-table, .confirmdel-table {
    width: 100%;
}
.update-textarea {
    border:none;
    font-weight: 500;
    width: 100%;
    height:300px;
    overflow:auto;
    line-height:200%;
    resize:none;
    background:var(--text-color2);
}
.write-content-td-memo1 {
    width: 100%;
    height:300px;
    line-height:200%;
    background:var(--text-color2);
    resize:none;
    outline:none;
    font-size:1.2rem;
}
.update-content-td-name1, .update-content-td-pass1, .write-content-td-name1, .write-content-td-pass1 {
    width: 30%;
    border:none;
    padding:0.3rem;
    background:var(--text-color2);
}
.update-content-td-subject1, .write-content-td-subject1 {
    width: 60%;
    padding:0.3rem;
    background:var(--text-color2);
}

.confirmdel-table a {
    color:black;
    font-size:0.9rem;
}

.update-textarea:focus, .update-content-td-name1, .update-content-td-subject1, .update-content-td-pass1 {
    outline:none;
}
.update-content-td-tag {
    background:var(--facebook-color);
}

@media screen and (max-width:1000px) {
    .list-main-div, .view-content, .update-content, .write-content {
        width:100%;
    }
}