body{
    margin: 0%;
    background-color: rgb(27, 26, 26);
}

#container{
    display: grid;
    grid-template-areas: 
    "space1 main main main space2"
    "footer footer footer footer footer";
    gap: 0px;
    
}

#main-content{
    margin: 0%;
    grid-area: main;
}

.space1{
    grid-area: space1;
}
.space2{
    grid-area: space2;
}

.title{
    position: relative;
    background-color: transparent;
    top: 70%;
    left: 10%;
    text-align: center;
    color: antiquewhite;
    text-shadow: 0 0 15px magenta;
}

h1{
    color: aliceblue;
}

.home{
    margin: 0%;
    padding: 0%;
    width: 100%;
    height: 1400px;
    background-image: url(images/ano.jpg);
    background-repeat: no-repeat;
    background-position: left -80px;
    background-size: 100%;
    background-attachment: fixed;
}

.devide-block{
    position: relative;
    width: 100%;
    height: 300px;
    background: url(images/LoveRabbits.png);
    background-repeat: no-repeat;
    background-size: 10%;
    background-position: center;

    text-align: center;
    color: palevioletred;
    text-decoration: double;
}

.p-image{
    display: block;
    position: absolute;
    top: -140px;
    left: 40%;
}

#peong{
    background-image: url(images/평화.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 400px;
    height: 400px;
    transform: rotate(20deg);
    z-index: 1
}

#peong-after{
    background-image: url(images/평화두상.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 250px;
    height: 250px;
    transform: rotate(20deg);
    z-index: 1
}

#ock{
    background-image: url(images/고라니.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 300px;
    height: 300px;
    transform: rotate(10deg);
}

#ock-after{
    background-image: url(images/블스.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 300px;
    height: 300px;
    transform: rotate(10deg);
}

#introblock{
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(2, auto);

    padding: 10px;

    margin-bottom: 200px;
}

.introduce{
    position: relative;
    padding: 30px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(110, 116, 121);
    border-radius: 30px;
    background-color: rgb(61, 58, 58);
    color: aliceblue;

    transition: all 0.5s;
}

.introduce .before-change{
    transition: all;
    transition-delay: 0.1s;
}
.introduce .after-change{
    transition: all;
    transition-delay: 0.15s;
}

.introduce:hover{
    box-shadow: 0 0 15px rgb(78, 78, 78);
}
.introduce:active{
    transform: rotateY(180deg);
}
.introduce:active .before-change{
    opacity: 0%;
}
.introduce:active .after-change{
    opacity: 100%;
}

.introduce.peongwha{
    position: relative;
    top: 200px;
}

.before-change{
    position: absolute;
}

.after-change{
    transform: rotateY(180deg);
    opacity: 0%;
}

.seosa{
    position: relative;
    padding: 30px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(110, 116, 121);
    border-radius: 30px;
    background-color: rgb(61, 58, 58);
    color: aliceblue;
}

#tlineGrid{
    display: grid;
    gap: 10px;
    grid-template-areas: 
    "blockp blockp blockp blockp blockp gap blocko blocko blocko blocko blocko"
    "desc-p desc-p desc-p line-p line-p ruler line-o line-o desc-o desc-o desc-o";
}

.pblock{
    grid-area: blockp;
    text-align: center;
    align-items: center;
    background-color: rgb(61, 58, 58);
    border-radius: 20px;
    font-size: x-large;
    color: aliceblue;
}
.oblock{
    text-align: center;
    align-items: center;
    grid-area: blocko;
    background-color: rgb(61, 58, 58);
    border-radius: 20px;
    font-size: x-large;
    color: aliceblue;
}
.gapblock{
    grid-area: gap;
    width: 100%;
    height: 40px;
}
.p-desc{
    grid-area: desc-p;
}
.o-desc{
    grid-area: desc-o;
}
.p-line{
    grid-area: line-p;
}
.o-line{
    grid-area: line-o;
}

.time-block.p-desc{
    border: 3px solid rgb(27, 26, 26);
}
.time-block.o-desc{
    border: 3px solid rgb(27, 26, 26);
}

.time-block.sleep.p-time:hover+.time-block.sleep.p-desc{
    opacity: 1;
}

#timeRuler{
    grid-area: ruler;
    background-color: aliceblue;
}
.Hour{
    height: 5px;
    background-color: black;
}
.gap{
    height: 25px;
    text-align: center;
}

.time-block{
    width: 100%;
    text-align: center;
    align-items: center;
    font-weight: bolder;
    color: beige;
    text-shadow: 
    -1px -1px 0 rgb(61, 58, 58), 
    1px -1px 0 rgb(61, 58, 58),
    -1px 1px 0 rgb(61, 58, 58),
    1px 1px 0 rgb(61, 58, 58);
}
.sleep{
    background-color: blueviolet;
}
.awake{
    background-color: yellow;
}
.amWork{
    background-color: orange;
}
.lunch{
    background-color: orangered;
}
.pmWork{
    background-color: aquamarine;
}
.outWork{
    background-color: aqua;
}
.dinner{
    background-color: greenyellow;
}
.enjoy{
    background-color: rgb(10, 155, 70);
}
.sleep2{
    background-color: blueviolet;
}

.sleep.p-time{
    height: 210px;
}
.awake.p-time{
    height: 55px;
}
.amWork.p-time{
    height: 110px;
}
.lunch.p-time{
    height: 15px;
}
.pmWork.p-time{
    height: 155px;
}
.outWork.p-time{
    height: 20px;
}
.dinner.p-time{
    height: 35px;
}
.enjoy.p-time{
    height: 90px;
}
.sleep2.p-time{
    height: 30px;
}


.sleep.o-time{
    height: 165px;
}
.awake.o-time{
    height: 75px;
}
.amWork.o-time{
    height: 120px;
}
.lunch.o-time{
    height: 30px;
}
.pmWork.o-time{
    height: 150px;
}
.outWork.o-time{
    height: 30px;
}
.dinner.o-time{
    height: 30px;
}
.enjoy.o-time{
    height: 60px;
}
.sleep2.o-time{
    height: 60px;
}

#collapse{
    margin-top: 100px;
    align-items: center;
}
#collapse img{
    display: block;
    width: 70%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
#footer{
    margin-top: 100px;
    grid-area: footer;
    background-color: darkgray;
}