/* basic styling to make the links bigger */

html,body {
  margin:0;
  padding:0;
  scroll-behavior: smooth;
}
ul {
  list-style-position: outside !important;
  list-style-type: disc !important;
}

#navigation {
  display: flex;
  /* make the navbar alway stay on top */
  position: fixed;
  top: 0;
  width: 100%;
  background-color: aliceblue;
}

#navigation span {
  flex-grow: 1;
  height: 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

#navigation span a {
  display: inline-block;
}

/* when a link is clicked, it gets highlighted */
/* .highlighted {
  color: red;
} */

a {
 color: royalblue;
  text-decoration: none;
  text-decoration-color: #000000;
}

a.under {
  background-image: linear-gradient(120deg, rgb(68, 186, 255) 0%, #00d1a4 100%);
  color: #000000;
  text-decoration: none;
  text-decoration-color: #000000;
  background-repeat: no-repeat;
  background-size: 100% 0.25em;
  background-position: 0 95%;
}
a.under:hover {
  color: rgb(62, 130, 255);
}
a.under-project {
  background-image: linear-gradient(120deg, rgb(0, 45, 129) 0%, rgb(62, 130, 255) 100%);
  color: #000000;
  text-decoration: none;
  text-decoration-color: #000000;
  background-repeat: no-repeat;
  background-size: 100% 0.17em;
  background-position: 0 95%;
}
a.under-project:hover {
  color: rgb(62, 130, 255);
}


#navigation a.links {
  transition: background-image 1s;
  background-image: aliceblue;
  color: #000000;
  text-decoration: none;
  text-decoration-color: #000000;
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 88%;
}

#navigation a.links:hover {
  background-image: linear-gradient(120deg, rgb(255, 188, 62) 0%, #ff8a86 100%);
}
/* make each section taller and give them different colors */
#content {
  margin-top: 5vh;
}

#content div {
  height: 100%;
}

#section_home {
  background-color: aliceblue;
  height: 100%
}

#section_about {
  background-color: ghostwhite;
}
.about-padding {
  padding: 10% 25% 10% 25%;
}

#section_life {
  background-color: aliceblue;
}
.life-padding {
  padding: 5% 25% 10% 25%;
}

#section_projects {
  background-color: ghostwhite;
}
.projects-padding {
  padding: 5% 25% 0% 25%;
  padding-bottom: 5%;
}

#section_professional {
  background-color: aliceblue;
}
.professional-padding {
  padding: 5% 25% 0% 25%;
  padding-bottom: 5%;
}


.sec1vert {
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
}

.sec1horiz {
  flex: 1;
  flex-direction: row;
  flex-grow: 1;
}

.imageProfile {
  width: 300px;
  /* height: 300px; */
  padding-top: 5%;
  padding-bottom: 3%;
}

.title-name {
  font-size: 6vw; /*line-height: 0;*/
}

.homecontent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.professionalcontent {
  display: flex;
  justify-content: left;
  align-items: left;
}

.para {
  font-size: 15px;
}

.socialicons {
  height: 23px;
  padding-right: 7px;
  transition: transform .2s;
}

.socialicons:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}

.downarrow {
  transition: transform .2s;
}
.downarrow:hover {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2); 
}

.projname {
  width:30%;
  height: 60%;
  margin-right:10%;
  float: left;
}

.projdescription {
  width:42%;
  float: left;
}

.page {
  width: 100%;
  height: 100%;
}

.active{
	background-image: linear-gradient(120deg, rgb(255, 188, 62) 0%, #ff8a86 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 88%;
  transition: background-size 0.25s ease-in;
}


.gallery-text-name {
  float: left;
  width: 30%;
  margin: 1%;
  margin-left: 0%;
}
.gallery-text {
  float: left;
  width: 66%;
  margin: 1%;
}

.work-text-name {
  float: left;
  width: 28%;
  margin: 1%;
  margin-left: 0%;
}
.work-text {
  float: left;
  width: 68%;
  margin: 1%;
}

.spotify-player {
  float: left;
  width: 60%;
  padding-bottom: 50px;
  padding-left: 50px;
  margin-block-start: 1em;
}
.spotify-description {
  float: left;
  width: 40%;
}
.spotify-gallery {
  float: left;
}

* {
  box-sizing: border-box;
}

.piccolumn {
  float: left;
  width: 33.33%;
  padding: 5px;
  text-align: center;
  transition: transform .2s;
}

.piccolumn:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
}

/* Clearfix (clear floats) */
.picrow::after {
  content: "";
  clear: both;
  display: table;
}

.lg-view-projects-header {
  display:inline-block;
}
.sm-view-projects-header {
  display: none;
}

@media (max-width: 800px) {
  /* CSS that should be displayed if width is equal to or less than 800px goes here */
  .lg-view-projects-header {
    display:none;
  }
  .sm-view-projects-header {
    display: inline-block;
  }
  .gallery-text-name {
    padding-bottom: 0;
    width: 100%;
  }
  .gallery-text {
    padding-top: 0;
    width: 100%;
  }
  h5 {
    font-weight: bolder;
  }

  .work-text-name {
    width: 100%;
  }
  .work-text {
    width: 100%;
  }

  .spotify-player {
    width: 100%;
    padding-left: 0px;
  }
  .spotify-description {
    width: 100%;
  }
  .spotify-gallery {
    width: 100%;
  }
  .piccolumn {
    width: 100%;
    padding: 50px;
    padding-bottom: 0%;
    padding-top: 0%;
  }

  .imageProfile {
    width: 300px;
    /* height: 300px; */
    padding-top: 10%;
    padding-bottom: 5%;
  }
  .about-padding {
    padding-left: 12%;
    padding-right: 12%;
    padding-top: 15%;
  }
  .life-padding {
    padding-left: 12%;
    padding-right: 12%;
    padding-top: 15%;
  }
  .projects-padding {
    padding-left: 12%;
    padding-right: 12%;
    padding-top: 15%;
  }
  .title-name {
    font-size: 10vw;
  }
  .downarrow {
    padding-top: 17%;
    padding-bottom: 15%;
  }
  .socialicons {
    height: 25px;
  }
  #section_home {
    padding-bottom: 200px;
  }
}



.underline--magical {
  background-image: linear-gradient(120deg, rgb(255, 188, 62) 0%, #ff8a86 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 88%;
  transition: background-size 0.25s ease-in;
  width: fit-content;
  display: block;
}
.underline--magical :hover {
  background-size: 100% 88%;
}