@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Advent+Pro&display=swap');

  /*Media querie to make menu display in a column instead of a row*/
@media screen and (max-width: 600px) {
  header nav ul{
    flex-flow: column nowrap;
  }
}

*,*::before,*::after{
  margin:0;
  padding:0;
  box-sizing:inherit;
}

html, body {
    scroll-behavior: smooth;
    background-color: #1a1a1a;
    overflow: visible;
    padding: 0px;
    margin: 0px;
    font-family: 'Roboto', sans-serif;
}

h1,h2,h3 {
  font-family: 'Advent Pro', Arial, Helvetica, sans-serif ;
  color: white;
}

h1 {
  font-size: 50px;
}

h2 {
  font-size: 45px;
}

h3 {
  font-size: 40px;
}

h4 {
  font-size: 20px;
}

.title {
  border-bottom: 3px solid #392B58;
  border-width: 3.5px;
  margin: 10px auto 20px auto;
}

#name {
  font-size: 50px;
  color: #584287;
}



.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.welcome {
  grid-area: 1 / 1 / 2 / 2;
  display: flex;
  justify-content: center;
  flex-flow: column;
  text-align: center;

  position:relative;
  height:100vh;
  width:100%;
  z-index:999
}

#button {
  margin-top: 70px;
}

#button a {
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border: 3px outset #392B58;
  border-width:3px;
  padding: 10px;
  color: white;
  text-decoration: none;
  font-size: 25px;
  font-family: 'Ubuntu Mono', sans-serif;
}

#button a:hover {
  background-color: #392B58;
  color: #5E7CE2;
}

nav {
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin: 0px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #392B58;
    
}

nav ul {
    margin: 0px;
    text-align: center;
    display: flex;
    flex-flow: row nowrap;   
    justify-content:flex-end;  
    list-style: none;
}

nav ul li {
  padding: 30px 20px;
  font-family: 'Ubuntu Mono', monospace;
  flex-basis: 150px;
}

nav li:hover {  
  background-color: #8164be;
  border-radius: 10px;
}

nav  li a {    
  color: white;
  text-decoration: none;
  font-size:x-large;
  padding: 30px 20px;
}

nav  li:hover a {    
  color: #17301C;
}

#about {
  display: flex;
  flex-flow: column nowrap;
  background-color: #1a1a1a;
  text-align: center;
  justify-content: center;

  height:100vh;
  width:100%;
  z-index:999;
}

#about .title {
  margin-top: 60px;
}

#about .infoCard {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;  
}

#about .infoCard img{
  width: 15%;
  object-fit: contain;
  margin-top: 8px;
  margin-left: 30px;
  border-radius: 50%;
}

#about .infoCard p{
  color: white;
  font-size: 30px;
  margin: 10px 100px 5px 25px
}


.skills {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr;
  grid-column-gap: 50px;
  grid-row-gap: 0px;

  margin-top: 20px;
}

#skills-title {
  grid-area: 1 / 1 / 2 / 2;
}

#skills-title h3 {
  margin-top: 90px;
  font-size: 80px;
}

#skills-title span{
  color: #392B58;
}

.skills-container {
  grid-area: 1 / 2 / 2 / 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 0px;
}

.skills-container-1 {
  grid-area: 1 / 1 / 2 / 2;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

.skills-container-2 {
  grid-area: 1 / 2 / 2 / 3;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

.skills-container .skill {
  color: white;
  border-bottom: 3px solid #392B58;
  border-width: 3.5px;
  margin: 10px 20px;
  cursor: default;
  
}

.skills-container .skill:hover h4{
  font-size: 20.5px;
}

.skills-container .skill h4 {
  margin: 10px 0px;
}

#about .cv {
  margin-top: 30px;
}


#about .cv a {
  text-decoration: none;
  color: white;
  font-size: 20px;
  border: 5px solid #8164be;
  border-radius: 20px;
  padding: 10px 20px;
}

#about .cv a:hover {
  background-color: #392B58;
  text-decoration: underline;
}

#projects {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  text-align: center;
  
  height:100vh;
  width:100%;
  z-index:999;
}

#projects .title {
  margin-top: 90px;
}

.projects-container {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  overflow:hidden;
}

.projects-container .project {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.projects-container .project h4 {
  color: white;
}

.projects-container .project img {
  width: 30%;
}

.projects-container .project a {
  text-decoration: none;
  color: white;
  border-bottom: #392B58;

}

.projects-container .project a:hover{
  color: rgb(202, 195, 195);
}

footer {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  background-color: #392B58;
  text-align: center;
  width: 100%;
  height: 100%;
}

footer .socials ul {
  margin: 10px 0px;
  display: flex;
  list-style: none;
  flex-flow: row nowrap;
  justify-content:space-between;
  gap: 20px;
}

footer .socials ul li a {
  font-size: 45px;
  color: white;
}

footer .socials ul li a:hover {
  color: #17301C;
}

footer .copyright {
  margin-bottom: 20px;
  color: white;
  font-size: medium;
}

#homeCanvas{
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  width:100%;
  height:100vh;
  overflow:hidden;
  background-color: #1a1a1a;
}

.under-construction {
  background-color: #f9d6d5;
  color: #c72f26;
  text-align: center;
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
}