/*@font-face {*/
/*  font-family: 'Linda';*/
/*  src: url('fonts/lindl___-webfont.woff2') format('woff2'),*/
/*       url('fonts/lindl___-webfont.woff') format('woff');*/
/*}*/

@font-face {
  font-family: 'black_jack';
  src: url('fonts/black_jack-webfont.woff2') format('woff2'),
       url('fonts/black_jack-webfont.woff') format('woff');
}

body {
  /*font-family: 'Linda';*/
  background-image: url('textures/212cdf8fd82076b95684e673f0743efa.jpg');
  background-attachment: fixed;
  background-size: 700px;
  color: black;
}

html {
  background: black;
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
}

.phone-container {
  width: 100%;
  max-width: 500px;
  height: 80vh;
  margin: 0 auto;
  border: 7px ridge #2b1720;
  border-radius: 5px;
  /*overflow: hidden;*/
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(2, 1fr);
  background-image: url('textures/purplerosesblkbg.gif');
  box-shadow: 0px 0px 20px 10px rgba(0,0,0,1);
}

.tile {
  position: relative;
  min-height: 0;
}

.tile > img:not(.ciaed-title):not(.spotify-cat):not(.email) {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/*CIAED TITLE CSS*/
.ciaed-title {
  position: absolute;

  top: 1%;
  left: 58%;

  transform: translate(-50%, -50%);

  width: clamp(120px, 60%, 300px);

  z-index: 3;
}

.ciaed-title {
  transform: translate(-50%, 0) rotate(-3deg);
}

.ciaed-title {
  width: 140%;
}

/*SPOTIFY CAT CSS*/
.spotify-cat {
  position: absolute;

  top: 47%;
  left: 35%;

  transform: translate(-50%, -50%);

  width: clamp(300px, 60%, 300px);

  z-index: 3;
}

.spotify-cat {
  width: 110%;
}

.spotify-cat:hover {
  transform: translate(-50%, -50%) rotate(5deg) scale(1.1);
}

/*EMAIL CSS*/
.email {  
  position: absolute;

  top: 50%;
  left: 65%;

  transform: translate(-50%, -50%);

  width: clamp(300px, 60%, 300px);

  z-index: 3;
  
}

.email {
  width: 50%;
}

.email {
  transform: translate(-50%, -50%) rotate(5deg);
}

.email:hover {
  transform: translate(-50%, -50%) rotate(5deg) scale(1.1);
}


.text-box {
   position: absolute;
   font-family: 'black_jack';
   color: #f7f7f0;
   top: 28%;
  left: 80%;

  transform: translate(-50%, -50%) rotate(2deg);

  width: clamp(300px, 60%, 300px);
  font-size: clamp(18px, 4vw, 28px);
  z-index: 3;
  
  -webkit-text-stroke: 0.5px purple;
  text-shadow: 1px 1px 0px brown;
  
}

.text-box-2 {
  position: absolute;
}


.text-box-button {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: absolute;
}

.me-pic {
  position: absolute;
  border: 5px ridge pink;
  border-radius: 5px;
}

.text-box-button {
  background-color: #f7f7f0;
  border: 5px outset white;
  border-radius: 5px;
  font-family: 'black_jack';
  text-decoration: none;
}

.text-box-button a {
  text-decoration: none;
  color: #210c13;
}

a:hover {
  color: hotpink;
}

a:active {
  color: pink;
}

/*.tile2 {*/
/*  display: grid;*/
  grid-template-columns: 2fr 1fr; /* buttons bigger, image smaller */
/*  height: 100%;*/
/*  min-height: 0;*/
  overflow: visible; /* keeps everything inside */
/*}*/

.bandcamp {
  position: absolute;
  padding:3px;
  top: 0%;
  left: 40%;
  transform: translate(0%, 0%) rotate(-5deg);
  width: clamp(80px, 30%, 80px);
  z-index: 3;
}

.bandcamp:hover {
  transform: rotate(2deg) scale(1);
}

.instagram {
  position: absolute;
  top: 25%;
  left: 54%;
  transform: translate(0%, 0%);
  width: clamp(90px, 40%, 90px);
  z-index: 3;
}

.instagram:hover {
  transform: rotate(3deg) scale(1);
}

.tiktok {
  position: absolute;
  top: 48%;
  left: 67%;
  transform: translate(0%, 0%) rotate(5deg);
  width: clamp(50px, 40%, 50px);
  z-index: 3;
}

.tiktok:hover {
  transform: rotate(-3deg) scale(1);
}

.youtube {
  position: absolute;
  top: 73%;
  left: 67%;
  transform: translate(0%, 0%);
  width: clamp(60px, 40%, 60px);
  z-index: 3;
}