/* Background */

body {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  background-image: url("/assets/images/bricks.JPG");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden; /* Prevents scrolling */
}

@media screen and (min-width: 100px) {
  body {
    font-size: 3.5vw;
  }
}

@media screen and (min-width: 600px) {
  body {
    font-size: 3vw;
  }
}

@media screen and (min-width: 850px) {
  body {
    font-size: 2.5vw;
  }
}

@media screen and (min-width: 1150px) {
  body {
    font-size: 1.75vw;
  }
}



/* 3D Logo Header */

.headerlogo {
  position: absolute;
  top: 0px;
  left: 0px;
  transform: scale(0.7);
}

/* Portrait Photo */

.portraitphoto {
  position: fixed;
  top: 30px;
  right: 30px;
  width: calc(20vw + 50px);
  height: auto;
  border: 5px solid #ffffff;
}

/* Resume */

.resumetext{
  font-family: 'Inknut Antiqua';
  background-color: rgba(255, 255, 255, 0.8);

  display: inline;
  margin-left: 30px;
  line-height: 1.5;
  padding: 0px 20px;
}

/* About Me */

.aboutme {
  font-family: 'Inknut Antiqua';
  color: rgb(0, 0, 0);
  background-color: rgba(255, 255, 255, 0.80);
  text-align: justify;
  text-indent: 2em;
  line-height: 1.5;

  margin-left: 30px;
  margin-right: 30px;
  padding: 0px 20px;
}

/* Footer Grid */

.footer-grid {
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 9000;

  display: grid;
  grid-template-columns: 1fr 75px;
  place-items: end end;
}

.footer {
  font-family: 'Inknut Antiqua';
  font-size: 1rem;
  background-color: rgba(255, 230, 192, 0.50);
  color: rgb(0, 0, 0)
}

.frog {
  margin-bottom: 20px;
  transform: rotate(270deg);
}

/* Fonts */

  /* inknut-antiqua-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inknut Antiqua';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/inknut-antiqua-v16-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
  /* rubik-burned-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik Burned';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/rubik-burned-v1-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}