@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200&display=swap');
*{

  margin: 0;
  padding: 0;
  overflow: inherit;

}
@font-face {
  font-family: POLYA;
  font-weight: bold;
  src: url(POLYA.otf) format("opentype");
}
body::-webkit-scrollbar {
  display: none;
}
.titleholder img{
  display: flex;
}
h1{
  font-family: "POLYA";
  font-size: 200%;
}
.navbar{
    background-color: #0a192fd9;
    
padding: auto;
    position: fixed !important;
z-index: 100;
width: 100vw;
    font-family: 'Baloo 2', cursive;
}
.nav-link{
    color: white !important; 
    font-size: 1.5rem;
  letter-spacing: 0.2rem;
  margin-right: 1rem;

}

.navbar-brand{
 position: relative;
 top: 1rem;
}

.navbar-toggler  {
    padding: 0.8rem 0.8rem !important;
   
    right: 0.8rem !important;
    
    background-color: #1d56d3 !important;
    backface-visibility: 50%;
    border: 0.063rem solid transparent;
    border-radius: .25rem;
    transition: box-shadow .15s ease-in-out;
    margin-bottom: 0.625rem;
}
.nav-link:hover{
    color:rgb(20, 243, 243) !important;
    
}
.titleholder{
    background-color: #030203;
   text-align: center;
}
.titleholder hr{
    
  
  opacity: 200%;
    color: white;
    border: 0.188rem solid white;
   
  
}
.direction-l .desc, .direction-r .desc {
  position: relative;
  margin: 1em 1em 0 1em;
  padding: 1em;
  z-index: 0 !important;
}
.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 0.375rem;
  height: 100%;
  margin-left: -0.188rem;
  background: rgb(80,80,80);
  background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
  background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  z-index: 0 !important;
}
.flag{
  z-index:0;
  padding: 0 !important;
}
.titleholder .name{

font-weight: bold;
  font-size: 72px;
  border: rgb(96, 228, 35);
  background: -webkit-linear-gradient(rgb(255, 230, 0), rgb(145, 255, 0));
  -webkit-background-clip:text;
  -webkit-text-fill-color: rgb(255, 0, 0) ;
  -webkit-backdrop-filter:drop-shadow(200px);
  -webkit-backdrop-fill-color: rgb(255, 0, 0) ;
padding: 100px;
  font-size: 5.375rem;
padding-top:281px ;
 
}
.titleholder .resume{
  font-size: 5.375rem;
  margin-top: -100px;
}
.titleholder{
  background-color: #ffffff;
  background-image: url("images/biker-minimal-4k-of.jpg");
background-attachment: fixed;

background-repeat:unset;
background-position: 100px;
width: 100vw;
height: 100vh;
  background-size:contain;


}

.titleholder h1 a{
  text-decoration: none;
  color:aliceblue;
}
.titleholder h1 a:hover{
color: cyan;
}
#logo {
position: absolute;
top: 45%;
width:70%;

   overflow: hidden;
    -webkit-transform: translate(-50%, -50%) !important;
            transform: translate(-50%, -50%) !important;
    -webkit-animation: fill 3s ease forwards 7s;
            animation: fill 3s ease forwards 7s;
  }
  
  #resume{
    position:absolute;
    top:60%;
    left:35%;
  }
