
  <style>
  
    
    body {
background: url(https://mypillowfort.nekoweb.org/templates/cuddle/bg.png);
      // ᴺᴼᵀᴱ ˚₊ · this ⤴ is the background . you can change it if you`d like ! ♡ ✧˖°
  overflow: hidden;
      position: relative;
}
::selection {
color: #FFB0D9;
font-style: italic;
font-weight: bold;
text-shadow: 1px 1px 3px;
        // ᴺᴼᵀᴱ ˚₊ · this ⤴ is the scrollbar . ♡ ✧˖°
}
/* width */
::-webkit-scrollbar {
  width: 10px;
          // ᴺᴼᵀᴱ ˚₊ · this ⤴ is how wide the scrollbar is ♡ ✧˖°
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: 0px 0px 2px 0px #F7D9B4 inset;
  background-color: #FFFFEC;
  border: 1px solid #F7D9B4;
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
background: #FFDDE8;
  border-radius: 10px;
  border: 1px solid #FFCCDB;
  box-shadow: 0px 0px 5px 0px white inset;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #FFA7AC;
  border-radius: 10px;
  border: 1px solid #E87FA5;
}




* {
zoom: 98%;
  font-family: arial;
          // ᴺᴼᵀᴱ ˚₊ · this ⤴ is the font . you can change `arial` to any other deafult web font if you`d like . if the font you want isnt a deafult web font , follow my custom fonts tutorial on mypillowfort.nekoweb.org <3 ♡ ✧˖°
            // ᴺᴼᵀᴱ ˚₊ · dont change unless you know what youre doing ♡ ✧˖°
}

.flex {
height: 33rem;
display: flex;
justify-content: center;
}

.layout {
height: 33rem;
width: 43rem;
margin: auto;

display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 1rem;
grid-row-gap: 0.5rem;
          // ᴺᴼᵀᴱ ˚₊ · dont change unless you know what youre doing ♡ ✧˖°
}

.div1 {
grid-area: 2 / 5 / 4 / 6;
  color: #A57352;
  text-align: center;
font-size: 0.8rem;
font-weight: bold;
  padding-top: 0.5rem;
  line-height: 1rem;
border: 1px solid #A57352;
box-shadow:
0 0 0 2px #A57352, 0px 0px 20px 5px #FFFDA3 inset, 0px 0px 10px 2.5px #FFA3BE inset;
  border-top-left-radius: 4rem 3rem;
    border-top-right-radius: 4rem 3rem;
  
    border-bottom-left-radius: 0.5rem 0.5rem;
    border-bottom-right-radius: 0.5rem;
outline: 1px solid white;
  width: 8rem;
  height: 11.5rem;
  background: #FFFBD8;
            // ᴺᴼᵀᴱ ˚₊ · these are the settings of the div with the pink link buttons . ♡ ✧˖°
}

.div2 {
 grid-area: 2 / 3 / 3 / 5;
  height: 2rem;
  width: 22rem;
             // ᴺᴼᵀᴱ ˚₊ · dont change unless you know what youre doing ♡ ✧˖°
}

.CREDITCLASS {
color: #A57352;
font-size: 0.9rem;
  width: 9rem;
  position: relative;
top: 20.5rem;
left: 14rem;
  margin-left: -1.5rem;
text-shadow: 1px 1px white;
              // ᴺᴼᵀᴱ ˚₊ · DONT CHANGE OR EDIT OR REMOVE !  ♡ ✧˖°
}

.two2 {
  background-color: #FFA3BE;
padding: 1rem;
width: 21rem;
  margin-left: -2rem;
  text-align: center;
  border-radius: 2rem;
    position: relative;
  height: 0.8rem;
  color: #FFFBD4;
  letter-spacing: 0.2rem;
font-weight: bold;
 margin-top: -0.4rem;
text-shadow: 1px 1px #A57352;
  line-height: 0.8rem;
  
  border: 1px solid #A57352;
box-shadow:
0 0 0 2px #A57352;
outline: 1px solid white;
            // ᴺᴼᵀᴱ ˚₊ · dont change unless you know what youre doing ( anything you`d like button ) ♡ ✧˖°
}

.two2:before {
content: "";
height: 50%;
position: absolute;
top: 0.05rem;
left: 0.4rem;
width: 22.2rem;
  border-radius: 5rem;
  background: transparent;
  background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  opacity: 0.6;
            // ᴺᴼᵀᴱ ˚₊ · dont change unless you know what youre doing ♡ ✧˖°
}

.div3 {
grid-area: 1 / 3 / 2 / 6;
font-size: 4.5rem;
  line-height: 10rem;
  height: 7.34rem;
  margin-left: -2.5rem;
  font-weight: bold;
font-style: italic;
background: rgb(255,150,183);
background: linear-gradient(0deg, rgba(255,150,183,1) 32%, rgba(255,188,208,1) 40%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
filter: drop-shadow(0px 0px 1px #FBF5CF)
drop-shadow(0px 0px 1px #FBF5CF)
drop-shadow(0px 0px 0px #FBF5CF)
drop-shadow(0px 0px 1px #FBF5CF)
drop-shadow(0px 0px 0px #FBF5CF)
drop-shadow(0px 0px 1px #A57352);
           // ᴺᴼᵀᴱ ˚₊ · div3 is the element of the title " CUDDLE " . change to your own site name . if your site name is too long , try making the font size a bit smaller . ♡ ✧˖° 
}

.div4 {
grid-area: 3 / 1 / 5 / 5;
border: 1px solid #A57352;
box-shadow:
0 0 0 2px #A57352, 0px 0px 30px 10px #FFFDA3 inset, 0px 0px 20px 5px #FFA3BE inset;
  border-top-left-radius: 0.5rem 0.5rem;
    border-top-right-radius: 5rem 2.5rem;
  
    border-bottom-left-radius: 0.5rem 0.5rem;
    border-bottom-right-radius: 0.5rem;
outline: 1px solid white;
  height: 15rem;
margin-top: -3.5rem;
    background: #FFFBD8;
  color: #A57352;
  padding: 2rem;
   // ᴺᴼᵀᴱ ˚₊ · the main textbox . dont change unless you know what youre doing ♡ ✧˖°
}

.div5 {
grid-area: 1 / 1 / 3 / 3;
width: 10rem;
height: 12rem;
  margin-left: 1rem;
  margin-top: 0.5rem;
     // ᴺᴼᵀᴱ ˚₊ · the place for the big image . dont change unless you know what youre doing ♡ ✧˖°
}

.div6 {
grid-area: 5 / 1 / 6 / 5;
  background-color: #FFA3BE;
padding: 1rem;
width: 25rem;
  text-align: center;
  border-radius: 2rem;
    position: relative;
  height: 0.8rem;
  color: #FFFBD4;
  letter-spacing: 0.2rem;
font-weight: bold;
text-shadow: 1px 1px #A57352;
  line-height: 0.8rem;
  
  border: 1px solid #A57352;
box-shadow:
0 0 0 2px #A57352;
outline: 1px solid white;
       // ᴺᴼᵀᴱ ˚₊ · the "c your site name 2000 " . dont change unless you know what youre doing ♡ ✧˖°
}

.div6:before {
content: "";
height: 50%;
position: absolute;
top: 0.05rem;
left: 0.4rem;
width: 26.2rem;
  border-radius: 5rem;
  background: transparent;
  background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  opacity: 0.6;
       // ᴺᴼᵀᴱ ˚₊ · dont change unless you know what youre doing ♡ ✧˖°
}


.div7 {
 grid-area: 4 / 5 / 6 / 6; 
border: 1px solid #A57352;
    color: #A57352;
  text-align: center;
font-size: 0.8rem;
font-weight: bold;
line-height: 1.5rem;
box-shadow:
0 0 0 2px #A57352, 0px 0px 20px 5px #FFA3BE inset;
  border-bottom-left-radius: 4rem 3rem;
    border-bottom-right-radius: 4rem 3rem;
  
    border-top-left-radius: 0.5rem 0.5rem;
    border-top-right-radius: 0.5rem;
outline: 1px solid white;
  background: #FFD2DF;
  height: 12rem;
  margin-top: -1.45rem;
       // ᴺᴼᵀᴱ ˚₊ · the pink textbox on the right . ♡ ✧˖°
}

a {
color: #F7809A;
      // ᴺᴼᵀᴱ ˚₊ · link styling ♡ ✧˖°
}

.nav1 {
position: relative;
top: -16.22rem;
  left: 38.8rem;
  image-rendering: pixelated;
      // ᴺᴼᵀᴱ ˚₊ · the position of the image " navigation " between the right sidebars . dont change unless you know what youre doing ♡ ✧˖°
}

.pink-button {
color: #A57352;
  text-align: left;
  width: 7rem;  border: transparent;
background: #FFB3CA;
font-size: 0.6rem;
  padding: 0.3rem;
  text-transform: uppercase;
font-weight: bold;
border: 0.5px solid #FFFBCD;
        // ᴺᴼᵀᴱ ˚₊ · the style of the buttons in the yellow right sidebar . ♡ ✧˖°
}

.pink-button:hover {
background: #FFC1D3;
        // ᴺᴼᵀᴱ ˚₊ · the style of these buttons when being hovered ( when the cursor is on them ) ♡ ✧˖°
}

.textbox {
margin: 0.5rem;
text-align: left;
  font-weight: 1;
  font-size: 1rem;
  line-height: 1rem;
        // ᴺᴼᵀᴱ ˚₊ · textbox of the pink right sidebar . dont change unless you know what youre doing ♡ ✧˖°
}
    
    
  </style>
  
<!--- CSS END -->