/* 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." */
   

* {
  box-sizing: border-box;
}

@font-face {
  font-family: Berlin; /* set name */
  src: url("Fonts/Berlin.ttf"); /* url of the font */
}

@font-face {
  font-family: MickeyMouse; /* set name */
  src: url("Fonts/MickeyMouse.otf"); /* url of the font */
}

@font-face {
  font-family: Messy; /* set name */
  src: url("Fonts/Messy.ttf"); /* url of the font */
}

@font-face {
  font-family: Kelsi-fill;
  src: url("Fonts/Kelsi-fill.otf");
}

@font-face {
  font-family: Kelsi-Regular;
  src: url("Fonts/Kelsi-Regular.otf");
}



body {
  background-color: white;
  background-image: url("images/background.png");
  color: black;
  font-family: Verdana;
  text-align: center;
}

h1 {
  margin: 0px;
}

ul {
  display: flex;
  gap: 10px;
}

li {
  margin-bottom: 10px;
  line-height: 1;
}

#MainTitleBG{
  background-image: url("images/name_bg.png");
  background-repeat: no-repeat;
  background-size: 20rem 8rem;
  background-position: center center;
}

#MainTitle{
  font-family: MickeyMouse;
  font-size: 100px;
  color: white;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 1));
  margin-right: 10rem;

}

#paperbg{
  height: 4.5rem;
  background-image: url("images/6.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%; 
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 1));
}

#nav{
  display: flex;
  flex-direction: row;
  justify-content: center;
  
  padding: 1rem 1.5rem;
  
  
  font-family: Messy;
  font-size: 40px;
  
  color: black;

  text-align: center;
  list-style-type: none;
  margin: 0;
  column-gap: 3rem;
}

#circle{
  display: flex;
  text-decoration: none;
  padding: 0px;
}

#circle:hover {
  background-image: url("images/circle.gif");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

#sidenav{
  
  background-image: url("images/sidebar.png");
  background-size: 100% 100%;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  
  font-family: Messy;
  font-size: 25px;
  
  color: black;
  
  padding: 5rem;

  text-align: center;
  list-style-type: none;
  margin: 0;
}

main{
 display: flex; 
 flex-wrap: wrap;
 gap: 0rem;
 max-width: 100%;
 margin: 0rem auto;
}

.hero{
 margin: 0 auto 2rem;
 justify-content: center;
 
 background-image: url("images/header2.png");
 background-size: 100% 100%;
 padding: 5rem;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 1));
}

.hero h1{
  font-family: Kelsi-Regular;
 font-size: 4rem;
 margin-bottom: .5rem;
}

.hero p{
  color: #555;
  opacity: 0.8;
  line-height: 1.5rem;
}

.hero button{
 background: #111;
 color: #fff;
 padding: .7rem 1.5rem;
 margin-top: 1rem;
 font-size: 1rem;
 text-transform: uppercase;
 cursor: pointer;
}

.grid{
 display: grid;
 grid-gap: 3rem;
}

.grid div {
  /*padding: 5rem;*/
  /*height: 20rem;*/
  display: flex;
  align-items: center;
  justify-content: center;
}
p


.box {
    
    width: 1000px;
    height: 620px;
    padding: 48px; 
    
    display: grid;
    align-items: center;
    justify-content: center;
}

.paper-frame{
  display: inline-block;
  background-image: url("images/blockpaper.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.6));

  /* Adjust these to control overall size */
  /*width: 800px;   /* controls both paper & image width */
  /*height: 500px;  /* proportional height */
  padding: 5% 20%;  /* controls border thickness around the image */
  
  box-sizing: content-box;
  
  transform: scale(1.2);   /* 1 = normal, 1.2 = 20% bigger */
  transform-origin: center; /* ensures it grows from the center*/
  
  max-height: 600px;
  
  margin-bottom: 5rem;
}

/* The artwork controls the size */
.paper-frame img{
  max-width: 100%;
  max-height:100%;
  width: auto;
  display: block;
  }

.box img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.article {
  grid-column: 2;
  text-align: center; 
  justify-content: center;
  
  width: fit-content;
  
  max-width: 100rem;        /* pick a content width you like */
  margin-left: 0;     /* centers inside the right column */
  margin-right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;     /* keeps inner stuff centered too */
}

/* One fixed column on the right */
.article .grid {
  display: grid;
  grid-template-columns: 1fr;  /* fixed width column */
  gap: 2rem;
  justify-content: center;        /* or center */
}

/* Make each box a fixed size too (prevents stretching) */
.article .grid .box {
  /*width: 100%;*/
  /*height: 600px;                 adjust to taste */
}

.layout {
  display: grid;
  /*grid-template-columns: 300px minmax(auto,800px); left rail + content */
  justify-content: center;
  grid-auto-rows: min-content;
  gap: 0;
  align-items: flex-start;
  overflow: visible;                  /* don't clip sticky */
  margin-top: 0rem;
}



.sticky {  
  flex-basis: 300px;
  
  grid-column: 1;
  align-self: flex-start;
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 0rem;
  
  position: sticky;
  top: 1rem;
  margin-left: 0;
}

.music {
 grid-column: 1;
 grid-row: 1;
 position: static;
}

.herobanner {
  background-image: url("images/me.png"); /* replace with your image */
  background-size: 18rem;
  background-position: right;
  background-repeat: no-repeat;
  padding: 2.2rem 2.5rem 2.4rem; /* adjust height of banner */
  position: relative;
  z-index: 0;
}

.hero-banner h1,
.hero-banner #nav {
  position: relative;
  z-index: 1; /* keeps text and links above the image */
}

/*scrolling images*/

div.scroll-container {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}

div.scroll-container img {
  padding: 10px;
}