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

/* 페이지 공통 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    font-family: 'Secular One', sans-serif;
}
.container{
    width: 100vw;
    height: 100vh;
    /* background-color:rgb(105, 160, 151); */
    background-color: #333D79;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title{
    padding-top:100px;
}
.title span{
    font-size: 36px;
    color: white;
}
.contents{
    background: white;
    margin-top: 100px;
    width: 30%;
    height: 70%;
    text-align: center;
}

/* input number 옆 스크롤 삭제 */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.bgblack{
    width: 100vw;
    height: 100vh;
    background-color: gray;
}

/* index.html */
.contents_header1{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    border-bottom: 2px solid rgb(0, 0, 0);
}
.contents_header1 > p{
    margin-left: 47%;
    font-size: 24px;
}
.contents_list{
    font-size: 24px;
    margin-bottom: 50px;
}

/* 목록 */
.contents_main{
    margin-top:30%;
    transform: translate(0,-30%);
    margin-bottom: 20px;
    display:flex;
    justify-content: space-evenly;
    text-align: left;
    font-size: 24px;
}
.contents > span{
    font-size: 24px;
}

/* write.html */
.contents_header2{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    border-bottom: 2px solid rgb(94, 94, 94);
    font-size: 24px;
}
.contents_header2 > :last-child{
    margin-right: 40px;
    margin-left: 100px;
}
.contents_input{
    margin-top: 20px;    
    /* display: flex; */
    /* justify-content: center; */
}
.contents_input > p {
    display: flex;
    justify-content: center;
}
.contents_input > p > input{
    margin: 0;
    margin-right: 10px;
    height: 30px;
    margin-top: 10px;
}
.contents_input > p > button{
    border: none;
    background: white;
}
.contents_input > p > button > i {
    font-size: 20px;
}
.add_input--b{
    margin-right: 24px;
    margin-left: 10px;
    margin-top: 10px;
}

/* 버튼 효과 */
.write_btn,
.write_btn::after,
.contents_input--btn,
.contents_save,
.contents_save::after,
.contents_cancel,
.contents_cancel::after,
.home,
.home::after {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.write_btn,
.contents_save,
.contents_cancel,
.home {
  background: none;
  border: 2px solid darkblue;
  border-radius: 5px;
  color: darkblue;
  display: block;
  font-size: 18px;
  font-weight: bold;
  position: relative;
  z-index: 0;
  margin-bottom: 2px;
  display: inline-block;
  right: 10px;
  bottom: 5px;
  cursor: pointer;
  padding: 4px;
  margin: 3px;
}
.write_btn::before,
.write_btn::after,
.contents_save::before,
.contents_save::after,
.contents_cancel::before,
.contents_cancel::after,
.home::before,
.home::after {
  background: darkblue;
  content: '';
  position: absolute;
  z-index: -1;
}
.write_btn:hover,
.contents_save:hover,
.contents_cancel:hover,
.home:hover {
  color: #ffffff; 
}
.write_btn::after,
.contents_save::after,
.contents_cancel::after,
.home::after {
  width: 100%;
  left: 0;
  top: 0;
  height: 0;
}
.write_btn:hover:after,
.contents_save:hover:after,
.contents_cancel:hover:after,
.home:hover:after {
  height: 100%;
}
.contents_list:hover{
    /* color:rgb(53, 202, 128) */
    color: #8AAAE5;
    cursor: pointer;
}
.home {
    margin-top: 20px;
}