@media screen and (prefers-reduced-motion: reduce) 
{
	html 
  {
		scroll-behavior: auto;
	}
}

*{
  box-sizing: border-box;
}

html{
  min-height:100vh;
  min-width:100vh;

  scroll-behavior: smooth;
}


/*Scrollbar    RIVEDI DOPO!!!!!!!!!!
::-webkit-scrollbar 
{
  width: 10px;
}

::-webkit-scrollbar-track 
{
  background: #f1f1f100;
}

::-webkit-scrollbar-thumb 
{
  background: #8888882b;
}
*/

body
{
  margin:0;
  padding-top:0;
  padding-bottom:0;

  min-height:100vh;
  min-width:100vh;
  overflow-x:hidden;

  background-color:#7e6d7e;
  /*background-color:#4c3c52;*/
}


/*///HEADER///*/
.header
{
  position:static;

  left:0px;
  top:0px;

  margin-left:0;
  margin-bottom:0;
  margin-top: 0;

  padding:2% 1% 2% 1%;

  height: 20%;
  overflow: hidden;

  background-color:#1E121D;
  
  font-family: Arial, Helvetica, sans-serif;
}

.header>h1
{
  margin: 1% 0 0.5% 2%;
  padding: 0;

  font-size: 10vh;
  font-weight: 600;
  color: rgb(166, 43, 43);
}

.header>h2
{
  margin: 0.5% 0 0 2%;

  float: left;

  font-size: 5vh;
  font-weight: bold;
  color: rgb(188, 147, 147);
}

.sectionLinks
{
  right: 0;
  text-align: right;
}

