@font-face {
     font-family: "TitilliumWeb-Light";
     src: url(/misc/fonts/TitilliumWeb-Light.ttf) format("truetype");
}

/* body */

body {background: #FFB1DD;
      background-image: url("https://thepasteldyke.neocities.org/misc/backgrounds/hCMK6cY.gif");
      background-size: 100px;
      background-attachment: fixed;
      height: 100vh;
      width: 100%;
      cursor: url(https://thepasteldyke.neocities.org/misc/cursors/oth802%20blue%20bow.cur), auto !important;}

* { padding: 0; margin: 0;}


/* EVERYTHING TEXT STYLING */

a {
cursor: url("https://thepasteldyke.neocities.org/misc/cursors/Cute_Cursor12%20pink%20bow%20and%20arrow.cur"), default;
}

a img {
cursor: url("https://thepasteldyke.neocities.org/misc/cursors/Cute_Cursor12%20pink%20bow%20and%20arrow.cur"), default;
}

h4 {
  font-size: 12px;
  text-align: center;
  font-family: TitilliumWeb-Light;
  color: black;
  font-weight: normal;
}

h7 {
  font-size: 20px;
  text-align: center;
  font-family: TitilliumWeb-Light;
  color: black;
}

   p {
   font-size: 15px;
  color: black;
  font-family: TitilliumWeb-Light;
}

  a.one:link, a.one:visited {
  color: #8B0050;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  font-family: TitilliumWeb-Light;
}

a.one:hover, a.one:active {
  color: #FF6AC0;
  webkit-filter: blur(4px); /* Chrome, Safari, Opera */
  filter: blur(2px);
}

a.two:link, a.two:visited {
  color: #8B0050;
  text-decoration: none;
  display: inline-block;
  font-family: TitilliumWeb-Light;
}

a.two:hover, a.two:active {
  color: #FF6AC0;
  webkit-filter: blur(4px); /* Chrome, Safari, Opera */
  filter: blur(2px);
}

a.seven:link, a.seven:visited {
  color: black;
  max-width:100px;
  min-width: 60px;
  text-decoration: none;
  display: inline-block;
  font-family: "TitilliumWeb-Light";
  background: #D8EBD8;
    border:8px solid transparent;
border-width:8px;
border-image: url('https://thepasteldyke.neocities.org/misc/borders%20etc/tumblr_inline_o98mskFnTn1u2r0ws_540.png') 8 round;
  padding: 2px 20px 2px 20px;
  margin: 5px;
}

a.seven:hover, a.seven:active {
  color: #73B873;
  transform: scale(1.1); 
}

a.eight:link, a.eight:visited {
  color: black;
  width:100px;
  text-decoration: none;
  display: inline-block;
  font-family: "TitilliumWeb-Light";
  background: #D8EBD8;
    border:8px solid transparent;
border-width:8px;
border-image: url('https://thepasteldyke.neocities.org/misc/borders%20etc/tumblr_inline_o98mskFnTn1u2r0ws_540.png') 8 round;
  padding: 2px 20px 2px 20px;
  margin: 5px;
}

a.eight:hover, a.eight:active {
  color: #ffffff;
  transform: scale(1.1); 
}



/* EVERYTHING ANIMATED + IMAGES */
.image9 {width: 70%;
margin: 10px auto;
border: 1px solid black;
}

.imglogo {
transition: transform .7s ease-in-out;
margin-top: 30px;
margin-bottom: 30px;
}
  
.imglogo:hover {
 transform: rotate(-10deg);
}

.imglogo2 {
transition: transform .7s ease-in-out;
margin-top: 30px;
margin-bottom: 30px;
}
  
.imglogo2:hover {
 transform: rotate(10deg);
}

.year {
  background: #D8EBD8;
    border:8px solid transparent;
border-width:8px;
border-image: url('https://thepasteldyke.neocities.org/misc/borders%20etc/tumblr_inline_o98mskFnTn1u2r0ws_540.png') 8 round;
  width: 90%;
  margin: 15px auto;
}


  .top {
  position: fixed;
  top: 0;
  left: 0;
  background-image: url("https://thepasteldyke.neocities.org/misc/borders%20etc/tinyheartlace_top.png");
  background-repeat: repeat-x;
  width: 100%;
  z-index: 10;
  height:25px;
  
  }

.bottom {
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  margin: 0px 0px 0px 0px;
  width: 100%;
  height:25px;
  background-image: url("https://thepasteldyke.neocities.org/misc/borders%20etc/tinyheartlace_bottom.png");
  background-repeat: repeat-x;
  }

  .sticky {position: sticky;
  top: 0;
  padding-top: 70px;}

.left { grid-area: left;
text-align: center;
  padding: 0px 10px 10px 10px;
}
.main { 
  grid-area: main;
  background: white;
  overflow:auto;
  padding: 25px;
  text-align: center;}

.right { 
  grid-area: right;
  padding: 0px 10px 10px 10px;
  text-align: center;
  margin: 0px auto 10px auto;}

.grid-container {
  display: grid;
  grid-template-columns: 20% 60% 20%;
  grid-template-areas:   
    'left main right'
    'left main right'
    'left main right';
  gap: 10px;
  padding: 10px;
  width: 98%;
  min-width: 1000px;
}

.grid-container > div {
}