/* Font */
@font-face {
  font-family: "Font";
  src: url(Fonts/BigShouldersDisplay-Medium.ttf);
}

@font-face {
  font-family: "Normal";
  src: url(Fonts/Roboto-Bold.ttf);
}

* {
  font-family: 'Font';
}

p {
  font-family: "Normal";
  font-size: 1.25vw;
}



/* Main*/

html {
  scroll-behavior: smooth;
  background-color: #2d2a2a;
  scroll-snap-type: y mandatory;
}

.page{
  height: 100vh;
  scroll-snap-align: start;
}

a {
  font-family: "Normal";
  color: white;
  text-align: center;
  font-size: 1.25vw;
  cursor: pointer;
}

a:hover {
  color: lightgrey;
}

a:visited {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

a:link {
  text-decoration: none;

}

h1 {
  text-align: center;
  font-size: 7vw;
}

h2 {
  text-align: center;
  font-size: 5vw;
}
h3{
  font-size: 3.5vw;
}


/* Home */
.home {
  height: 100vh;
  background-color: black;
  color: white;
}


#myVideo {
  right: 0;
  bottom: 0;
  max-width: 100%; 
  max-height: 100%;
}

/* About me*/
.aboutme {
  color: white;
  height: 100vh;
  width: auto;
}

div.aboutme p{font-size: 3vw;}
div.aboutme a{font-size: 3vw;}


.faceprofilecontainer{
  border-style: solid;
  animation: rgb 3s infinite;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.faceprofile{
  width: 200px;
  height: 200px;
  object-fit: fill;
}

.introduction{
  padding-left:40px;
  max-height: 100vh;
  width: 95%;
  float: left;
  }

div.introduction p{
  font-size: 3vw;
}

#educationtext{
  font-size: 8vw;
}
#SkillsText{
  font-size: 8vw;
}

.bigheaderleft{
  width:40%;
  position: absolute;
  height: 95vh;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  font-size:60px;
  display: none;
  border-style: hidden double hidden hidden;
  }


.half {
  position: relative;
  width: 100%;
  padding-left: 20px;
  float:left;
  border-style: hidden hidden hidden hidden;
}

.row {
  display: flex;
}


.barContainer {
  width: 75%;
  margin: auto;
  padding: 5px;
}

.barContainer:hover .bar {
  animation: slide 2s ease 2s infinite;
}

.barContainer:hover .iconimg {
  animation: pulse 2s infinite;
}


.iconContainer {
  max-width: 50px;
  max-height: 50px;
  margin: 0%;
  padding: 10px;
}

.iconimg {
  width: relative;
  height: 100%;
}


.bar {
  margin-left: 0;
  margin-top: auto;
  margin-bottom: auto;
  height: 5px;
  padding: 10px;
  border-radius: 100px;
  background-color: white;
  border-style: solid;
  border-color: white;
  animation: slide 3s;
}



/* Projects */
.projects {
  height: 100vh;
  font-size: 20px;
}

.projectsleftside{
  border-color: white;
  border-style:hidden hidden double hidden;
  width:95%;
  padding: 0.5%;
  padding-right: 20px;
  
}
div.projectsleftside h1{
  text-align: right;
  color: white;
  font-size: 30px;

}

div.projectsleftside h1:hover{
  color: lightgrey;
}

.projectviewer{
  position: relative;
  width: 55%;
  height: 57%;
  float: right;
  margin-bottom: auto;
  display: none;
}
.projectsubtext{
  float: left;
  color: white;
  opacity: 70%;
  font-style: italic;
  font-size: 4vw;
}

/* PC */
.PCPage{
  height:200vh;
}
.pcbuilding{
  width: 96vw;
  height: 35vh;
  position:static;
  color: white;
  border: color(none);
}

div.pcbuilding a{
  line-height: 0.25em;
  text-align: left;
}
.pcbuildingtext{
  float: left;
  padding: 2%;
  text-align: left;
}
.pcbuilding img{
  height: 25vh;
  width: auto;
  float: left;
}

/* Work */
.work {
  height: 250vh;
  color: white;
}

.workicon{
  border-radius: 50%;
  border: solid;
  animation: rgb 3s infinite;
  overflow: hidden;
  height: 50px;
  width: 50px;
  float: left;
  margin-top: auto;
  margin-bottom: auto;
  
}

