@import url('https://fonts.googleapis.com/css2?family=Nerko+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

* {
  margin:0;
  padding:0;
  font-family: "IBM Plex Serif";
}

.background {
  background-image: linear-gradient(0deg,
      rgba(203, 236, 160, 0.6) 0% 10%, rgba(255, 255, 255, 0.6) 10% 30%, rgba(254, 181, 182, 0.6) 30% 50%, rgba(255, 218, 235, 0.6) 50% 70%, rgba(255, 255, 255, 0.6) 70% 90%, rgba(203, 236, 160, 0.6) 90% 100%),
      linear-gradient(90deg,
        rgba(203, 236, 160, 0.6) 0% 10%, rgba(255, 255, 255, 0.6) 10% 30%, rgba(254, 181, 182, 0.6) 30% 50%, rgba(255, 218, 235, 0.6) 50% 70%, rgba(255, 255, 255, 0.6) 70% 90%, rgba(203, 236, 160, 0.6) 90% 100%
        );
  background-size: 100px 100px,100px 100px,100px 100px,100px 100px,100px 10px;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  position:relative;
  height: 100vh;
  overflow:scroll;
}

@media (min-width:320px){
  .myphoto {
    grid-column: col-start 8 / span 4;
  }
  .about {
    grid-column: col-start 3 / span 5;
  }
  p {
    font-size: 11px;
    line-height:18px;
  }
  .about {
    font-size:12px;
    line-height:20px;
  }
}

@media (min-width:480px) {
  .myphoto {
    grid-column: col-start 9 / span 3;
  }
  .about {
    grid-column: col-start 3 / span 6;
  }
  p {
    font-size: 12px;
    line-height:20px;
  }
  .about {
    font-size:12px;
    line-height:20px;
  }
}
@media (min-width:600px) {
  .myphoto {
    grid-column: col-start 9 / span 3;
  }
  p {
    font-size: calc(12px + 0.3vw);
    line-height: calc(25px + 0.3vw);
  }
  .about {
    font-size: calc(12px + 0.3vw);
    line-height: calc(25px + 0.3vw);
  }
}
@media (min-width:801px) {
  .myphoto {
    grid-column: col-start 9 / span 3;
  }
  
}

.notepad {
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  filter: drop-shadow(-8px 6px 6px rgba(129, 59, 87, 0.233));
}

.notepadtextcontainer {
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
}

.notepadtextcontainer {
  margin-top:150px;
  width:90%;
  max-width: 520px;
}

.notepad {
  padding-top:0;
  margin-top:150px;
  width:90%;
  max-width:520px;
  z-index:5;
}

.notepadtext {
  padding-top:20px;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(12, [col-start] 1fr);
  column-gap: 15px;
  row-gap: 30px;
}

h1 {
  grid-column: col-start 3 / span 9;
  text-align: center;
  font-family:"IBM Plex Serif";
  color: rgb(241, 113, 179);
  font-size: calc(30px + 1vw);
}

.ln {
  opacity:0.;
  font-size:60%;
  color:rgb(246, 161, 185);
}

.e {
  opacity: 0.7;
  font-size: 60%;
  color: rgb(249, 97, 153)
}

.about {
  grid-row: 2;
}

.myphoto {

  width:100%;
  border: 4px rgb(255, 224, 240) solid;
  border-radius:3px;
}

.about1 {
  grid-column: col-start 3 / span 9;
  grid-row: 3;
}

p {
  font-family:"IBM Plex Serif";
  color:rgb(28, 28, 28);
  word-spacing: 2px;

  
}

.img {
  width: 100%;
}

.tab1 {
  z-index:1;
  position:absolute;
  top: 116px;
  left: calc(40vw - 30px);
  padding-top:12px;
  padding-bottom:15px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 10px 10px 0 0;
  border-style:none;
  color:rgb(239, 49, 115);
  background-color: rgb(255, 212, 227);
  border-top: rgb(222, 130, 162) 1px solid;
  border-left:rgb(219, 128, 159) 1px solid;
  opacity: 0.6;
}

.tab1:hover {
  background-color: rgb(255, 200, 218);
  cursor:pointer;
}

.tab1:active {
  background-color: rgb(255, 183, 208);
}

.tab2 {
  z-index:1;
  position:absolute;
  top: 116px;
  left: calc(40vw + 80px);
  padding-top:12px;
  padding-bottom:15px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 10px 10px 0 0;
  border-style:none;
  color:rgb(224, 67, 67);
  background-color: rgb(255, 222, 198);
  border-top: rgb(237, 181, 141) 1px solid;
  border-left:rgb(240, 185, 145) 1px solid;
  opacity:0.6;
}

.tab2:hover {
  background-color: rgb(252, 213, 183);
  cursor:pointer;
}

.tab2:active {
  background-color: rgb(255, 197, 156);
}

.dustopedia {
  color: rgb(251, 98, 149);
  font-weight:700;
}

button {
  font-weight:600;
  letter-spacing:0.6px;
}

button p {
  font-size: 11px;
}