/****** Reset ******/
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  font-family:
    system-ui,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji'; /* 1 */
  line-height: 1.15; /* 2 */
  -webkit-text-size-adjust: 100%; /* 3 */
  tab-size: 4; /* 4 */
}
body {
  margin: 0;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp,
pre {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    'Liberation Mono',
    Menlo,
    monospace; /* 1 */
  font-size: 1em; /* 2 */
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  border-color: currentcolor;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}
legend {
  padding: 0;
}
progress {
  vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
summary {
  display: list-item;
}
:root {
  line-height: 1.5;
}
h1, h2, h3, h4, h5, figure, p, ol, ul {
  margin: 0;
}
ol[role="list"], ul[role="list"] {
  list-style: none;
  padding-inline: 0;
}
h1, h2, h3, h4, h5 {
  font-size: inherit;
  font-weight: inherit;
}
img, svg {
  display: block;
  max-inline-size: 100%;
}

/****** Global ******/
:root {
  --black: #0e1111;
  --white: #fff;
  --grey: #151919;
  --green: #37ff80;
  --pink: #ff6ca5;
  --yellow: #f9d700;
  --link-color: var(--green);
}

/****** Content ******/
body {
  background-color: var(--black);
  color: var(--white);
  font-family: 'Gilroy', system-ui, sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1em;
}
.block {
  padding: 2rem;
}
.logo {
  max-width: 15rem;
  margin: 5rem auto 2rem;
}
h1 {
  font-weight: 800;
  font-size: 3rem;
  margin-bottom: 2rem;
  text-transform: uppercase;
  line-height: 1.1em;
}
main p {
  margin-bottom: 2rem;
}
p a {
  color: var(--link-color);
  text-decoration: none;
  outline: 0;
  cursor: pointer;
  background-image: linear-gradient(to top,var(--link-color),var(--link-color));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% .12rem;
  transition: all .2s linear;
}
p a:focus,
p a:hover {
  color: var(--black);
  text-decoration: none;
  background-size: 100% 2.8rem;
}

/****** Gallery ******/
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto 2rem;
}
.gallery a img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.gallery a:hover img {
  transform: scale(1.03);
}

/****** Social ******/
.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0 auto 2rem;
  padding: 0;
}
.social li {
  width: 2rem;
  margin: 0 .5rem;
}
.social a svg path {
  fill: var(--white);
  transition: fill .2s linear;
}
.social a:focus svg path,
.social a:hover svg path {
  fill: var(--pink);
}

/****** Footer ******/
footer {
  padding: 2rem 5rem;
  font-size: 1rem;
  border-top: .2rem solid var(--grey);
}
.icon {
  width: 4rem;
  margin: 0 auto .5rem;
}
.icon path {
  fill: var(--white);
}

/****** Media Queries ******/
@media (min-width:50rem) {
  body {
    font-size: 2rem;
  }
  .logo {
    max-width: 30rem;
  }
  h1 {
    font-size: 5rem;
  }
  .social li {
    width: 3rem;
  }
}