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.

245 lines
3.5 KiB
CSS

@font-face {
font-family: "Millimetre-Light";
src: url(./fonts/Millimetre-Light_web.woff2) format("woff2"),
url(./fonts/Millimetre-Light_web.woff) format("woff");
}
@font-face {
font-family: "Millimetre-Regular";
src: url(./fonts/Millimetre-Regular_web.woff2) format("woff2"),
url(./fonts/Millimetre-Regular_web.woff) format("woff");
}
@font-face {
font-family: "Millimetre-Bold";
src: url(./fonts/Millimetre-Bold_web.woff2) format("woff2"),
url(./fonts/Millimetre-Bold_web.woff) format("woff");
}
@font-face {
font-family: "Millimetre-Extrablack";
src: url(./fonts/Millimetre-Extrablack_web.woff2) format("woff2"),
url(./fonts/Millimetre-Extrablack_web.woff) format("woff");
}
* {
box-sizing: border-box;
}
html,
body {
font-size: 16px;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: white;
font-family: "Millimetre-Light";
/* background-image: url("./img/banjuk.png");
background-size: contain;
background-repeat: no-repeat; */
}
.container {
width: 60%;
height: 100%;
display: block;
margin: 0 auto;
}
.titletext {
padding-top: 2%;
}
.title {
font-family: "Millimetre-Bold";
}
.diary {
width: 80%;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 15px;
row-gap: 15px;
margin: 5% auto;
}
.part {
background-color: blanchedalmond;
}
.part p {
font-family: "Millimetre-Light";
font-size: 1.1rem;
line-height: 147.5%;
display: flex;
align-items: center;
}
.part2,
.part3 {
background-color: transparent;
}
.part2 img,
.part3 img {
display: inline-block;
width: 50%;
}
.part3 img {
float: right;
}
.transition {
display: flex;
flex-direction: column;
align-items: center;
}
.transition p {
font-family: "Millimetre-Extrablack";
line-height: 0;
}
.cartoon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 5%;
}
.intro {
width: 70%;
margin-top: 2.5%;
margin-left: auto;
margin-right: auto;
margin-bottom: 5.5%;
box-sizing: border-box;
}
.intro h4 {
font-size: 1.2rem;
}
.intro p {
font-size: 1rem;
line-height: 145%;
border: 1px solid black;
padding: 1% 2%;
}
#tsss {
text-decoration: underline dotted;
}
.cut {
width: 80%;
height: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 4.5%;
}
.ani {
/* background-color: yellow; */
}
.text {
background-color: blanchedalmond;
width: 50%;
max-width: 40%;
margin-left: 0;
padding-left: 0;
}
.text p,
.part p {
padding: 1% 4%;
font-size: 1.05rem;
line-height: 140%;
}
.cut3 .text {
width: 50%;
}
.cut3 .text p {
}
#question {
font-size: 1.2rem;
}
.cut3a .text span {
cursor: pointer;
}
#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%;
}
.ani img,
.enrico img,
.bindtogether img,
.chaepic img,
.compopic img,
.bilbi img {
width: 60%;
border: 1px solid black;
}
#taping,
#collectivebind,
.enrico,
.bindtogether,
#chaeexp,
.chaepic,
#compo,
.compopic,
#bilbiface,
.bilbi {
cursor: pointer;
}
.enrico,
.bindtogether,
.chaepic,
.compopic,
.bilbi {
display: none;
}
#taping img,
#collectivebind img,
#chaeexp img,
#compo img,
#bilbiface img {
border-style: dashed;
border-width: 1px;
}