/*Google fonts (heading)*/
.dm-serif-display-regular {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}

/*secondary font*/
.roboto-condensed- {
  font-family: "Roboto Condensed", sans-serif;
  font-style: normal;
}

/*intro page*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

/*Orange page*/
.intropage 
{
min-height: 100vh; /*full screen size*/
background-color: #FF5A2A;
}

/*name text*/
.intropage {
  min-height: 100vh; /*100% of browser height*/
  position: relative; 
  overflow: hidden;
  color: #F3EFE6
}

.name {
  position: absolute; /*doesnt push elements around*/
  bottom: 200px; /*text placed 40 pixels above its container*/
  left: 150px;
  line-height:.95;
  /*letter-spacing:.01em;*/
  font-size: 6vw; /*fontsize changes according to screen size*/
}

.name span {
  display: block;
}

.portfolio {
  font-family: "Roboto Condensed", sans-serif;
  position:absolute;
  bottom: 130px;
  left: 360px;
  font-size: 3.7vw
}

.infoblock h1 {
  font-family: "DM Serif Display", serif;
  position: absolute;
  font-size: 1.7vw;
  top: 100px;
  right: 150px;
}
  
.infoblock p {
  position: absolute;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.3vw;
  top: 145px;
  right: 195px
}

 .infoblock p span {
    display: block;
}

/*enter button code from react bits*/

.enter{
  position:absolute;
  right: clamp(100px, 50vw, 200px);
  bottom: clamp(100px, 25vw, 200px);
  width: 200px;
  height: 200px;
  border:none;
  background:none;
  cursor:pointer;
  padding:0;
  z-index: 3; /* always top */
  display:grid;
  place-items:center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 220ms ease;
}
.enter:hover{ transform: translateY(-4px) scale(1.2); }
.enter:active{ transform: translateY(0) scale(2); }

.enterSvg{
  width:170px;
  height:170px;
  display:block;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.10));
  pointer-events:none;
}

/* Enter label under circle for extra clarity */
.enterLabel{
  position:absolute;
  font-family: var(--cond);
  letter-spacing:.18em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(243,239,230,.95);
  bottom: 5px;
  right: 75px;
  pointer-events:none;
}

.ringStroke{
  fill: transparent;
  stroke: rgba(243,239,230,.75);
  stroke-width: 1.4;
}
.ringFill{
  fill: rgba(243,239,230,.14);
  stroke: rgba(243,239,230,.22);
  stroke-width: 1;
}
.ringText{
  font-family: var(--cond);
  letter-spacing:.18em;
  text-transform: uppercase;
  font-size: 10.5px;
  fill: rgba(243,239,230,.92);
}
.ringArrow{
  fill:none;
  stroke: rgba(243,239,230,.95);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rotate{
  transform-origin: 50% 50%;
  animation: spin 10s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }



/*homepage, about me and navigation bar on top*/
* { margin: 0; padding: 0; box-sizing: border-box; }

.home.html{
  min-height:100vh;
  background-color: #F3EFE6; 
}

.nav{
  height: 80px;
  Background-color: #D24B3A;
  }
  
.nav-inner {
  width: 100%;
  padding: 0 40px;
  display: flex;
  align-items: center;
}

.nav-logo {
  position: relative;
  font-size: 1.7vw;
  top: 100px;
  left: 150px;
}

.nav a {
  color: #F3EFE6;
  font-family: "DM Serif Display", serif;
}