@charset "utf-8";

/*
   Self-Introduction Font 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;*/
/*previous fonts*/
@import url("https://fonts.googleapis.com/css2?family=Angkor&family=PT+Sans+Narrow&display=swap");

/*New ones. 
Increased readability. Enhanced uniqueness*/
@import url("https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;0,900;1,300;1,400;1,600;1,700&display=swap");
/*font-family: 'Goudy Bookletter 1911', serif;
font-family: 'Source Sans Pro', sans-serif;*/

body {
  margin: 0 auto;
  max-width: 1028px;
  /*font-family: "PT Sans Narrow", sans-serif;*/ /*old font*/
  font-family: "Source Sans Pro", sans-serif; /*new*/
  background-color: rgba(0, 255, 127, 0.4); /*SpringGreen*/
  color: darkgreen;
  text-align: center;
  border-left: 1px solid green;
  border-right: 1px solid green;
  box-shadow: darkgreen 0px 0px 35px;
  padding: 0 40px 10px;
}
header {
  position: fixed;
  z-index: 1;
  margin: 0 auto;
  width: 100%;
  max-width: 1028px;
  background: SpringGreen;
  text-shadow: 0.8px 0.8px 1.5px DarkGreen;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  font-size: 1.2em;
  color: darkgreen;
  border-radius: 15px;
  border-bottom: 0.5px solid green;
}
header li {
  border: 2px solid ForestGreen;
  border-radius: 25px;
  border-style: outset;
}
header a:hover {
  border: 5px solid ForestGreen;
  border-radius: 25px;
  border-style: outset;
  padding: 9px;
}
header li:hover {
  /*транзиція дає час застосування ефекту мілісекундах.*/
  transition: transform 0.8s;
  /*це збільшує об'єкт у кілька разів.*/
  transform: scale(1.2, 1.2);
  border: none;
}
.topPart {
  /*Block where GIF, VF, and future text are located*/
  margin-top: 6px;
  width: 100%;
  padding-top: 33px;
  padding-bottom: 33px;
  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);
  /*збільшує об'єкт при наведенні, емуляція збільшення*/
  transition: transform 1s;
  /*дуже цікавий ефект.як зумування*/
  transform: scale(1.1, 1.1);
  box-shadow: -10px 0px 20px black, 
               10px 0px 20px black, 
			   0px 10px 20px black,
			   0px -10px 20px black;
}
.VF {
  /*font-family: "Angkor", cursive;*/
  font-family: "Goudy Bookletter 1911", serif;
  font-size: 5em;
  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: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;
}
#web a {
  padding: 9px;
}
/*images of youtube, insta, imdb*/
.infoPanel img {
  border: 5px solid gold;
  height: 70px;
  border-radius: 10px;
}
.infoPanel img:hover {
  transition: transform 0.3s;
  transform: scale(1.2, 1.2);
  border: 5px solid green;
  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: 5px;
  margin: 0 auto;
  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;
  font-size: 2em;
  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;
}
#lan h3 {
  padding-top: 20px;
}
.ThankYou {
  font-size: 1.4em !important;
}
.textBlock {
  /*це білий колір фону з прозорістю*/
  background-color: rgba(255, 255, 255, 0.7);
  max-width: 400px;
  border-radius: 15px;
  margin: 0 auto;
}
.regText {
  font-size: 1.32em;
  font-weight: 700;
  color: darkgreen;
  font-style: italic;
  letter-spacing: 0.5px;
}
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;
}