@charset "utf-8";

/*
   Self-Introduction Typography Updates Assignment VF
   Author: Vasyl Flotskyi
   Date:   11/11/2022   

*/


/*Angkor for the main title, and 
PT Sans Narrow fonts for the rest of the page*/
/*font-family: 'Angkor', cursive;
font-family: 'PT Sans Narrow', sans-serif;*/

@import url("https://fonts.googleapis.com/css2?family=Angkor&family=PT+Sans+Narrow&display=swap");

body {
  margin: 0;
  font-family: "PT Sans Narrow", sans-serif;
  background-color: rgba(0, 255, 127, 0.4); /*SpringGreen*/
  color: darkgreen;
  text-align: center;
}
header {
  position: fixed;
  z-index: 1;
  margin: 0 auto;
  width: 100%;
  background: SpringGreen;
  text-shadow: 0.8px 0.8px 1.5px DarkGreen;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  font-size: 1.2em;
  color: darkgreen;
  border-radius: 15px;
  border-bottom: 0.5px solid green;
}
header a:hover {
  border: 5px solid ForestGreen;
  border-radius: 15px;
}
.topPart {
  /*Block where GIF, VF, and future text are located*/
  margin-top: 6px;
  width: 100%;
  padding-top: 33px;
  padding-bottom: 33px;
  /*background-color: rgba(34, 139, 34, 0.9);*/ /*ForestGreen*/
  background: linear-gradient(360deg, forestgreen, springgreen);
  border-radius: 40px;
  box-shadow: -2px 0px 2px darkgreen, 
               2px 0px 2px darkgreen,
			   0px 2px 2px darkgreen, 
			   0px -2px 2px darkgreen;
}
.animatedPic {
  width: 50%;
  border-radius: 40px;
  max-height: 400px;
  max-width: 400px;
  opacity: 0.7;
  box-shadow: -2px 0px 2px darkgreen, 
               2px 0px 2px darkgreen,
			   0px 2px 2px darkgreen, 
			   0px -2px 2px darkgreen;
}
.animatedPic:hover {
  -webkit-filter: grayscale(1) invert(1);
}
.VF {
  font-family: "Angkor", cursive;
  font-size: 3em;
  letter-spacing: 3px;
  color: springgreen;
  margin: 0 auto;
  text-shadow: -3px 0px 2px darkgreen, 
                3px 0px 2px darkgreen,
				0px 3px 2px darkgreen, 
				0px -3px 2px darkgreen;
}
.VF:hover {
  color: DarkGreen;
  text-shadow: -3px 0px 2px SpringGreen, 
                3px 0px 2px SpringGreen,
				0px 3px 2px SpringGreen, 
				0px -3px 2px SpringGreen;
}
.futureText {
  padding-bottom: 0;
  color: springgreen;
  margin: 0 auto;
  letter-spacing: 2px;
  text-shadow: -2px 0px 2px darkgreen, 
                2px 0px 2px darkgreen,
				0px 2px 2px darkgreen, 
				0px -2px 2px darkgreen;
}
.infoPanel {
  width: 100%;
  padding-top: 36px;
}
a {
  text-decoration: none;
}
/*youtube, insta, imdb*/
#web a:hover {
  padding-top: 43px;
  border: 5px solid ForestGreen;
  border-radius: 5px;
}
#web a:active {
  -webkit-filter: grayscale(1) invert(1);
}
/*email*/
.infoPanel a:link {
  color: darkgreen;
  text-decoration: underline;
}
.infoPanel a:hover {
  color: gold;
  text-shadow: -2px 0px 2px darkgreen, 
                2px 0px 2px darkgreen,
				0px 2px 2px darkgreen, 
				0px -2px 2px darkgreen;
}
/*images of youtube, insta, imdb*/
.infoPanel img {
  border: 2px solid gold;
  height: 50px;
  border-radius: 10px;
}
ul {
  margin: 0;
}
li {
  list-style: none;
  display: inline-block;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  color: darkgreen;
  letter-spacing: 1.5px;
}
main {
  padding-top: 51px;
  background-image: url(img/612x612-15.png);
  background-size: 72px;
}
.aboutMe {
  color: darkgreen;
  font-size: 2em;
  letter-spacing: 2.8px;
  margin: 0 auto;
  padding-bottom: 10px;
  text-shadow: -1px 0px 0.5px darkgreen, 
                1px 0px 0.5px darkgreen,
				0px 1px 0.5px darkgreen, 
				0px -1px 0.5px darkgreen;
}
h3 {
  padding-top: 60px;
  color: darkgreen;
  margin: 0 auto;
  letter-spacing: 2px;
  text-shadow: -0.3px 0px 0.4px darkgreen, 
                0.3px 0px 0.4px darkgreen,
				0px 0.3px 0.4px darkgreen, 
				0px -0.3px 0.4px darkgreen;
}
.textBlock {
  background-color: rgba(255, 255, 255, 0.7);
  max-width: 330px;
  border-radius: 15px;
  margin: 0 auto;
}
.regText {
  font-size: 1.3em;
  color: darkgreen;
  font-style: italic;
  letter-spacing: 0.5px;
}
.regText:hover {
  font-size: 1.32em;
  font-weight: bolder;
}
footer {
  background-color: rgba(34, 139, 34, 0.9); /*ForestGreen*/
  color: white;
  margin-bottom: -11px;
  border-radius: 40px;
  letter-spacing: 1px;
  box-shadow: -1px 0px 3px darkgreen, 
               1px 0px 3px darkgreen,
			   0px 1px 3px darkgreen, 
			   0px -1px 3px darkgreen;
}