* {
  font: inherit;
  line-height: inherit;
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote,
body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt,
em, embed, fieldset, figcaption, figure, footer, form, grid, h1, h2, h3, h4, h5,
h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, main,
mark, menu, nav, noscript, object, ol, output, p, pre, q, s, samp, section,
small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th,
thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

a, a:active, a:visited { color: inherit; }

.noSelect {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.noSelect:focus {
  outline: none !important;
}

/* ----------------------------------------------------------------------
*   General
* -------------------------------------------------------------------- */

:root {
  --bg-color: rgb(249, 211, 210);
  --rec-color: rgb(255, 255, 255);
  --text-color: rgb(0, 0, 0);
  --hover-color: rgba(93, 55, 55, 0.2);
}

html, body {
  height: 100%;
  background-color: var(--bg-color);
  overflow-x: hidden;
}

#site-content {
    height: 400px;
    width: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#rectangle {    
    position:absolute;
    width: 200px;
    height: 275px; 
    background: var(--rec-color);
    margin: 50px 75px
}

#link-about, 
#link-portfolio {
  position: absolute;    
  color: black;
  font-size: 24px;
  margin: 0px; /*padding: 50px;*/
}

#link-about {
  top: 30%;
  left: 0px;
}

#link-portfolio { 
  bottom: 30%;
  right: 0px;
}

#link-about svg,
#link-portfolio svg {
  width: 200px;
}

#link-about path,
#link-portfolio path {
  fill: var(--text-color);
  transition: fill .4s ease; 
}

#link-about:hover path,
#link-portfolio:hover path {
  fill: var(--hover-color);
}

/* ----------------------------------------------------------------------
*   Media queries
* -------------------------------------------------------------------- */

@media screen and (min-width: 1080px),
only screen and (min-height: 1080px) and (orientation:portrait) {

  #site-content {
    height: 650px;
    width: 560px;
  }

  #rectangle {
    width: 320px;
    height: 430px; 
    margin: 100px 120px;
  }

  #link-about {
    top: 40%;
    left: 0px;
  }

  #link-portfolio { 
    bottom: auto;
    top: 40%;
  }

  #link-about svg,
  #link-portfolio svg {
    width: 260px;
  }
  
}

@media screen and (min-width: 1441px) {

  #site-content {
    height: 850px;
    width: 800px;
  }

  #rectangle {
    width: 500px;
    height: 650px; 
    margin: 100px 150px; /*margin: calc((100% - 70%)/2);*/
  }

  #link-about {
    top: 40%;
    left: 0px;
  }

  #link-portfolio { 
    bottom: auto;
    top: 40%;
  }

  #link-about svg,
  #link-portfolio svg {
    width: 380px;
  }
  
}

/* ----------------------------------------------------------------------
*   Fade-in on page load
* -------------------------------------------------------------------- */

body {
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}