@font-face {
  font-family: '8bitoperatorplus';
  src: url('./resources/8bitoperatorplus-regular.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

:root {
  /* Text */
  --main-font: "8bitoperatorplus";

  /* Misc */
  --bg-img: url("./resources/spamton_buttonup_pattern.png");
  --border-img: url("./resources/DeltaruneTextbox.png")
}

body {
  margin: 0;
  background-image: var(--bg-img);
  background-attachment: fixed;
  font-family: var(--main-font);
  cursor: url(./resources/heart.png) 10 5, auto;
}

h1 a {
  color: white;
}

hr
{
  background: black;
  border: none;
  border-radius: 3px;
  height: 5px;
}

.demo {
  border:75px solid black !important;
  width:70% !important;
  height:70% !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  border-image: var(--border-img) 33% !important;
}

.wrapper {
  background: linear-gradient(180deg, black, transparent);
}

#wrapper {
  margin: auto;
  padding: 9px;
  font-size: 30px;
}

#wrapper2 {
  margin: auto;
  padding: 40px;
}

.links {
  color: black !important;
  text-decoration: none;
  text-decoration-color: black !important;
}

a:link,a:visited#benjbenj {
  text-decoration: none;
}

a:hover#benjbenj {
  color: #fef900;
}

a#benjbenj {
  color: #fb7c27;
}

#benjbenj {
  text-shadow: -4px 5px 0px black;
  font-size: 50px;
}

.container
{
  font-size: 1em;
}

.left-textbox {
  padding: 15px 25px 15px 25px;
  text-align: center;
  background-color: wheat;
  border-radius: 5px;
  border: dotted;
}

.left-textbox2 {
  padding: 10px 20px 10px 20px;
  background-color: cornsilk;
  border-radius: 7px;
  width: 100%; 
  height: 100%; 
  box-sizing: border-box;
  /* Optional: includes padding and border in the element's total width and height */
}

#social
{
  display: flex;
  list-style: none;
  justify-content: center;
  margin: 0;
  padding: 0;
}

#social a
{
  display: block;
  height: 2em;
  width: 2.25em;
  margin: 0 auto;
  text-indent: 99999px;
  cursor: inherit;
}

a[href*="youtube"]
{
  background: url(./resources/youtube.png);
}

a[href*="youtube"]:hover,
a[href*="youtube"]:focus
{
  background: url(./resources/youtube_2.png);
}

a[href*="soundc"]
{
  background: url(./resources/sc.png);
}

a[href*="soundc"]:hover,
a[href*="soundc"]:focus
{
  background: url(./resources/sc_2.png);
}


.main-textbox {
  padding: 15px 25px 15px 25px;
  text-align: center;
  background-color: wheat;
  border-radius: 5px;
  border: dotted;
}

.main-textbox2 {
  background-color: cornsilk;
  border-radius: 7px;
  padding: 10px 20px 10px 20px;
  width: 100%; 
  height: 100%; 
  box-sizing: border-box;
  /* Optional: includes padding and border in the element's total width and height */
}

.to-do {
  text-align: left;
  background-color: slateblue;
  border: solid 3px;
  border-radius: 20px;
  transition: 1s;
}

.updates {
  border: solid 3px;
  border-radius: 20px;
  text-align: left;
  background-color: slateblue;
}

.right-textbox {
  padding: 15px 25px 15px 25px;
  text-align: center;
  background-color: wheat;
  border-radius: 5px;
  border: dotted;
}

.right-textbox2 {
  padding: 10px 20px 10px 20px;
  background-color: cornsilk;
  border-radius: 7px;
  width: 100%; 
  height: 100%; 
  box-sizing: border-box;
  /* Optional: includes padding and border in the element's total width and height */
}

.container {
  width: 100%;
  max-width: 1400px; 
  margin: 0 auto; 
  padding: 20px; 
  box-sizing: border-box; /
}

.wrapper-body {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
}

@media screen and (max-width: 700px) {
  .wrapper-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}