@charset "utf-8";

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

*/



body {
  margin: 0;
  font-family: "PT Sans Narrow", sans-serif;
  background-color: rgba(0, 255, 127, 0.5); /*SpringGreen*/
  color: darkgreen;
  text-align: center;
}
header {
  position: fixed;
  margin: 0 auto;
  width: 100%;
  background: SpringGreen;
  text-shadow: 0.8px 0.8px 1.5px #006400; /*DarkGreen*/
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  font-size: 1.2em;
  color: darkgreen;
  border-bottom: 0.5px solid green;
}
.topPart {
  /*Block where GIF, VF, and future text are located*/
  width: 100%;
  padding-top: 33px;
  padding-bottom: 33px;
  background-color: rgba(34, 139, 34, 0.9); /*ForestGreen*/
  border-radius: 40px;
  box-shadow: -2px 0px 2px darkgreen, 
               2px 0px 2px darkgreen,
               0px 2px 2px darkgreen, 
			   0px -2px 2px darkgreen;
}
.animgir {
  width: 50%;
  border-radius: 40px;
  max-height: 400px;
  max-width: 400px;
  box-shadow: -2px 0px 2px darkgreen, 
               2px 0px 2px darkgreen,
			   0px 2px 2px darkgreen, 
			   0px -2px 2px darkgreen;
}
.VF {
  font-family: "Angkor", cursive;
  font-size: 3em;
  color: springgreen;
  margin: 0 auto;
  text-shadow: -3px 0px 2px darkgreen, 
                3px 0px 2px darkgreen,
				0px 3px 2px darkgreen, 
				0px -3px 2px darkgreen;
}
.futureText {
  padding-bottom: 0;
  color: springgreen;
  margin: 0 auto;
  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;
}
.infoPanel a:link {
  color: darkgreen;
}
.infoPanel a:hover {
  color: gold;
  text-shadow: -2px 0px 2px darkgreen, 
                2px 0px 2px darkgreen,
				0px 2px 2px darkgreen, 
				0px -2px 2px darkgreen;
}

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;
}
main {
  padding-top: 51px;
  background-image: url(img/612x612-15.png);
  background-size: 72px;
}
.aboutMe {
  color: darkgreen;
  font-size: 2em;
  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;
}
.infoPanel img {
  border: 2px solid gold;
  height: 50px;
}
h3 {
  padding-top: 33px;
  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;
}
.regText {
  font-size: 1.3em;
  color: darkgreen;
  font-style: italic;
}
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;
}