/* Page background and layout */

body{
  margin:0;
  background:#0b1220;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-left:50px;
  padding-right:1px;
  font-family:Arial, Helvetica, sans-serif;
}

/* Main webpage canvas */

.canvas{
  position:relative;
  width:1100px;
  height:1900px;
  background-image:url("images/homepage.webp");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:top center;
}

/* navigation links */

.nav-links{
  position:absolute;
  top:170px;
  right:40px;
  z-index:3;
}

.nav-links a{
  margin-left:60px;
  text-decoration:underline;
  font-size:30px;
  color:#333;
  font-family: Georgia, "Times New Roman", serif;
}

.nav-links a:hover{
  color:#000;
}

/* Medium button */

.medium{
  position:absolute;
  left:113px;
  bottom:475px;
  width:430px;
  cursor:pointer;
  transition:transform 0.15s ease-in-out;
  z-index:2;
}

/* LinkedIn button */

.linkedin{
  position:absolute;
  right:113px;
  bottom:475px;
  width:430px;
  cursor:pointer;
  transition:transform 0.15s ease-in-out;
  z-index:2;
}

/* Hover effect */

.medium:hover,
.linkedin:hover{
  transform:scale(1.03);
}

/* Prevent image stretching */

.medium img,
.linkedin img{
  width:100%;
  height:auto;
}

/* Temporary alignment helper */
/*
.medium,
.linkedin{
  outline:2px solid red;
}
*/