@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

:root{
  --phone-border: #FF715B;
}

body{
  margin: 0;
  display:grid;
  grid-template-columns: 40vw 60vw;
  height:100vh;
  place-items: center;
  font-family: 'Ubuntu', sans-serif;
}

.mobile-wrapper{
  display:grid;
  grid-template-rows: 5vh 80vh 5vh;
  grid-template-areas: 'camera' 'screen' 'button';
  place-items: center;
  height: 90vh;
  width: 40vh;
  background: #444;
  border-radius: 10% / 5%;
  border: #FF715B solid 4px;
  box-shadow: inset -2px 0px 0px rgba(200,200,200,0.5), 
              inset  2px 0px 0px rgba(200,200,200,0.5);
}

.text-wrapper{
  justify-self: center; /*why is this not working without text-align?*/
  text-align:center;
  align-self:center;
  font-size: 5vmax;
  width: 40vw;
  /* text-wrap: wrap; */
}

.text{
  width : 50vw;
}

.socials{
  display:none;
}

.social-img{
  padding: 1vh;
  width: 10vmax;
  height: 10vmax;
  color: #333;
  transition: transform 0.5s;
}



.social-img:hover{
  transform: scale(1.03);
  transition: transform 0.4s;
}
.image-wrapper{
  justify-self: center;
  height: 30vmin;
  width: 30vmin;
  margin: 0;
  overflow:hidden;
  display: grid;
  place-items: center;
  text-align: center;
  margin: 0 auto;
  background: transparent;
}

.image-wrapper img{
  height: calc(30vmin - 4px);
  width: auto;
  transition: transform 1s;
}

.image-wrapper img:hover{
  transform: scale(1.1);
  transition: transform 1s;
}

/*button*/
.button{
  display:flex;
  place-content: center;
  align-items:center;
  grid-area: button;
  width: 3.5vh;
  height: 3.5vh;
  border-radius: 50%;
  background-color: #333;
  color: #bbb;
  border-left: 1px solid rgba(200,200,200,0.4);
  border-right: 1px solid rgba(200,200,200,0.4);
  z-index: 2;
  font-size: 3vmin;
/*   box-shadow: inset 2px 2px 2px #888; */
}
.button::after{
    content:'';
    position:absolute;
    grid-area: button;
    border: 2px dashed #FFA799; 
    border-radius: 50%;
    width: 4vh;
    height: 4vh;
    animation: button-highlight 500ms infinite alternate;
    z-index: 0;
  }
  .button.invisible::after{
    display:none;
  }

.mobile-screen{
  background: #fff;
  height: 80vh;
  width: 35vh;
  grid-area: screen;
  display:grid;
  grid-template-rows: 0.2fr 7.8fr;
  grid-template-areas: 'topbar' 'content';
  place-items: center;
  overflow: hidden;
}

.top-bar{
  background-color: #eee;
  width: 35vh;
  grid-area: topbar;
  display: flex;
  justify-items: end;
}

.inside-mobile-screen{
  /*accounting for padding*/
  height: 76vh;
  width: 33vh;
  grid-area: content;
  text-align: center;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 113, 91, 0.4), rgba(0,0,0,0)), 
    radial-gradient(circle at 30% 80%, rgba(255, 15, 123, 0.3), rgba(0,0,0,0)),
    radial-gradient(circle at 80% 50%, rgba(255, 214, 92, 0.5), rgba(0,0,0,0)),
    radial-gradient(#eee, #eee);
    overflow-y: scroll;
}

.about, .interests, .projects{
  position:relative;
  padding: 1vh;
  left: 40vh;
  transition: left 0.7s ease-out;
  font-size: 2vmin;
  text-align: center;
}

p{
  text-align:left;
  padding-left: 1vh;
  padding-right: 1vh;
  font-size: 14pt;
}

.footer{
  position: fixed;
  font-size: 12pt;
  width: 100vw;
  top: 0;
  left: 0;
  
  color: #ddd;
  font-family: 'Ubuntu', sans-serif;
}

.footer p::selection{
  background: #FF715B;
  color: #444;
}

a{
  text-decoration: none;
  color: black;
  font-weight: 700;
  background-image: linear-gradient(to bottom, #d2664b 0%, #d2664b 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 4px 4px;
  transition: background-size .2s;
  font-size: 14pt;
}

.img-link{
  background: none;
}

a:hover{
  background-size: 4px 100px;
  transition: background-size .6s;
}


/*ICON STYLES*/

.arrow{
  font-size: 18pt;
  padding-bottom: 50px;
  transition: transform 2s;
}

.material-icons{
  transform: rotateZ(90deg);
}


/*ANIMATIONS*/

@keyframes button-highlight{
  from{
    transform: scale(1);
  }
  to{
    transform: scale(1.25);
  }
}

/* @keyframes phone-drop{
  0%{
    transform: rotateX(0deg) scale(0.3);
  }
  30%{
    transform: rotateX(50deg) scale(0.31);
  }
  60%{
    transform: rotateX(-10deg) scale(0.30);
  }
  80%{
    transform: rotateX(10deg) scale(0.31);
  }
  100%{
    transform: rotateX(0deg) scale(0.30);
  }
} */