#logo path:nth-child(1) {
    stroke-dasharray: 535.4569396972656;
    stroke-dashoffset: 535.4569396972656;
    
            animation: line-anim 10s ease forwards !important;
  } 

  @-webkit-keyframes line-anim {
    to {
      stroke-dashoffset: 0;
    }
  }
  
  @keyframes line-anim {
    to {
      stroke-dashoffset: 0;
    }
  }
  
  @-webkit-keyframes fill {
    from {
      fill: transparent;
    }
    to {
      fill: orange;
    }
  }
  
  @keyframes fill {
    from {
      fill: transparent;
    }
    to {
      fill: rgb(250, 137, 30);
    }
  }
  .profile{
    height: 6.25rem;
    margin-top: 8rem;
  }
  .profile h1{
    text-align: center;
    font-size: 3.125rem;
  }
  .profile hr{
    width: 19%;
    margin-left:40.9%;
    fill: grey;
    opacity: 200%;
    color:grey !important;
    border: 0.125rem solid grey;
    
  }
  .aboutme{
    font-size: 1.875rem;
    text-align: center;
  }
  .pfp{
    width: 70%;
    border-radius: 100%;
    border: 0.5rem solid #e4f9f5;
   
  }
  .row{
    margin-left: 10% !important;
    
  }
  .section{
  padding: 5rem;
  }
  .prof-heading{
color: #000000;
font-family: 'Lilita One', cursive;
text-shadow: 0.188rem 0.063rem grey;
font-size: 5rem !important;
  }
  
  .about-me{
    color: #0cb2f3 !important;
    color: #0cb2f3;
font-family: 'Lilita One', cursive;
text-shadow: 0.063rem 0.063rem grey;

  }
  .detail-head{
    color: #0cb2f3 !important;
    color: #0cb2f3;
font-family: 'Lilita One', cursive;
text-shadow: 0.063rem 0.063rem grey;
font-size: 3rem;
  }
  .detail-text{
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.5rem;
    text-shadow: 0.063rem 0.063rem gray;
  }
  .skills{
    background-color: #000000;

background-attachment:scroll;
background-size: contain;
padding: 10rem;
backdrop-filter: blur(100px);
  }
  .skills h1{
    color: white;
  }
  .skills hr{
    width: 19%;
    margin-left:40.9%;
    fill: grey;
    opacity: 200%;
    color:grey !important;
    border: 0.125rem solid grey; 
  }
  .skills .row{

margin-top: 6.25rem;
  }
  .skill svg{
    size: 50%;
  }
  .skills h1{
    color: #da0505 !important;
  
font-family: 'Lilita One', cursive;
text-shadow: 0.063rem 0.063rem rgb(0, 0, 0);
font-size: 5rem;
  }
  .myed{
    padding: 5rem;
  }
  .myed h1{
    color: #000000;
font-family: 'Lilita One', cursive;
text-shadow: 0.188rem 0.063rem rgb(59, 56, 56);
font-size: 5rem !important;
  }

  .ftco-section {
    padding: 8em 0;
    position: relative;
    width: 100%;
    overflow-x: hidden;
}
.school b{
  text-decoration: none;
  color: lightseagreen;
}
.card {
  background: #fff;
  border-radius: 0.125rem;
  display: inline-block;
  height: 31.25rem;
  margin: 1rem;
  position: relative;
  width: 43.75rem;
}

.edhead{
  color: #000000;
  font-family: 'Lilita One', cursive;
  text-shadow: 0.188rem 0.063rem black;
  display: contents;
  font-size: 2.5rem !important;
}
.edtext{
  font-family: 'Josefin Sans', sans-serif;
}

.timeline {
  position: relative;
  width: 41.25rem;
  margin: 0 auto;
  margin-top: 1.25rem;
  padding: 1em 0;

  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 0.375rem;
  height: 100%;
  margin-left: -0.188rem;
  background: rgb(80,80,80);
  background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
  background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  
  z-index: 5;
}

.timeline li {
  padding: 1em 0;
}

.timeline li:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.direction-l {
  position: relative;
  width: 18.75rem;
  float: left;
  text-align: right;
}

.direction-r {
  position: relative;
  width: 18.75rem;
  float: right;
}

.flag-wrapper {
  position: relative;
  display: inline-block;
  
  text-align: center;
}

.flag {
  position: relative;
  display: inline;
  background: rgb(248,248,248);
  padding:  0.625rem;
  border-radius: 0.313rem;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  text-align: left;
}

.direction-l .flag {
  -webkit-box-shadow: -0.063rem 0.063rem 0.063rem rgba(0,0,0,0.15), 0 0 0.063rem rgba(0,0,0,0.15);
  -moz-box-shadow: -0.063rem 0.063rem 0.063rem rgba(0,0,0,0.15), 0 0 0.063rem rgba(0,0,0,0.15);
  box-shadow: -0.063rem 0.063rem 0.063rem rgba(0,0,0,0.15), 0 0 0.063rem rgba(0,0,0,0.15);
}

.direction-r .flag {
  -webkit-box-shadow: 0.063rem 0.063rem 0.063rem rgba(0,0,0,0.15), 0 0 0.063rem rgba(0,0,0,0.15);
  -moz-box-shadow: 0.063rem 0.063rem 0.063rem rgba(0,0,0,0.15), 0 0 0.063rem rgba(0,0,0,0.15);
  box-shadow: 0.063rem 0.063rem 0.063rem rgba(0,0,0,0.15), 0 0 0.063rem rgba(0,0,0,0.15);
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: 50%;
  right: -2.5rem;
  content: ' ';
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: -0.625rem;
  background: #fff;
  border-radius: 0.625rem;
  border: 0.25rem solid rgb(233, 8, 165);
  z-index: 10;
}

