@import url('https://fonts.googleapis.com/css2?family=Rakkas&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
	font-family: "Space Mono";
	font-size: 18px;
	line-height: 1.5;
	
	background: rgb(71,182,227);
background: linear-gradient(90deg, rgba(71,182,227,1) 0%, rgba(70,252,201,1) 86%);
	color: #FFFFFF;
	margin: 40px auto 40px auto;
	max-width: 1120px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


h1, nav, footer  {
  font-family: "Space Mono";
	font-size: 34px;
	font-weight: 900;
  line-height: 1.2;
}

h2  {
  font-family: "Space Mono";
	font-size: 26px;
	font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px 0;
}

a {
  color: #ffffff;
  text-decoration: none ;
  margin: 0 0 0 0px;
  transition: color .3s;
}

a:hover, a.selected {
  color: #3131e6ff;
}

button {
  color: #ffffff;
  padding: 15px;
  border: none;
  background-color: black;
  transition: color 1s;
  font-family: "Space Mono";
	font-size: 14px;
	font-weight: 700;
  line-height: 1.2;
  border-radius: 15px;
  outline: none;
}

button:hover, button.selected {
  color: #3131e6ff;
  background-color: #9eb6ff;
  cursor: pointer;
}

a.button {
  display: inline-block;
  border: none;
  outline: none;
}

html {
  scroll-behavior: smooth;
}

section {
  margin: 80px 0 80px 0;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px 32px;
  grid-auto-flow: dense;
}

section h2 {
	grid-column: 2 / span 10;
  text-align: center;
}

section.project2 div.artwork {
  grid-column: 1 / span 6;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

section.project2 div.description {
  grid-column: 7 / span 6;
  font-size: 18;
  text-align: center;
}

section.project img {
  max-height: 320px;
}

section.project2 img {
  max-height: 320px;
}

section.project-alt div.artwork {
  grid-column: 7 / span 7;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

section.project-alt div.description {
  grid-column: 1 / span 6;
  text-align: center;
}

section.project-alt img {
  max-height: 320px;
}

section.hd-layout img {
  grid-column: 1 / span 12;
}

section.hd-layout h2 {
  grid-column: 1 / span 4;
}

section.hd-layout div {
  grid-column: 1 / span 12 ;
}

section.grid-layout div {
  grid-column: span 6;
}

section.grid-layout h2, p {
  margin: 16px 0 16px 0;
  text-align: left;
}

section.work div.photo {
  grid-column: 1 / span 12 ;}

section.work div.description {
  grid-column: 7 / span 6;
}

section.work h1 {
  margin: 0 0 0 0;
  text-align: left;
}

section.work p {
  margin:16px 0 16px 0;
}

section.hire-me div.photo {
  grid-column: 3 / span 4;
}

section.hire-me div.description {
  grid-column: 7 / span 6;
}

section.hire-me h1 {
  margin: 0 0 0 0;
  text-align: left;
}

section.hire-me p {
  margin:16px 0 16px 0;
}

section.writing div.artwork {
  grid-column: 1 / span 6;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

section.writing div.description {
  grid-column: 7 / span 6;
  text-align: center;
}

section.writing img {
  border-radius: 15px;
  max-height: 320px;
}

section.writing div {
  grid-column: 4 / span 6;
  text-align: center;
  margin: 96px 0 64px 0;
}

section.project img {
  border-radius: 15px;
}

section.project2 img {
  border-radius: 25px;
}

section.hd-layout  img {
  border-radius: 15px;
}

section.grid-layout  img {
  border-radius: 15px;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center; 
}

footer a {
  margin: 0 12px 0 12px;
}

footer img {
  max-height: 25px;
}

body {
    background: linear-gradient(181deg, #47b6e3, #a3eace, #9eb6ff);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 54s ease infinite;
    -moz-animation: AnimationName 54s ease infinite;
    -o-animation: AnimationName 54s ease infinite;
    animation: AnimationName 54s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:81% 0%}
    50%{background-position:20% 100%}
    100%{background-position:81% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:81% 0%}
    50%{background-position:20% 100%}
    100%{background-position:81% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:81% 0%}
    50%{background-position:20% 100%}
    100%{background-position:81% 0%}
}
@keyframes AnimationName {
    0%{background-position:81% 0%}
    50%{background-position:20% 100%}
    100%{background-position:81% 0%}
}


@media (max-width: 1248px) {
  body {
    width: auto;
    margin: 80px 64px 48px 64px;
  }
  h1, h2, nav, footer {
    font-size: 24px;
  }
}

@media (max-width: 920px) {
  header {
    flex-direction: column;
  }
  nav {
    margin:  32px 0 0 0;
  }
  header a {
    margin: 0 16px 0 16px;
  }
}

@media (max-width: 660px) {
  nav a {
    margin: 8px 0 0 0;
  }
  section {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 24px;
    margin: 64px 0 64px 0;
  }
  
  section h1,
  section h2,
  section.project2 div.artwork,
  section.project2 div.description,
  section.project div.artwork, 
  section.project div.description,
  section.work div.photo,
  section.work div.description,
  section.hire-me div.photo,
  section.hire-me div.description,
  section.contact div.form{
    grid-column: 1 / span 4;
    flex-direction: column;
}
}

@media (max-width: 500px) {
  body {
    margin: 32px 32px 32px 32px;
  } 
  
  nav {
    display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
  }
  }


  .button-group {
  grid-column: 1 / span 12;
  text-align: center;
  margin: 20px 0;
}

a.button {
  color: #ffffff;
  padding: 15px;
  border: none;
  background-color: black;
  transition: color 1s;
  font-family: "Space Mono";
	font-size: 14px;
	font-weight: 700;
  line-height: 1.2;
  border-radius: 15px;
  outline: none;
}

/* Selected button - cobalt blue text, black background */
a.button.selected {
  color: #ffffff;
  padding: 15px;
  border: none;
  background-color:#3131e6ff;
  transition: color 1s;
  font-family: "Space Mono";
	font-size: 14px;
	font-weight: 700;
  line-height: 1.2;
  border-radius: 15px;
  outline: none;
}

/* Selected button hover - stays cobalt blue (no change on hover) */
a.button.selected:hover {
  color: #ffffff;
  padding: 15px;
  border: none;
  background-color:#3131e6ff;
  transition: color 1s;
  font-family: "Space Mono";
	font-size: 14px;
	font-weight: 700;
  line-height: 1.2;
  border-radius: 15px;
  outline: none;
}

/* Non-selected buttons keep their normal hover behavior (lilac background) */
a.button:not(.selected):hover {
  color: #3131e6ff;
  background-color: #9eb6ff;
  cursor: pointer;
}


@media (max-width: 768px) {
  .button-group {
    display: flex; /* Add this! */
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 0;
  }
  
  .button-group .button {
    width: 100%;
    text-align: center;
  }
}