cms_project/laptop_s.css

@media only screen and (min-device-width: 1190px) and (max-device-width: 1440px) {
  .container {
    width: 65%;
  }
  .titletext {
    padding-top: 2%;
  }

  .title {
    font-family: "Millimetre-Bold";
  }

  .diary {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    margin: 5% auto;
  }

  .part {
    background-color: blanchedalmond;
  }

  .part p {
    font-family: "Millimetre-Light";
    font-size: 1rem;
    line-height: 145.5%;
    display: flex;
    align-items: center;
  }

  .part2,
  .part3 {
    background-color: transparent;
  }

  .part2 img,
  .part3 img {
    width: 80%;
  }

  .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%;

    margin-bottom: 6.5%;
  }

  .ani {
    /* background-color: yellow; */
  }

  .text {
    background-color: blanchedalmond;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding-left: 0;
  }

  .text p,
  .part p {
    padding: 1% 4%;
    font-size: 1rem;
    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: 75%;
    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;
  }
}