* {
  box-sizing: border-box;
  scrollbar-width: none;
}

:root {
  --lace: var(--purple); /* change black to the color you want */
  /* options are: pink, black, blue, yellow, purple */
  --pink: url("https://files.catbox.moe/bsr34l.png");
  --black: url("https://files.catbox.moe/stv815.png");
  --blue: url("https://files.catbox.moe/pweyk3.png");
  --yellow: url("https://files.catbox.moe/r3ub8h.png");
  --purple: url("https://files.catbox.moe/acs8xi.png");
  --text: #c7c2e6;
  --base: #112;
  --accent: rgb(168, 174, 206);
  --secondary: rgb(76, 107, 157);
  --green: rgb(93, 111, 93);
}

/****** fonts ******/
@font-face {
  font-family: "Scratch Boys";
  src: url(https://files.catbox.moe/1sb02z.ttf);
}

@font-face {
  font-family: "Cerl";
  src: url(https://dl.dropbox.com/s/vaz4fe5yzk1uiku/CHERL___.TTF);
}

@font-face {
  font-family: "Adorable Doll";
  src: url(https://dl.dropbox.com/s/plehp3a9xbtct7n/AdorableDoll.ttf);
}

@font-face {
  font-family: "Vintage";
  src: url(https://files.catbox.moe/nwq0cf.ttf);
}

/****** scrollbar ******/
::-webkit-scrollbar {
  display: none;
}

/****** select hightlight ******/
::selection {
  background: #7053d0;
  color: white;
}

::-moz-selection {
  background: #7053d0;
  color: white;
}

/****** body ******/
body {
  display: flex;
  justify-content: start;
  align-items: center;
  background-color: #201e2c;
  background-repeat: repeat;
  background-position: 0 0;
  background-attachment: fixed;
  color: #66963e; /* default font color */
  font-family: "MS Gothic"; /* default font */
  font-size: 20px; /* default font size */
  padding: 10px;
  background-image: linear-gradient(#7053d0 1px, transparent 1px),
    linear-gradient(to right, #7053d0 1px, #c3bcfa 1px);
  background-size: 20px 20px;
  height: 100vh;
  width: 100vw;
  flex-direction: column;
}

/****** links ******/
a {
  text-decoration: underline;
  color: #fff;
  transition: 0.3s;
  text-shadow: -1px 0 #7053d0, 0 1px #7053d0, 1px 0 #7053d0, 0 -1px #7053d0;
}

a:hover {
  cursor: help;
  transition: 0.6s;
  color: #7053d0;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

/****** wrappers ******/
#wrapper {
  animation: fadeEffect 3s;
  margin: auto;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/****** containers ******/
.container {
  display: grid;

  width: 90vw;
  height: 90vh;
  grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1fr) 250px;
  grid-template-rows: 1fr 1fr 0.1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "icon main main links"
    "updates main main box"
    "footer footer footer box";
  border-width: 10px;
  border-style: solid;
  border-image: var(--lace) 8 fill round;
}

.main {
  grid-area: main;
  border-width: 10px;
  border-style: solid;
  border-image: var(--blue) 8 fill round;
  width: 100%;
  min-width: 0; /* Prevents expanding beyond grid */
  overflow-y: auto;
  overflow-x: hidden;
}
.main img {
  border-radius: 23px;
  border: solid 4px rgb(150, 135, 245);
  background-color: rgb(51, 51, 51);

  height: auto;

  margin-left: 4px;
  transform: rotate(-30deg) skew(15deg) translate(0, 0);
  transition: 0.5s;
  box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.5);
}
.main img:hover {
  transform: rotate(0deg) skew(0deg) translate(-10px, 10px);
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.5);
}

.sites {
  display: flex;
  flex-direction: column;
  width: 95%;
}

.icon {
  grid-area: icon;
  border-width: 10px;
  border-style: solid;
  border-image: var(--lace) 8 fill round;
  padding: 2px;
  display: flex;
  align-items: center;
}

.icon img {
  height: 200px;
  width: 70%;
}

.updates {
  grid-area: updates;
  border-width: 10px;
  border-style: solid;
  border-image: var(--lace) 8 fill round;
  padding: 10px;
  overflow: auto;
  line-height: 130%;
}

.links {
  grid-area: links;
  border-width: 10px;
  border-style: solid;
  border-image: var(--lace) 8 fill round;
  padding: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.links img {
  height: 40%;
  width: 40%;
}

.box {
  grid-area: box;
  border-width: 10px;
  border-style: solid;
  border-image: var(--lace) 8 fill round;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: auto;
}
.box h3 {
  padding: 0;
  margin: 0;
}

.footer {
  grid-area: footer;
  text-align: center;
  border-width: 10px;
  border-style: solid;
  border-image: var(--lace) 8 fill round;
  display: flex;

  flex-direction: row-reverse;
}
.footer img {
  margin-top: 15%;
  margin-left: 4px;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.cornerimg {
  position: absolute;
  bottom: -10%;
  left: 4%;
}
.cornerimg img {
  width: 210px;
  height: 210px;
}
.cornerimg2 {
  position: absolute;
  top: 7%;
  right: -13%;
}
.cornerimg2 img {
  width: 210px;
  height: 210px;
}
.cornerimg3 {
  position: absolute;
  bottom: 7%;
  right: -8%;
}
.cornerimg3 img {
  width: 110px;
  height: 110px;
}

.highlight {
  background-color: #7053d0;
  color: rgb(71, 47, 47);
}
iframe {
  width: 70%;
  height: 99%;
  border: none;
  border-radius: 12px;
}
.box1 {
display: none;
}
.mobile {
  display: none;
}
@media (max-width: 1000px) {
  .container {
    display: none;
  }

  .box1 {
    display: block;
    width: 60vw;
    height: 90lvh;
    border: solid 8px var(--accent);
    background-color: white;
    color: var(--accent);
    padding: 12px 20px;
    text-align: center;
    margin: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 18px;
  }
  iframe{
    width: 96%;
    height: 80%;
    border: none;
    border-radius: 12px;
    overflow-x: hidden;
}
  .mobile {
    display: block;
  }
  body {
    background-image: url("../pictures/stuff/wall_green.gif"); /* Replace with your image URL */
overflow: hidden;
    background-position: center;
    color: rgb(205, 140, 123);

    font-family: "Source Code Pro", monospace;
    margin: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}