/* This thing is largely bashed together from SadGrl's layout template (at https://sadgrl.online/projects/layout-builder/) and https://www.w3schools.com/ and some StackOverflow threads */
@font-face {
  font-family: Quicksand;
  src: url('Quicksand.ttf');
}

@font-face {
  font-family: Quicksand;
  font-weight: bold;
  src: url('Quicksand.ttf');
}

:root {
  --header-image: url('https://sadhost.neocities.org/images/layouts/wp.jpeg');
  --body-bg-image: url('https://images.pyonkotchi.com/valphone bg tile.png');

  /* colors */
  --content: #43256E;
  --site-navigation-font-font-size-value: 1.2
}

body {
  font-family: "Quicksand", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 15px;
  color: #801168;
  margin: auto 0;
  background-image: var(--body-bg-image);
  background-attachment: fixed;
  display: grid;
  grid-template-columns: auto;
  cursor: url(/images/cursor.png), default;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

* {
  box-sizing: content-box;

}

.bigger {
  font-size: 1.4em;
}

#container {
  max-width: 1150px;
  margin: 0 auto;
  padding: 20px 20px 20px 20px;
  opacity: 0;
  animation: fadeIn 2s forwards;

}

html,
body {
  height: 100vh;
  width: 100%;
}


a {
  color: #a60f83;
  font-weight: 600;
  text-decoration: none;
  cursor: url(/images/cursorglow.png), default;
  font-size: 16px;
}
/*p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}*/
h1 a,
h2 a,
h3 a,
h4 a,
h5 a {
  color: #f02c97;
  text-decoration: none;
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}

a:hover {
  color: #63ceff;
}



/*#div {
  

  background-color: rgba(255, 255, 255, 0.87);
  margin: 5px;
                
  border: 3px solid transparent;
  text-align: center;
  
  border-radius: 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 600px;

  }*/
#div {
  text-align: center;
  margin-left: auto;
  margin-right: auto;



}

.button {

  height: 4em;

  background-color: rgba(255, 255, 255, 0.87);
  margin: 0.5em;

  border: 3px solid transparent;
  text-align: center;
  border-radius: 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;

  /*box-shadow: 0px 0px 2px 2px rgba(255, 255, 255, 0.82);
    */
}

.button:hover,
#pos:hover {

  cursor: url(/images/cursorglow.png), default;

  transition: 0.25s;
  transform: scale(1.02);
  object-position: top;
  box-shadow: 0 0 15px rgba(255, 101, 199, 0.693);

}

#border {
  outline: 2px solid #ff63d36e;
  background: rgba(255, 223, 251, 0.87);
  ;
  border-image-width: 5px;
  border-image-source: url("https://static.tumblr.com/vsycwa1/9nurvtcax/pale7_opacity2.png");
  border-image-repeat: round;
  border-image-slice: 100;
  border-radius: 5px;
  padding: 1em;
  border-spacing: 5px;
  text-align: center;
  max-width: 100%;
  min-width: 70vw;
}

.linkicon {
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 35px;
  transform: translate(-50%, -50%);
  max-height: 75%;

}

#pos {
  /*! width: 100%; */
  position: relative;
  height: 4em;
  background-color: rgba(255, 255, 255, 0.87);
  
  border: 3px solid transparent;
  border-radius: 5px;
  /*! display: block; */
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  
  max-width: 600px;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 600px) {
  /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
 .mobile-hide {
    display: none !important;

 }
  main {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
  
  }

  #div {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-left: 4em;
    padding-right: 1em;

  }
    .responsive {
    width: 70%;
    height: auto;
  }
}
@media screen and (min-width: 600px) {

  /* USE THESE CLASSES TO SHOW CONTENT ON MOBILE */
 .mobile-show {
    display: none !important;
 }

  
}
#head {}

main {

  /* padding: 20px 20px 20px 20px;*/
  text-align: justify;
  
  /* this is the width of your layout! */
  /* if you change the above value, scroll to the bottom
  and change the media query according to the comment! */
  margin: 0 auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* this centers the entire page */

}

h1 {
  color: #ff45b5 !important;
  text-align: center;
  width: 100%;
  text-decoration: none;
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  text-shadow: 0 0 5px rgb(255, 121, 206);




}

h2,
h3,
.h2 {
  text-align: left;
  padding-top: 10px;

}



h4 {
  text-align: left;
  font-size: 25px !important;
  margin: 0px;
  width: 100%;
  padding-top: 30px;
}

/*footer {
  background-color: #ffdef3;
  width: 100%;
  padding-top: 10px;
  border-top: 3px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to bottom right, #e98807 0%, #ffe33f 2%, #ffff61 25%, #f6b64a 30%, #ffff 40%, #ffe33f 45%, #f6b64a 50%);
}*/
.social-icons a {
  margin: 0.5em;
  line-height: 2.5em;
  color: #fb4fb9;
  
  
}
.social-icons a:hover {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 101, 199, 0.751);
  transform: translateY(-10px) !important;
  transition: transform 0.5s ease,  text-shadow 0.5s ease;
}


.social-icons {
  margin: 1em;
  
}
.icon-container
{
  display: flex;
  justify-content: center;
  max-width:600px;
  flex-wrap: wrap;
  margin: 0 auto;
  
}
.uquiz_embed {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fa-2xl {
  font-size:1.7 !important;
}
.hover:hover {
      transform: scale(1.05) translateY(-3px);
      transition: transform 0.2s ease;
    }