/*

hello! i hope you enjoy making your own little card on the web. :>
there's a guide for more information at http://krzchn.net/thoughts-cabinet/digicard-guide.html
i've added comments to make is as easy as possible to customize your page, without need to delve too deep into the code yourself.
but if you want really precise tweaks, you might have to dig into it - that's how i learned, though!

i also want to give credit to Kaylee Rowena - I started my own personal website using her template, and it's one of the reason i'm happy to give back by creating my own now!

happy to help if you need, send me an email at clem@krzchn.net :>

*/

/* custom fonts: for each font you want to add, copy paste this block */

/*
@font-face {
  font-family: "FontName";
  src: url("fontfile.ttf");
  font-weight: normal;
  font-style: normal;
}
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;900&display=swap');

:root {
  /* colors */
  --text: #105289;
  --btnlinkcolor: #105289; /* link label text colour */
  --btnlinkcolorhover: #ec008c; /* link label text colour when active */
  --linkcolor: #105289;; /* used for links */
  --linkcolourhover: #ec008c; /* used for links when active */

  /* fonts - the browser will try to use them in order, the first one it finds will be the one displayed */
  --titlefont: "Montserrat", sans-serif; /* used for the card title on top */
  --basefont: Verdana, Helvetica, Arial, sans-serif; /* used for the description */
  --linkfont: "Montserrat", sans-serif; /* used for the links */

  /* card styling */
  --max-width: 500px; /* width of the box */
  --cardborder: solid 2px #cc3300; /* style of the border around the card if you want one! the syntax is 'style thickness color' - you need to uncomment a line in the '#card' section below to activate it */

  /* link button styling*/
  --btnborder: solid 2px #cc3300; /* style of the border around the card if you want one! the syntax is 'style thickness color' - you need to uncomment a line in the '.linkbtn' section below to activate it */

  /* text styling */
  --text-size: 1.2em; /* increasing this value will make all the text bigger */
  --alignment: center;

  /* misc */
  --spacing: 30px; /* defines the base spacing of the elements - a higher value will make things spread out more */
  --profilepicsize: 150px; /* size of the profile picture */
  --profilepiccorner: 20%; /* if using a rounded corner profile picture, adjust the corners - values range between 0-50%, where 0 is a sharp square and 50% is a circle */

  /* don't worry about this*/
  --half: calc(var(--spacing)/2);
  --double: calc(var(--spacing) * 2);
}

* {
  max-width: 100%;
  -ms-overflow-style: none;
}

body {
  background-color: #0F3B61;
	background-image: linear-gradient( #0F3B61, #2A7FCB 400px);
	color: #000;
}

/* this applies to everything on the page */
main {
  /* positioning */
  max-width: 100%;
  padding-top: 5%;
  padding-bottom: 5%;
  margin: 0 auto;

  /* colours */
  color: var(--text);

  /* text styling */
  text-align: var(--alignment);
  font-family: var(--basefont);
  font-weight: normal;
  font-style: normal;
  font-size: var(--text-size);
  line-height: 1.5em;
}

/* this affects the title container above the card */
#name {
  margin-top: 5vh;
  text-align: center;
  text-indent: 0;
}

/* h1 is a header tag - on this page, it's used for the title above the card */
h1 {
  font-family: var(--titlefont);
}

/* the card block */
#card {

  background-color: #89B4E1;
	border: 3px solid #DEE8F7;
	box-shadow: 0 0 5px 2px rgba(0, 0, 0, .25), inset 0 0 18px 9px rgba(38, 116, 185, .25);
  
  max-width: var(--max-width);
  padding: var(--spacing);
  margin: 0 auto;
  border-radius: 15px; /* this gives the card round corners */
}

/* these apply to the buttons in the list of links */
.linkbtn {
  height: var(--double);
  max-width: 80%;
  margin: var(--half) auto;
  border-radius: var(--spacing);
	background-color: #A7C5E6;
	color: #105289;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}

/* this applies to the buttons in the list of links when active */
.linkbtn:hover {
	background-color: #ec008c;
  color: #FFFFFF ;
  cursor: pointer;
  transition: 0.5s;
}

/* these apply to the buttons labels */
.linkbtn span {
  font-family: var(--linkfont);
  font-size: 1.5em;
  transition: 0.5s;
}

/* these apply to the buttons labels when active */
.linkbtn:hover span {
  color: #FFFFFF ;
  transition: 0.5s;
}

/* other links styling */
a {
  text-decoration: none;
  color: var(--linkcolor);
}

/* other actives links styling */
a:hover {
  text-decoration: none;
  color: var(--linkcolourhover);
}

/* class styling */
.flex {
  display: flex;
  flex-flow: row wrap;
}

.center {
  text-align: center;
  margin: 0 auto;
}

/* profile pic styling, this is what create the mask on the shape */
.profilepic img {
  width: var(--profilepicsize);
  height: var(--profilepicsize);
  padding: var(--half);
  object-fit: cover;
}

.circle img {
  border-radius: 50%;
}

.rounded img {
  border-radius: var(--profilepiccorner);
}

/* social links icons */
.fab {
  width: 50px;
  height: 50px;
  color: var(--linkcolor);
  transition: 0.5s;
  padding: 3px;
}

/* social links icons, active */
.fab:hover {
  color: var(--linkcolorhover);
  transform: scale(1.3);
  transition: 0.5s;
}

/* indents the description paragraph */
/*#intro p {
  
}*/

/* this affects the block of social links */
#socials {
  padding: var(--spacing);
  text-indent: 0;
  text-align: center;
}

/* credits block at the bottom */
#credits {
  width: 100vw;
  font-size: 0.75em;
  text-align: center;
  text-indent: 0;
  position: fixed;
  bottom: 0%;
}

/* template credits block at the bottom right, semi transparent by default */
#tmplt_credits {
  width: 100vw;
  font-size: 0.75em;
  padding-right: 15px;
  text-indent: 10px;
  position: fixed;
  bottom: 0%;
  left: 45%;
  opacity: 0.25;
}

/* makes the template credits block opaque when active */
#tmplt_credits:hover {
  opacity: 1;
}