You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

204 lines
2.8 KiB
CSS

2 years ago
html,
body {
font-size: 16px;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: white;
}
.container {
width: 60%;
2 years ago
height: 100%;
display: block;
margin: 0 auto;
}
.diary {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: min-content;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom: 20%;
}
.part {
width: 22.5%;
height: 300px;
}
.part p {
display: flex;
align-items: center;
}
.part {
background-color: blanchedalmond;
/* animation: circleTransform 4s; */
}
#book {
margin-right: 1%;
}
#cook {
margin-left: 1%;
margin-top: 4%;
}
#book img {
width: 37.5%;
float: right;
margin-top: -5%;
}
/* @keyframes circleTransform {
0% {
border-radius: 60% 70% 90% 90%;
background-color: blanchedalmond;
}
50% {
border-radius: 65% 90% 100% 100%;
background-color: rgb(225, 203, 169);
}
100% {
border-radius: 100% 100% 120% 100%;
background-color: rgb(222, 177, 108);
}
}
@-webkit-keyframes circleTransform {
0% {
border-radius: 60% 70% 90% 90%;
background-color: blanchedalmond;
}
50% {
border-radius: 65% 90% 100% 100%;
background-color: rgb(225, 203, 169);
}
100% {
border-radius: 100% 100% 120% 100%;
background-color: rgb(222, 177, 108);
}
} */
2 years ago
.intro {
width: 50%;
margin-top: 36%;
2 years ago
margin-left: auto;
margin-right: auto;
margin-bottom: 5%;
}
.intro h4 {
}
.intro p {
background-color: aliceblue;
2 years ago
border: 1px solid black;
}
#tsss {
text-decoration: underline dotted;
}
.cartoon {
display: block;
background-color: aliceblue;
}
2 years ago
.row {
width: 100%;
height: auto;
2 years ago
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 4.5%;
2 years ago
}
.ani {
/* background-color: yellow; */
text-align: center;
2 years ago
}
.ani img {
width: 70%;
border: 1px solid black;
2 years ago
}
.text {
background-color: antiquewhite;
width: 40%;
2 years ago
margin-left: 0;
}
.text p,
.part p {
2 years ago
padding: 2% 4%;
font-size: 1rem;
line-height: 135%;
}
.row3 .text {
width: 50%;
border-radius: 50%;
border: 3px red solid;
background-color: aquamarine;
margin: 0 auto;
}
.row3 .text p {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.4rem;
color: red;
line-height: 0;
}
#question {
font-size: 1.2rem;
}
.row5 .text span,
.row5 .ani {
cursor: pointer;
}
#illu {
}
#photo {
display: none;
}
#Buchimgae {
text-decoration: dotted underline;
display: inline-block;
}
#Buchimgaepic {
display: none;
padding: 0;
margin: 0;
width: 20%;
}
#expl {
position: absolute;
display: none;
font-size: 0.8rem;
line-height: 1.4;
background-color: white;
color: magenta;
}
#Buchimgaepic img {
width: 100%;
2 years ago
}