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

@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Moirai+One&display=swap');

:root {
  --gap: 28px;
  --panel-padding: 18px;
  --bg: #f86bea52;
  --muted: #000000;
  --accent: #e6e6e6;
  --text: #ffffff;
  /* font-family: "Cherry Bomb One", system-ui;
  font-weight: 400;
  font-style: normal; */
}

* {
    box-sizing:border-box
}
html, body {
    height:100%
}
body {
  margin:0;
  background:var(--muted);
  color:var(--text);
  padding:30px;
}

.pinkness {
		animation: colorRotate 4s linear infinite alternate;
}

@keyframes colorRotate {
		0%   { color: #FFC0CB; }
		25%  { color: #FFB6C1; }
		50%  { color: #FF69B4; }
		75%  { color: #FF1493; }
		100% { color: #C71585; }
}


/* outer page "card" that resembles the big frame in the sketch */
.page {
  text-align: center;
  max-width:1100px;
  margin:0 auto;
  background:var(--bg);
  border:var(--border);
  padding:32px;
  display:grid;
  grid-template-columns: 320px 1fr; /* left column fixed-ish, right fluid */
  gap:var(--gap);
  min-height:75vh;
}

/* panels are the left and right columns */
.panel{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}

 /*common card style */
.card{
  background:rgb(0, 0, 0);
  border:1.5px solid #FFC0CB;
  padding:var(--panel-padding);
  min-height:60px;
  gap:12px;
}

/* left column specifics */
.large-card{
  flex-direction: row;
  align-items: center;
  min-height: 160px;
  border-style: solid;
}

.card-text {
  font-family: "Moirai One", system-ui;
  font-size: xx-large;
  margin-left: 20px;
}

.large-card .photo{
  height:140px;
  background-image: url('/selfie.jpg');
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
  border:1px solid #bbb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:#666;

}

/* smaller left text card */
.small-card { 
  min-height: 100px; 
}

/* music button */
.music-card { 
    min-height: 56px; 
    display: flex; 
    align-items: center; 
}

/* right column big top and bottom */
.big-top{
  min-height:160px;
}
.big-bottom{
  min-height:140px;
}

/* gallery card with three thumbnails */
.gallery-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:110px;
}
.thumbnails{
  display:flex;
  gap:12px;
}
.thumb{
  flex:1 1 0;
  min-height:70px;
  border:1px solid #bbb;
  background:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#555;
}

/* flexible spacer on left to mimic big empty left area in sketch */
.spacer{ flex:1; }

/* small responsive adjustments */
@media (max-width:880px) {
    .page { 
        grid-template-columns: 1fr; 
        padding:20px; 
    }
    .large-card .photo { 
        width:100%; 
        height:200px; 
    }
}

	html,
	body {
		background-image: url('wallpaper.jpg');
		margin: 0;
		width: 100%;
		height: 100%;
	}
	
	a {
		color: #fa81d8;
		text-decoration: none;
	}
	a:hover {
		text-decoration: underline;
	}
	ul .icon {
		margin-right: 0.2rem;
		vertical-align: top;
	}
	
	p {
	 color: #FFC0CB; 
	}