.direction-r .flag:before {
  left: -2.5rem;
}

.direction-l .flag:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -0.5rem;
  border: solid transparent;
  border-left-color: rgb(248,248,248);
  border-width: 0.5rem;
  pointer-events: none;
}

.direction-r .flag:after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -0.5rem;
  border: solid transparent;
  border-right-color: rgb(248,248,248);
  border-width: 0.5rem;
  pointer-events: none;
}

.time-wrapper {
  display: inline;
  
  line-height: 1em;
  font-size: 0.66666em;
  color: rgb(250,80,80);
  vertical-align: middle;
}

.direction-l .time-wrapper {
  float: left;
}

.direction-r .time-wrapper {
  float: right;
}

.time {
  display: inline-block;
  padding: 0.25rem 0.375rem;
  font-family: 'Josefin Sans', sans-serif;
  background: rgb(248,248,248);
}

.desc {
  margin: 1em 0.75em 0 0;
  font-family: 'Josefin Sans', sans-serif;

  font-size: 0.77777em;
  font-style: italic;
  line-height: 1.5em;
}

.direction-r .desc {
  margin: 1em 0 0 0.75em;
}

/* ================ Timeline Media Queries ================ */

@media screen and (max-width: 767px) {

.timeline {
 	width: 100%;
	padding: 4em 0 1em 0;
}

.timeline li {
	padding: 2em 0;
}

.direction-l,
.direction-r {
	float: none;
	width: 100%;

	text-align: center;
}

.flag-wrapper {
	text-align: center;
}

.flag {
	background: rgb(255,255,255);
	z-index: 15;
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: -1.875rem;
	left: 50%;
	content: ' ';
	display: block;
	width: 0.75rem;
	height: 0.75rem;
	margin-left: -0.563rem;
	background: #fff;
	border-radius: 0.625rem;
	border: 0.25rem solid rgb(255,80,80);
	z-index: 10;
}

.direction-l .flag:after,
.direction-r .flag:after {
	content: "";
	position: absolute;
	left: 50%;
	top: -0.5rem;
	height: 0;
	width: 0;
	margin-left: -0.5rem;
	border: solid transparent;
	border-bottom-color: rgb(255,255,255);
	border-width: -0.5rem;
	pointer-events: none;
}

.school b{
  text-decoration: none;
  color: lightseagreen;
}
.time-wrapper {
	display: block;
	position: relative;
	margin: 0.25rem 0 0 0;
	z-index: 14;
}

.direction-l .time-wrapper {
	float: none;
}

.direction-r .time-wrapper {
	float: none;
}

.desc {
	position: relative;
	margin: 1em 0 0 0;
	padding: 1em;
	background: rgb(245,245,245);
	-webkit-box-shadow: 0 0 0.063rem rgba(0,0,0,0.20);
	-moz-box-shadow: 0 0 0.063rem rgba(0,0,0,0.20);
	box-shadow: 0 0 0.063rem rgba(0,0,0,0.20);
	
  z-index: 15;
}

.direction-l .desc,
.direction-r .desc {
	position: relative;
	margin: 1em 1em 0 1em;
	padding: 1em;
	
  z-index: 15;
}

}

@media screen and (min-width: 400px) and (max-width: 660px) {

.direction-l .desc,
.direction-r .desc {
	margin: 1em 4em 0 4em;
}

}
.projects h1{
  color: #000000;
font-family: 'Lilita One', cursive;
text-shadow: 0.188rem 0.063rem grey;
font-size: 5rem !important;
}

.projects {
  margin: 0;
  padding: 6.25rem;
  background: rgb(255, 255, 255);
  
  color: rgb(50,50,50);
  font-family: 'Open Sans', sans-serif;
  font-size: 112.5%;
  line-height: 1.6em;
}
.projects li{
  font-size: 140%;
  padding: 1rem;
}

.icons {
  z-index: 999;
  position: fixed;
  top: 40%;
  left: 0%;
  width: 11.25rem;
  display: flex;
  flex-direction: column;
}

