::-webkit-scrollbar {
display: none;
}

/*Color theme: #29585C #416A71 #668591 #8AA0B0 #AEBBD0 #667a85 #999eaf #a9b3b4*/

@import url("//use.fontawesome.com/releases/v5.15.3/css/all.css");

/*Transitions for slides inside profile and projects*/
@keyframes slideIn {
  0% {
    transform: translateX(500px) scale(.2);
  }
  100% {
    transform: translateX(0px) scale(1);
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(400px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes expand {
  0% {
    transform: translateX(1400px);
  }
  100% {
    transform: translateX(0px);
  }
}

.center {
    text-align: center;
}

/*INDEX*/
/*Header which serves as link to navigate back to homepage*/
a.index {
    text-decoration: none;
    color: #416A71;
    font-size: 50px;
}

table {
    margin-left: auto;
    margin-right: auto;
}

/*Standardized fonts*/
body {
    font-family: "courier new", monospace;
}

h2 {
    font-size: 20px;
}

td.links {
    padding: 10px;
}

/*Links used to navigate through webpage*/
a.nav {
    color: black;
}

a.nav:hover {
    text-decoration: none;
    color: #667a85;
}

/*For ambient coding image*/
img {
    padding-bottom: 20px;
}

/*PROFILE*/
/*Sliding Transition*/
:root {
  --secondary-color: #AEBBD0;
  --contrast-color: #416A71;
  --contrast-color2: #668591;
}

/*Style for the elements within the sliding transitions*/
.container{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: max(30vw,200px);
  width: 90%;
  overflow: hidden;
  color: white;
  animation: expand .8s ease forwards;
  background-color: var(--contrast-color);
  font-family: "courier new", monospace;
  transition: all .8s ease;
}

.off {
  background-color: var(--contrast-color2);
}

.container_content_description {
  display:flex;
  flex-direction: column;
  justify-content:center;
  height: 90%;
  width: 40%;
  border-radius: 15px;
}

.title{
    font-size: 2vw;
    color: #AEBBD0;
    margin-bottom: 20px;
    transform: translateY(100px);
    animation: slideUp .8s ease forwards .5s;
}

.hide_title {
  height: auto;
}

.p {
  text-align: center;
  width:90%;
  margin-left: auto;
  margin-right: auto;
  font-size: 1vw;
}

.hide_p {
  overflow: scroll;
  scrollbar-width: none;
  height: 80%;
}
.container_content_img {
  margin: 10px;
  height:90%;
  width: 60%;
  overflow: hidden;
}

.container_img {
  width: 100%;
  animation: slideIn 1.5s ease-in-out forwards;
}

.container_content_mp4 {
  margin: 50px;
  width: 60%;
}

/*Scroll Snap*/
.parent {
  height: max(35vw, 300px);
  width: 80%;
  scroll-snap-type: y mandatory;
  margin-left: auto;
  margin-right: auto;
  overflow-y: scroll;
  overflow-x: hidden;
}

.snap{
  height: max(35vw, 300px);
  text-align: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
	display: flex;
  flex-flow: column;
  justify-content: center;
}

/*Line breaker*/
.solid {
  border-top: 1px solid #8AA0B0;
  margin-right: 15%;
  margin-left: 15%;
}

/*Social media styles*/
.media_box {
  display: flex; 
  flex-direction: row; 
  justify-content: space-evenly; 
  width: 40%; 
  margin-left: auto; 
  margin-right: auto;
}

a.media {
    font-size: 3vw;
    color: #416A71;
    transition: .5s;
}

a.media:hover {
    text-decoration: none;
    font-size: 4vw;
    color: #8AA0B0;
    transition: .5s;
}