div.work p{
    font-size: 3vw;
    width: 45%;
    float: right;
}

div.work a{ 
  font-size: 3.5vw;
  text-align: left;
}

div.work h3{
  line-height: 0.25em;
}

.workleftside{
  width: 40%;
  float: left;
  padding-left: 2%;
}
.AutismBeds{
  width: 98%;
  height: 15vh;
  float: left;
}
.AutismBedsSummer{
  width: 98%;
  height: 15vh;
  float: left;
}
.FOBE{
  width: 98%;
  height: 15vh;
  float: left;
}
.CYCD{
  width: 98%;
  height: 15vh;
  float: left;
}

.JPMORGAN{
  width: 98%;
  height: 15vh;
  float: left;
}

.FUJITSU{
  width: 98%;
  height: 15vh;
  float: left;
}

.worksectionphysical{
  width: 95vw;
  float:left;
  padding-left: 1%;
}
.worksectiondigital{
  width: 95vw;
  height: 50vh;
  float:left;
  padding-left: 1%;
}
/* Contact */
.contact {
  height: 100vh;
}
#contactpageheaderdesktop{
  display: none;
}

.contacticon{
  border-radius: 50%;
  overflow: hidden;
  height: 75px;
  width: 75px;
  border: solid;
  float: left;
  animation: rgb 3s infinite;
}
.contactsection{
  width: 88%;
  border: none;
  padding: 5%;
  text-align: center;
  justify-content: center;
}
/* Other buttons */
.tablink {
  float: right;
  border: none;
  height: 50px;
  width: relative;
  font-size: 30px;
  padding: 10px;
  opacity: 1;
  transition: opacity 1s ease 0s;
}

.tablink:hover {
  opacity: 0.2;
}

  
.socials{
  height: 50px;
  width:50px;
}
.socials:hover {
  animation: pulse 2s ease-in-out;
}

/* Navbar */
.navbar {
  position: absolute;
  right: 0;
  bottom: 0;
}

/* Main text */
.maintext {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

::-webkit-scrollbar {
  width: 10px;

}

::-webkit-scrollbar-track{
  color: transparent;
}

::-webkit-scrollbar-thumb {
  background: white; 
  border-radius: 10px;
}


/* Animations */
.section {
  opacity: 0;
  transition: all 4s;
}


.show {
  opacity: 1;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
 .half{width: 50%;}
 .projectsleftside{width:40%}
 .projectsubtext{font-size: 1.25vw;}
 .bigheaderleft{display: block;}
 .introduction{padding:40px;max-height: 100vh;width: 55%;float:right;}
 div.introduction p{font-size: 1.25vw;color: white;}
 div.aboutme h2{font-size: 2vw;}
 div.aboutme p{font-size: 1.25vw;}
 div.aboutme a{font-size: 1.25vw;}
 div.work h2{font-size: 2vw;}
 div.work h3{font-size: 1.25vw;}
 div.work a{font-size: 1.25vw;}
  #SkillsText{display: none;}
 #educationtext{font-size: 2vw;}
 #SkillsText{font-size: 2vw;}


 .worksectionphysical{width: 48vw;}
 .worksectiondigital{width: 48vw;}
 div.work p{ font-size: 1vw;}
 .work{height: 150vh;}
 .contact{padding-top: 10%;}
 .contactsection{width: 50vw;float: right;padding: 1%;border-left: double;border-color: white;padding-left: 5%;}
 div.contactsection h2{font-size: 2vw;}
 #contactpageheader{display: none;}
 #contactpageheaderdesktop{display: block;}
 .PCPage{height: 100vh;}
 div.PCPage h2{font-size: 2vw;}
 div.PCPage h3{font-size: 1.25vw;}
 .pcrow{display: flex;}
 .pcbuilding{height: 25vh;}
 #BorderRight{border-right: double;color: white;}
}


@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}


@keyframes slide {
  0% {
    width: 0%
  }

  100% {
    width: relative;
  }
}

@keyframes rgb {
  0% {
    border-color: white;
  }

  50% {
    border-color: black;
  }

  100% {
    border-color: white;
  }
}