.icons a {
  text-decoration: none;
  text-transform: uppercase;
  padding: 1.25rem;
  font-size: 1.188rem;
  font-family: Oswald, sans-serif;
  margin: 0.063rem;
  text-align: right;
  border-radius: 0rem 3.125rem 3.125rem 0rem;
  transform: translate(-7.438rem, 0rem);
  transition: 1s;
}
.linkedin {
  background-color: #0e76a8;
  color: white;
}
.github {
  background-color: black;
  color: white;
}
.instagram {
  background-color: #dd2a7b;
  color: white;
}
.icons i{
font-size: 110%;
}
footer {
  margin-top: 5em !important;
  text-align: center;
  padding: 0rem 5rem 5rem 5rem !important;
  background-color: #000000;
  color: white;
  position: relative;
}
.back-to-top i {
  display: block;
  color: white;
  font-size: 2rem;
  padding: 2rem;
  margin-bottom: 0;
  animation: up 2s infinite;
  text-decoration: none;
}
.footer_title {
  font-size: 1.6em;
  font-weight: 800;
  text-align: left;
}

.footer_content {
  text-align: left;
  text-align: justify;
}
.linkedin2 {
 
  color: #0e76a8;
 
padding: 1em;

}
.github2 {
 
  color: white;
  padding: 1em;
}
.instagram2 {
 padding: 1em;
  color: #dd2a7b;
}
.footer_content{
  font-family: 'Josefin Sans', sans-serif;
  font-size: large;
}
/*fold*/
@media screen and (max-width:340px) and (max-height:700px){
  .titleholder{
  
   background-color: #030203;
  width: 100vw;
  height: 70vh;
 background-size: 350%;
background-position: -400px;
margin-bottom: -100px;
  }
  
  .myed h1 {
    color: #000000;
    font-family: 'Lilita One', cursive;
    text-shadow: 0.188rem 0.063rem rgb(73, 65, 65);
    font-size: 3rem !important;
    letter-spacing: 0.2rem;
    margin-left: -78px !important;
}
.timeline {
 size: 50%;
}
.skillratings h1 {
  font-family: 'Lilita One', cursive !important;
  padding: 2rem;
  text-align: center;
  font-size: 2.8rem !important;
  margin-left: 5rem;
}
.skills {
  background-color: #000000;
 
  background-attachment: fixed;
  background-size: cover;
  backdrop-filter: blur(100px);
  padding: 2rem 0rem 2rem 0rem;
}
.skills i{
  margin: 2rem;
}

.projects h1 {
  color: #000000;
  font-family: 'Lilita One', cursive;
  text-shadow: 0.188rem 0.063rem grey;
  font-size: 3rem !important;
  margin-left: -15px;
}
.projects li {
  font-size: 80%;
  padding: 1rem;
  margin-left: -50px;
}
.resume{
  display: none;

}
.titleholder .name{
  color: rgb(255, 255, 255);
  position:relative;
padding-top: 200px;
margin-left: -100px;
padding-bottom: 15px;
justify-content: center;
  font-size: 3.3rem;

 
}
h3{
 font-size: 0.2rem;
  
}
.icons {
  z-index: 999;
  position: fixed;
  top: 40%;
  left: 0%;
  width: 11.25rem;
  display: none;
  flex-direction: column;
}
.skills i{
  font-size: 700%;
  padding: 13px;
}
.footer_content p{
  margin-left: -70px;
}
.desc {
  margin: 1em 0.75em 0 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.77777em;
  font-style: italic;
  line-height: 2em;
  width: 9rem;
}
.skills h1 {
  color: #da0505 !important;
  font-family: 'Lilita One', cursive;
  text-shadow: 0.063rem 0.063rem rgb(0 0 0);
  font-size: 3rem;
}
.footer_content{
  margin-left: -30px;
}

.profile h1 {
 font-size: 2.8rem !important;
 margin-left: -1rem;
}
.aboutme{
  font-size: 1.2rem;
  margin-left:-1rem ;
}

.detail-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.2rem;
  text-shadow: 0.063rem 0.063rem grey;
}
.detail-head{
  font-size: 2.2rem;
}
.time{
  z-index: 0 !important;
}
.flag{
  z-index: 0;
}
.githubrepo{
  font-size: 1.2rem;
}
}
/*surface duo */
@media screen and (min-width:530px ) and (max-width:700px){
  .titleholder{
  
   background-color: #030203;
  width: 100vw;
  height: 100vh;
 background-size: 150%;
background-position: -400px;
margin-bottom: -100px;

  }
  .titleholder name{
  font-size: 5rem;
  }
  
  .myed h1 {
    color: #000000;
    font-family: 'Lilita One', cursive;
    text-shadow: 0.188rem 0.063rem rgb(73, 65, 65);
    font-size: 3rem !important;
    letter-spacing: 0.2rem;
    margin-left: -78px !important;
}
.timeline {
 size: 50%;
}
.skillratings h1 {
  font-family: 'Lilita One', cursive !important;
  padding: 2rem;
  text-align: center;
  font-size: 2.8rem !important;
  margin-left: 5rem;
}
.skills {
  background-color: #000000;
  
  background-attachment: fixed;
  background-size: cover;
  backdrop-filter: blur(100px);
  padding: 2rem 0rem 2rem 0rem;
}
.skills i{
  margin: 2rem;
}

.projects h1 {
  color: #000000;
  font-family: 'Lilita One', cursive;
  text-shadow: 0.188rem 0.063rem grey;
  font-size: 3rem !important;
  margin-left: -15px;
}
.projects li {
  font-size: 80%;
  padding: 1rem;
  margin-left: -50px;
}
.titleholder .resume{
 font-size: 2rem;

}
.titleholder .name{
  color: rgb(255, 255, 255);
  position:relative;
padding-top: 200px;
margin-left: -50px;
padding-bottom: 15px;
justify-content: center;
  font-size: 3.8rem;

 
}
h3{
 font-size: 0.2rem;
  
}
.i{
  padding: 50px;
}
.icons {
  z-index: 999;
  position: fixed;
  top: 40%;
  left: 0%;
  width: 11.25rem;
  display: none;
  flex-direction: column;
}
.skills i{
  font-size: 700%;
  padding: 120px;
}
.footer_content p{
  margin-left: -70px;
}
.desc {
  margin: 1em 0.75em 0 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.77777em;
  font-style: italic;
  line-height: 2em;
  width: 9rem;
}
.skills h1 {
  color: #da0505 !important;
  font-family: 'Lilita One', cursive;
  text-shadow: 0.063rem 0.063rem rgb(0 0 0);
  font-size: 3rem;
}
.footer_content{
  margin-left: -30px;
}

.profile h1 {
 font-size: 2.8rem !important;
 margin-left: -1rem;
}
.aboutme{
  font-size: 1.2rem;
  margin-left:-1rem ;
}

.detail-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.2rem;
  text-shadow: 0.063rem 0.063rem grey;
}
.detail-head{
  font-size: 2.2rem;
}
.time{
  z-index: 0 !important;
}
.flag{
  z-index: 0;
}
.githubrepo{
  font-size: 1.2rem;
}
}
/*iphone x*/
@media screen and (min-width:341px) and (max-width:377px){
  .titleholder{
  
   background-color: #030203;
  width: 100vw;
  height: 70vh;
 background-size: 350%;
background-position: -400px;
margin-bottom: -100px;
  }
  
  .myed h1 {
    color: #000000;
    font-family: 'Lilita One', cursive;
    text-shadow: 0.188rem 0.063rem rgb(73, 65, 65);
    font-size: 3rem !important;
    letter-spacing: 0.2rem;
    margin-left: -78px !important;
}
.timeline {
 size: 50%;
}
.skillratings h1 {
  font-family: 'Lilita One', cursive !important;
  padding: 2rem;
  text-align: center;
  font-size: 2.8rem !important;
  margin-left: 5rem;
}
.skills {
  background-color: #000000;
  
  background-attachment: fixed;
  background-size: cover;
  backdrop-filter: blur(100px);
  padding: 2rem 0rem 2rem 0rem;
}
.skills i{
  margin: 2rem;
}

.projects h1 {
  color: #000000;
  font-family: 'Lilita One', cursive;
  text-shadow: 0.188rem 0.063rem grey;
  font-size: 3rem !important;
  margin-left: -15px;
}
.projects li {
  font-size: 80%;
  padding: 1rem;
  margin-left: -50px;
}
.resume{
  display: none;

}
.titleholder .name{
  color: rgb(255, 255, 255);
  position:relative;
padding-top: 200px;
margin-left: -90px;
padding-bottom: 15px;
justify-content: center;
  font-size: 4.3rem;

 
}
h3{
 font-size: 0.2rem;
  
}
.icons {
  z-index: 999;
  position: fixed;
  top: 40%;
  left: 0%;
  width: 11.25rem;
  display: none;
  flex-direction: column;
}
.skills i{
  font-size: 700%;
  padding: 60px;
}
.footer_content p{
  margin-left: -70px;
}
.desc {
  margin: 1em 0.75em 0 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.77777em;
  font-style: italic;
  line-height: 2em;
  width: 9rem;
}
.skills h1 {
  color: #da0505 !important;
  font-family: 'Lilita One', cursive;
  text-shadow: 0.063rem 0.063rem rgb(0 0 0);
  font-size: 3rem;
}
.footer_content{
  margin-left: -30px;
}

.profile h1 {
 font-size: 2.8rem !important;
 margin-left: -1rem;
}
.aboutme{
  font-size: 1.2rem;
  margin-left:-1rem ;
}

.detail-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.2rem;
  text-shadow: 0.063rem 0.063rem grey;
}
.detail-head{
  font-size: 2.2rem;
}
.time{
  z-index: 0 !important;
}
.flag{
  z-index: 0;
}
.githubrepo{
  font-size: 1.2rem;
}
}
/*iphone 6/7/8*/
@media screen and (min-width:378px) and (max-width:530px){
  .titleholder{
  
  
  width: 100vw;
  height: 70vh;
 background-size: 350%;
background-position: -400px;
margin-bottom: -100px;
  }
  
  .myed h1 {
    color: #000000;
    font-family: 'Lilita One', cursive;
    text-shadow: 0.188rem 0.063rem rgb(73, 65, 65);
    font-size: 3rem !important;
    letter-spacing: 0.2rem;
    margin-left: -78px !important;
}
.timeline {
 size: 50%;
}
.skillratings h1 {
  font-family: 'Lilita One', cursive !important;
  padding: 2rem;
  text-align: center;
  font-size: 2.8rem !important;
  margin-left: 5rem;
}
.skills {
  background-color: #000000;
  background-image: none;
  background-attachment: fixed;
  background-size: cover;
  backdrop-filter: blur(100px);
  padding: 2rem 0rem 2rem 0rem;
}
.skills i{
  margin: 2rem;
}

.projects h1 {
  color: #000000;
  font-family: 'Lilita One', cursive;
  text-shadow: 0.188rem 0.063rem grey;
  font-size: 3rem !important;
  margin-left: -15px;
}
.projects li {
  font-size: 80%;
  padding: 1rem;
  margin-left: -50px;
}
.resume{
  display: none;

}
.titleholder .name{
  color: rgb(255, 255, 255);
  position:relative;
padding-top: 200px;
margin-left: -90px;
padding-bottom: 15px;
justify-content: center;
  font-size: 4.8rem;

 
}
h3{
 font-size: 0.2rem;
  
}
.icons {
  z-index: 999;
  position: fixed;
  top: 40%;
  left: 0%;
  width: 11.25rem;
  display: none;
  flex-direction: column;
}
.skills i{
  font-size: 700%;
  padding: 70px;
}
.footer_content p{
  margin-left: -70px;
}
.desc {
  margin: 1em 0.75em 0 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.77777em;
  font-style: italic;
  line-height: 2em;
  width: 9rem;
}
.skills h1 {
  color: #da0505 !important;
  font-family: 'Lilita One', cursive;
  text-shadow: 0.063rem 0.063rem rgb(0 0 0);
  font-size: 3rem;
}
.footer_content{
  margin-left: -30px;
}

.profile h1 {
 font-size: 2.8rem !important;
 margin-left: -1rem;
}
.aboutme{
  font-size: 1.2rem;
  margin-left:-1rem ;
}

.detail-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.2rem;
  text-shadow: 0.063rem 0.063rem grey;
}
.detail-head{
  font-size: 2.2rem;
}
.time{
  z-index: 0 !important;
}
.flag{
  z-index: 0;
}
.githubrepo{
  font-size: 1.2rem;
}
}
/*iphone 6/7/8*/
@media screen and (min-width:319px) and (max-width:321px){
  .titleholder{
  
   background-color: #030203;
  width: 100vw;
  height: 70vh;
 background-size: 350%;
background-position: -400px;
margin-bottom: -100px;
  }
  
  .myed h1 {
    color: #000000;
    font-family: 'Lilita One', cursive;
    text-shadow: 0.188rem 0.063rem rgb(73, 65, 65);
    font-size: 3rem !important;
    letter-spacing: 0.2rem;
    margin-left: -78px !important;
}
.timeline {
 size: 50%;
}
.skillratings h1 {
  font-family: 'Lilita One', cursive !important;
  padding: 2rem;
  text-align: center;
  font-size: 2.8rem !important;
  margin-left: 5rem;
}
.skills {
  background-color: #000000;
 
  background-attachment: fixed;
  background-size: cover;
  backdrop-filter: blur(100px);
  padding: 2rem 0rem 2rem 0rem;
}
.skills i{
  margin: 2rem;
}

.projects h1 {
  color: #000000;
  font-family: 'Lilita One', cursive;
  text-shadow: 0.188rem 0.063rem grey;
  font-size: 3rem !important;
  margin-left: -15px;
}
.projects li {
  font-size: 80%;
  padding: 1rem;
  margin-left: -50px;
}
.resume{
  display: none;

}
.titleholder .name{
  color: rgb(255, 255, 255);
  position:relative;
padding-top: 200px;
margin-left: -90px;
padding-bottom: 15px;
justify-content: center;
  font-size: 3.5rem;

 
}
h3{
 font-size: 0.2rem;
  
}
.icons {
  z-index: 999;
  position: fixed;
  top: 40%;
  left: 0%;
  width: 11.25rem;
  display: none;
  flex-direction: column;
}
.skills i{
  font-size: 700%;
  padding: 10px;
}
.footer_content p{
  margin-left: -70px;
}
.desc {
  margin: 1em 0.75em 0 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.77777em;
  font-style: italic;
  line-height: 2em;
  width: 9rem;
}
.skills h1 {
  color: #da0505 !important;
  font-family: 'Lilita One', cursive;
  text-shadow: 0.063rem 0.063rem rgb(0 0 0);
  font-size: 3rem;
}
.footer_content{
  margin-left: -30px;
}

.profile h1 {
 font-size: 2.8rem !important;
 margin-left: -1rem;
}
.aboutme{
  font-size: 1.2rem;
  margin-left:-1rem ;
}

.detail-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.2rem;
  text-shadow: 0.063rem 0.063rem grey;
}
.detail-head{
  font-size: 2.2rem;
}
.time{
  z-index: 0 !important;
}
.flag{
  z-index: 0;
}
.githubrepo{
  font-size: 1.2rem;
}
}