.sectionButton
{
  padding: 0.7% 1% 0.5% 1%;
  margin: 0 0.7% 0 0;

  min-width: 10%; 
  max-width: 10%;
  height: 5%;
  
  text-align: center;
  display: inline-block;

  background-color: rgb(84, 50, 65);

  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

.sectionButton:hover
{
  background-color: rgb(125, 46, 46);
}

.sectionButton>a
{
  padding: 0;
  margin: 0 0 1.5% 0;
  
  display: block;
  height: 100%;
  width: 100%;
  
  
  text-align: center;

  color: white;
  font-size: 4vh;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: none;
}

.sectionButton>a:visited
{
  color: white;
  text-decoration: none;
}



/*///FOOTER///*/
.footer
{
  position:static;

  bottom:0px;

  margin: 2% 0 0 0;
  padding: 3% 0.5% 2% 1%;

  width: 100%;
  min-height: 35vh;
  overflow: hidden;
  text-align: center;

  background-color:#1E121D;
  
  color: rgb(125, 46, 46);
  font-family: Arial, Helvetica, sans-serif;
}

.footer>h2
{
  margin: 0 0 2% 0;
  padding: 0;
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 5vh;
  font-weight: 600;
  color: rgb(166, 43, 43);
}

.footer>a
{
  padding: 0;
  margin: 0 0 2% 0;
  
  display: inline-block;

  color: white;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
}

.footer>a:visited
{
  color: white;
  text-decoration: none;
}

.iconLinks>a
{
  margin: 0 0.5%;
}


/*///HOME PAGE///*/
.introBox
{
  padding: 2% 2% 2% 2%;
  margin: 2% 15% 2% 15%;

  position: relative;
  
  height: 20%;
  width: 70%;
  
  background-color: rgb(84, 50, 65);
  border-radius: 5px;
}

.introBox>p
{
  margin: 0 12% 0 4%;
  
  font-size: 23px;
  font-weight: 100;
  text-align: center;
  line-height: 1.4;
  color: whitesmoke;
  font-family: Verdana, Tahoma, sans-serif;
}

.introBox>h3
{
  margin: 0 4% 1% 0;
  
  font-size: 27px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  color: whitesmoke;
  font-family: Verdana, Tahoma, sans-serif;
}

.introBox>img
{
  margin: 0;
  
  position: absolute;
  right: -5%;
  top: 20%;
  z-index: 10;
}


.projectShowcaseContainer
{
  position: relative;
  
  padding: 1% 1.5% 3% 1.5%;
  margin: 0px, auto;
  
  width: 100%;
  min-height: 80%;

  text-align: center;
}

.projectShowcaseContainer>h2
{
  margin: 0 0 1.5% 0.5%;
  text-align: center;

  color: rgb(0, 0, 0);
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 750;
}


.projectShowcase
{
  position: relative;
  
  padding: 0;
  margin: 0 1%;
  
  width: 30%;
  height: 50%;
  
  display: inline-block;
  float: none;
  
  /*background-color: rgb(125, 46, 46);*/
  text-align: center;

  color: rgb(0, 0, 0);
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;

  border-radius:10px;
}

.projectShowcase>img
{
  width: 100%;
  height: 80%;
}

.projectShowcase>h3
{
  margin: 0.5% 0.5% 2% 0.5%;
  font-weight: 600;
}

.projectShowcase:hover
{
  background-color: rgb(84, 50, 65);
  /*background-color: #1e121d55;*/

  color: white;
}


/*///PORTFOLIO PAGE///*/
.portfolioContainer
{
  position: relative;
  
  padding: 3% 0 0 0;
  margin: 0px, auto;
  
  width: 100%;
  min-height: 80%;

  text-align: center;
}

.projectShowcaseRow
{
  position: relative;
  
  padding: 0 1% 2% 1%;
  margin: 0px, auto;
  
  width: 100%;
  min-height: 80%;

  text-align: center;
}

.projectShowcaseRow>.projectShowcase
{
  padding: 1% 0 0 0;
}

.projectShowcaseRow>.projectShowcase>h4
{
  margin: 0  0 2% 0;

  font-size: 25px;
  font-weight: 400;
}


/*///ABOUT PAGE///*/
.aboutBox
{
  padding: 1.5% 2.5%;
  margin: 2.5% 10%;
  
  height: 20%;
  width: 80%;
  
  background-color: rgb(84, 50, 65);

  font-size: 20px;
  color: whitesmoke;
  line-height: 1.2;
  text-align: justify;
  font-family: Verdana, Tahoma, sans-serif;

  border-radius: 0.5%;
}

.aboutBox>p>a
{
  font-weight: bold;
  color: rgb(188, 147, 147);
}

.aboutBox>p>a:visited
{
  font-weight: bold;
  color: rgb(188, 147, 147);
}

.aboutBox>p>a:hover
{
  color: rgb(255, 255, 255);
}


.cvContainer
{
  position: relative;
  
  padding: 2% 1.5%;
  margin: 0px, auto;
  
  width: 100%;
  min-height: 80%;

  text-align: center;
}

.cvContainer>h2
{
  margin: 0 0 2% 0;
  text-align: center;

  font-weight: 600;
  font-family: Verdana, Tahoma, sans-serif;
}


/*///PROJECT PAGE///*/
.projectTitle
{
  margin: 5% 0 3% 0;
  
  width: 100%;
  
  text-align: center;

  color: rgb(0, 0, 0);
  font-size: 50px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
}

.projectTitle>h1
{
  margin: 0;
}

.projectImage
{
  margin: 0 20%;
  padding: 0;

  width: 60%;

  text-align: center;
}



.projectStatsContainer
{
  padding: 0;
  margin: 2% 20%;

  width: 60%;
  
  text-align: center;
  display: flex;
  align-items: center;
}

.stat
{
  padding: 0;
  margin: 0 1%;
  
  width: 50%;
  height: 100%;

  display: inline-block;
  text-align: center;

  justify-content: center;
  align-items: center;  

  font-size: 95%;
  color: rgb(0, 0, 0);
  font-family: Verdana, Tahoma, sans-serif;
}

.statSeparator
{
  min-width: 4px;
  height: 130px;

  background-color: black;

  display: inline-block;
}

.stat>h3>a
{
  font-weight: bold;
  color: rgb(0, 0, 0);
}

.stat>h3>a:visited
{
  font-weight: bold;
  color: rgb(0, 0, 0);
}

.stat>h3>a:hover
{
  color: rgb(255, 255, 255);
}




.projectPitchBox
{
  margin: 3% 20%;

  width: 60%;

  text-align: justify;
  text-justify: auto;

  font-size: 20px;
  color: rgb(0, 0, 0);
  font-family: Verdana, Tahoma, sans-serif;
}


.projectDescriptionBox
{
  margin: 5% 10%;

  width: 80%;

  text-align: justify;
  text-justify: auto;

  font-size: 20px;
  color: rgb(0, 0, 0);
  font-family: Verdana, Tahoma, sans-serif;
}

.projectDescriptionBox>h3
{
  font-weight: 800;
  font-size: 30px;
}

.projectDescriptionBox>h4
{
  margin-top: 0;
}

.projectDescriptionBox>p>a>img
{
  margin: 0 0 7% 2%;
  width: 50%;
  float: right;
}

.projectDescriptionBox>.projectDescriptionImages
{
  margin: 0 0 7% 2%;
  max-width: 40%;
  float: right;

  align-items: center;
  text-align: center;
}

.projectDescriptionBox>.projectDescriptionImages>a>img
{
  width: 100%;
  height: 100%;
}

.projectDescriptionBox>.projectDescriptionImages>p
{
  margin: 1%;
  font-size: 17px;
}

.projectDescriptionImages
{
  width: 100%;
  align-items: center;
  text-align: center;
}


.projectDescriptionBox>h6>a
{
  color: rgb(0, 0, 0);
}

.projectDescriptionBox>h6>a:visited
{
  color: rgb(0, 0, 0);
}

.projectDescriptionBox>h6>a:hover
{
  color: rgb(255, 255, 255);
}

.projectPitchBox>p>a
{
  color: rgb(0, 0, 0);
}

.projectPitchBox>p>a:visited
{
  color: rgb(0, 0, 0);
}

.projectPitchBox>p>a
{
  color: rgb(0, 0, 0);
}

.projectPitchBox>p>a:hover
{
  color: rgb(255, 255, 255);
}




.projectScreens
{
  margin: 0 5%;

  width: 90%;

  display: inline-block;
  align-items: center;
  text-align: center;
}

.projectScreens>a
{
  margin: 0 1% 3% 1%;
  color: transparent;
  list-style: none;
}

.projectScreens>a>img
{
  margin: 0 0 1% 0;
}

.projectScreens>img
{
  margin: 0 1% 1% 1%;
}



.downloadExe
{
  text-align: center;

  margin: 3% 0 4% 0;
  padding: 0;
  
  font-size: 5vh;
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
}

.downloadExe>a
{
  color: rgb(166, 43, 43);
}

.downloadExe>a:hover
{
  color: rgb(255, 255, 255);
}



.projectNavPost>a, .projectNavPrev>a
{
  margin: 0;
  
  font-size: 17px;
  font-weight: 510;
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-family: Verdana, Tahoma, sans-serif;
}

.projectNavPost>a:hover, .projectNavPrev>a:hover
{
  color: rgb(255, 255, 255);
}


.projectNavPost
{
  margin: 0 0 1.2% 1%;
  
  display: inline;
  text-align: left;

  float: left;
}

.projectNavPrev
{
  margin: 0 1% 1.2% 0;
  
  display: inline;
  text-align: right;

  float: right;
}