:root{
  --bg-color: #121212;
  --about-background: #004367;
  --projects-background: #000267;
  --contact-background: #006367;
  
  --text-color: white;
  --font-family: monospace;
  
  --transition-time: 500ms;
  --transition-fly: 1s;
  
  --menu-background: linear-gradient(#000000, #00000000);
  --menu-margin: 5px;
  --menu-padding: 20px;
  --menu-font-size: 15px;
  --menu-item-border: white double;
  --menu-item-border-radius: 15px;
  --menu-item-hover-border-color: #505050;
  --menu-item-hover-background: #202020;
  --menu-item-active-border-color: #465870;

  --link-hover-color: #87e648;

  --offset: 100px;
}






/* ////////////////////// */
/* //////// Main //////// */
/* ////////////////////// */
html, body{
  background-color: var(--bg-color);
  
  color: var(--text-color);
  font-family: var(--font-family);
  
  scroll-behavior: smooth;
  
  margin: 0px;

  overflow-x: hidden;
}

h3{
  margin-block-start: 0;
  margin-block-end: 0;
}

a{
  color: var(--text-color);
  text-decoration-line: none;
  
  transition: var(--transition-time);
}

a:hover{
  color: var(--link-hover-color);
}

.offset{
  padding-top: var(--offset);
}






/* ////////////////////// */
/* //////// Menu //////// */
/* ////////////////////// */
header{
  background-image: var(--menu-background);
  
  display: flex;
  position: fixed;

  justify-content: right;
  top: 0;
  right: 0;
  
  width: 100%;

  z-index: 1000;
}

header div{
  flex: 1;
  text-align: center;
}

nav{
  display: flex;
}

nav li{
  float: left;
  
  padding: var(--menu-margin) var(--menu-padding);
  margin: 0 var(--menu-margin);

  list-style: none;
  font-size: var(--menu-font-size);
  
  border: var(--menu-item-border);
  border-radius: var(--menu-item-border-radius);
  
  transition: var(--transition-time);
}

nav li:hover{
  background-color: var(--menu-item-hover-background);
  border-color: var(--menu-item-hover-border-color);
}

nav li a:hover{
  color: var(--text-color);
}

nav li:active{
  border-color: var(--menu-item-active-border-color);
}





/* ////////////////////// */
/* ////// Sections ////// */
/* ////////////////////// */
section{
  width: 100%;
  min-height: 100vh;

  margin: 0px;
  padding: 0px;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

section div {
  display: flex;
  flex-direction: column;
  align-items: center;
}





/* /////////////////////// */
/* //////// About //////// */
/* /////////////////////// */
#about div{
  width: 60%;
}

#about{
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: var(--about-background);
}

.snake{
  border-radius: 20px;
  margin-bottom: 20px;
  width: 100%;
}




/* ////////////////////////// */
/* //////// Projects //////// */
/* ////////////////////////// */
#projects{
  background-color: var(--projects-background);
  display: flex;
  flex-direction: column;
  align-items: center;

}

#projects img{
  width: 50%;
  float: left;
  object-fit: cover;
  aspect-ratio: 4/3;
}

#projects div div{
  width: calc(50% - 40px);
  margin: 0 20px;
  float: left;
}

.project{
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project a{
  width: 100%;
}

.project img{
  width: 100%;
}

.project h1{
  text-align: center;
}

.project {
  opacity: 0;
  transform: translateX(0);
  transition: opacity var(--transition-fly) ease-out, transform var(--transition-fly) ease-out;
}

.project.show {
  opacity: 1;
}

.project.left {
  transform: translateX(-100px);
}

.project.left.show {
  transform: translateX(0);
}

.project.right {
  transform: translateX(100px);
}
.project.right.show {
  transform: translateX(0);
}





/* ///////////////////////// */
/* //////// Contact //////// */
/* ///////////////////////// */
#contact{
  background-color: var(--contact-background);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
}

#contact div{
  width: 80%;
}

#contact div form, #contact div input, #contact div button{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

form textarea{
  width: 100%;
}






@media screen and (max-width: 874px){
.icons{
  display: none;
}
}

@media screen and (max-width: 702px){
.stats{
  display: none;
}

nav{
  display: none;
}
}