@media screen and (min-width:701px ) and (max-width:1000px){
  .titleholder{
  
   background-color: #030203;
  width: 100vw;
  height: 100vh;
 background-size: 120%;
background-position: -400px;
margin-bottom: -100px;

  }
  .titleholder name{
  font-size: 5rem;
  }
  
  .myed h1 {
    color: #000000;
    font-family: 'Lilita One', cursive;
    text-shadow: 0.188rem 0.063rem rgb(73, 65, 65);
    font-size: 3rem !important;
    letter-spacing: 0.2rem;
    margin-left: -78px !important;
}
.timeline {
 size: 50%;
}
.skillratings h1 {
  font-family: 'Lilita One', cursive !important;
  padding: 2rem;
  text-align: center;
  font-size: 2.8rem !important;
  margin-left: 5rem;
}
.skills {
  background-color: #000000;

  background-attachment: fixed;
  background-size: cover;
  backdrop-filter: blur(100px);
  padding: 2rem 0rem 2rem 0rem;
}
.skills i{
  margin: 2rem;
}

.projects h1 {
  color: #000000;
  font-family: 'Lilita One', cursive;
  text-shadow: 0.188rem 0.063rem grey;
  font-size: 3rem !important;
  margin-left: -15px;
}
.projects li {
  font-size: 80%;
  padding: 1rem;
  margin-left: -50px;
}
.titleholder .resume{
  font-size: 4rem;
}
.titleholder .name{
  color: rgb(255, 255, 255);
  position:relative;
padding-top: 300px;
margin-left: -30px;
padding-bottom: 15px;
justify-content: center;
  font-size: 4.3rem;

 
}
h3{
 font-size: 0.2rem;
  
}
.i{
  padding: 50px;
}
.icons {
  z-index: 999;
  position: fixed;
  top: 40%;
  left: 0%;
  width: 11.25rem;
  display: none;
  flex-direction: column;
}
.skills i{
  font-size: 700%;
  padding: 120px;
}
.footer_content p{
  margin-left: -70px;
}
.desc {
  margin: 1em 0.75em 0 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.77777em;
  font-style: italic;
  line-height: 2em;
  width: 9rem;
}
.skills h1 {
  color: #da0505 !important;
  font-family: 'Lilita One', cursive;
  text-shadow: 0.063rem 0.063rem rgb(0 0 0);
  font-size: 3rem;
}
.footer_content{
  margin-left: -30px;
}

.profile h1 {
 font-size: 2.8rem !important;
 margin-left: -1rem;
}
.aboutme{
  font-size: 1.2rem;
  margin-left:-1rem ;
}

.detail-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.2rem;
  text-shadow: 0.063rem 0.063rem grey;
}
.detail-head{
  font-size: 2.2rem;
}
.time{
  z-index: 0 !important;
}
.flag{
  z-index: 0;
}
.githubrepo{
  font-size: 1.2rem;
}
}
@media screen and (min-width:1001px ) and (max-width:1199px){
  .titleholder{
  
   background-color: #030203;
  width: 100vw;
  height: 100vh;
 background-size: 120%;
background-position: -400px;
margin-bottom: -100px;

  }
  .titleholder name{
  font-size: 5rem;
  }
  #logo{
    width: 95%;
position: absolute;  
top: 46%;
  }
  
  .myed h1 {
    color: #000000;
    font-family: 'Lilita One', cursive;
    text-shadow: 0.188rem 0.063rem rgb(73, 65, 65);
    font-size: 3rem !important;
    letter-spacing: 0.2rem;
    margin-left: -78px !important;
}
.timeline {
 size: 50%;
}
.skillratings h1 {
  font-family: 'Lilita One', cursive !important;
  padding: 2rem;
  text-align: center;
  font-size: 2.8rem !important;
  margin-left: 5rem;
}
.skills {
  background-color: #000000;

  background-attachment: fixed;
  background-size: cover;
  backdrop-filter: blur(100px);
  padding: 2rem 0rem 2rem 0rem;
}
.skills i{
  margin: 2rem;
}

