@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&family=Jacquard+12&display=swap');

/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */

/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors: */
  --background-color: #faf5d3;
  --dark: #0C2430;
  --content-background-color: #ffffff;
  --sidebar-background-color: #ffffff;

  /* Text Colors: */
  --light-text: #613a1f;
  --dark-text: #595959;
  --link-color: #EDD26F;
  --link-color-hover: #dab01c;

  /* Text: */
  --font: "IBM Plex Mono", monospace;
  --heading-font: "Jacquard 12", system-ui;
  --font-size: 14px;
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */

body {
    margin: 0;
    font-family: "Inconsolata", monospace;
}

a {
  text-decoration: none;
}

a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: none;
}


/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */

main {
   display: grid;
   grid-template-columns: 1.2fr 1fr 1fr;
   height: 100vh;

}

.panel {
    display: grid;
    grid-template-columns: 1fr;
}

.panel .text {
    background: #eeeee7;
    color: #323230;
    padding: 30px 60px;
}

/* ----- welcome panel ----- */

.panel.welcome {
    background: #0C2430;
    padding: 30px 60px;
}

.panel.welcome nav a {
    color: #EFE6E0;
    text-decoration: none;
    margin-right: 20px;
}

.panel.welcome p {
    color : #a8a8a8;
    max-width: 540px;
    line-height: 2em;
}

.panel.welcome h1 {
    color : #eeeee7;
    font-family: "Jacquard 12", system-ui;
    font-size: 3em;
}

.panel.welcome footer {
    align-self: end;
}

#float {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 10px);
  }
  100% {
    transform: translate(0, -0px);
  }
}

/* ----- about panel ----- */

.panel.about {
    grid-template-rows: 2fr 1fr;
    overflow: hidden;
}

.panel.about img { 
    width: 100%;
    height: 100%;
}

/* ----- photos panel ----- */

.panel.photos {
    grid-template-rows: 1fr 2fr;
    overflow: hidden;
}

.panel.photos img {
    min-width: 100%;
    min-height: 100%;
}

/* ----- responsive ----- */

@media screen and (max-width: 1400px) {
    main {
        grid-template-columns: 1fr 1fr; 
    }
    .panel.photos {
        grid-column: span 2;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }
}

@media screen and (max-width: 960px) {
    main {
        grid-template-columns: 100%;
        grid-template-rows: 500px 400px 400px;
    }
    .panel.about {
        grid-row: 2;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }
    .panel img {
        width: 100%;
    }
}

@media screen and (max-width: 680px) {
    main {
        grid-template-rows: 700px 600px 600px;
    }
    .panel.about, .panel.photos {
        grid-template-columns: 1fr;
        grid-column: span 1;
        grid-template-rows: 1fr 1fr;
        border-bottom: 1px solid #dcdcd0;
    }
}