/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


.comic-relief-regular {
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-style: normal;
}

.comic-relief-bold {
  font-family: "Comic Relief", system-ui;
  font-weight: 700;
  font-style: normal;
}


body {
  /*Light Purple*/
  background-color: #b89fc1;
  /*Dark Purple*/
  color: #4e0069;
  font-family:'Comic Relief',sans-serif;
}

html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0; /* remove scrollbar space */
background: transparent; /* to make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
background: transparent;
}

::selection {
/* Change highlight background color */
background: #f7abcf;
/* Change highlight text color */
color: #FFFFFF;
}

a {text-decoration: none; color: black; }

body {
background-image: url('flowers.png');
background-attachment: fixed;
background-repeat: repeat;
overflow: hidden;
}

.container {
  border-width:7px;
  border-style:solid;
  border-image: url("bg.png") 9 fill round;
  margin: auto;
  width: 884px;
  height: 665px;
  position: relative;
  padding: 5px;
  z-index: 4;
}

.container-home{
  border-width: 1px;
  border-style: solid;
  border-color: #4e0069;
  background-image: url('home.png');
  background-repeat: repeat;
  width: 880px;
  height: 170px;
  position: relative;
  left: 1px;
  z-index: 5;
  
}

.container-gallery{
  border-width: 1px;
  border-style: solid;
  border-color: #4e0069;
  background-image: url('gallery.png');
  background-repeat: repeat;
  width: 880px;
  height: 170px;
  position: relative;
  left: 1px;
  z-index: 5;
  
}

.container-artist{
  border-width: 1px;
  border-style: solid;
  border-color: #4e0069;
  background-image: url('artist.png');
  background-repeat: repeat;
  width: 880px;
  height: 170px;
  position: relative;
  left: 1px;
  z-index: 5;
  
}

.outer
{
  border-width:7px;
  border-style:solid;
  border-image: url("Border.png") 7 fill round;
border-radius:15px;
width: 115px;
height: 115px;
margin-top: 10px;
}

.inner
{
  width: 100%;
  height: 100%;
  background-image: url("Shteven pfp.png");
  background-size: cover;
}

.bg, .inner { box-sizing: border-box;}



/* This is the scrolling box thing*/


.bg {
/* for plain background */
background: #FE82B624;

/* vv for image background. remove if want plain */
background-image:url("Purple.png");
/*this is stretchy code vv*/
background-repeat: repeat;
background-size:cover;

padding:12px; /* make number bigger/smaller for a bigger/smaller border */
width:100%;
border:1px solid black;
position: relative;
top: -8em;
left: 138px;
}

.in {
  font-family: Action_Man;
  line-height: 1.125em;
background: #FFF;
color: #000;
padding:5px;
border:1px solid black;
height:103px; /* set height to "height:fit-content;" to expand with text size */
overflow-y:auto; /* remove overflow if you don't want a scroll */
}


.home-button {
  background-color: #b89fc1; 
  border: 2px solid #4e0069;
  color: #4e0069;
  padding: 10px 110px;
  font-family: 'Comic Relief';
  text-align: center;
  text-decoration: none; /* Removes the underline */
  display: inline-block;
  font-size: 24px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 0px; /* Optional: for rounded corners */
}

.gallery-button {
  background-color: #b89fc1; 
  border: 2px solid #4e0069;
  color: #4e0069;
  padding: 10px 110px;
  font-family: 'Comic Relief';
  text-align: center;
  text-decoration: none; /* Removes the underline */
  display: inline-block;
  font-size: 24px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 0px; /* Optional: for rounded corners */
}

.artist-button {
  background-color: #b89fc1; 
  border: 2px solid #4e0069;
  color: #4e0069;
  padding: 10px 110px;
  font-family: 'Comic Relief';
  text-align: center;
  text-decoration: none; /* Removes the underline */
  display: inline-block;
  font-size: 24px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 0px; /* Optional: for rounded corners */
}