.projects h1 {
  color: #000000;
  font-family: 'Lilita One', cursive;
  text-shadow: 0.188rem 0.063rem grey;
  font-size: 3rem !important;
  margin-left: -15px;
}
.projects li {
  font-size: 80%;
  padding: 1rem;
  margin-left: -50px;
}
.titleholder .resume{
  font-size: 4rem;
}
.titleholder .name{
  color: rgb(255, 255, 255);
  position:relative;
padding-top: 300px;
margin-left: -30px;
padding-bottom: 15px;
justify-content: center;
  font-size: 4.3rem;

 
}
h3{
 font-size: 0.2rem;
  
}
.i{
  padding: 50px;
}
.icons {
  z-index: 999;
  position: fixed;
  top: 40%;
  left: 0%;
  width: 11.25rem;
  display: none;
  flex-direction: column;
}
.skills i{
  font-size: 700%;
  padding: 120px;
}
.footer_content p{
  margin-left: -70px;
}
.desc {
  margin: 1em 0.75em 0 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.77777em;
  font-style: italic;
  line-height: 2em;
  width: 9rem;
}
.skills h1 {
  color: #da0505 !important;
  font-family: 'Lilita One', cursive;
  text-shadow: 0.063rem 0.063rem rgb(0 0 0);
  font-size: 3rem;
}
.footer_content{
  margin-left: -30px;
}

.profile h1 {
 font-size: 2.8rem !important;
 margin-left: -1rem;
}
.aboutme{
  font-size: 1.2rem;
  margin-left:-1rem ;
}

.detail-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.2rem;
  text-shadow: 0.063rem 0.063rem grey;
}
.detail-head{
  font-size: 2.2rem;
}
.time{
  z-index: 0 !important;
}
.flag{
  z-index: 0;
}
.githubrepo{
  font-size: 1.2rem;
}
}
@media screen and (max-width:568px){
  h1{
    size:50%;
  }
}
@media screen and (max-width:1000px) {
  #logo {
    position: absolute;
    top: 40%;
    width:87%;
  }
}