@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');

header {
	height: 80px;
}

html {
  scroll-behavior: smooth;
  background: url(pastel.gif) no-repeat center fixed; 
  object-fit: cover;
  background-color: #C2D9F9;
 }

 a:-webkit-any-link{
  text-decoration:none !important;
  }


.nav-text{
  color: #005C95;
  font-family: 'Silkscreen', cursive;
  size: 30px;
  text-shadow: 1px 1px #ebe9ec;
  font-size: 1.2rem;
	text-decoration: none;
	margin: 10px;
	padding-right: 1.5rem;
  padding-top: 1.5rem;
	display: inline-block;
}

header img {
  height: 9vw;
}

.nav{
  width: 100%;
  position: fixed;
  float: right;
  top:0;
  display:flex;
  justify-content: space-between;
  padding: 10px 0;
}

h1 {
	font-size: 8rem;
  font-family: 'Silkscreen', cursive;
  color: #3D8DAE;
  text-shadow: 3px 3px #ebe9ec;
}

h2 {
  width: 100%;
  font-family: 'Silkscreen', cursive;
  color:white;
  text-shadow: 3px 3px #157bae;
  font-size: 4rem;
}

h3{
  font-family: 'Silkscreen', cursive;
}

p{
  font-family: 'Silkscreen', cursive;
  padding: 10px;
}

ul{
  font-family: 'Silkscreen', cursive;
  color: #996cde;
  text-shadow: 1px 1px #35084f;
}

#profile-pic{
  height:300px;
  width:300px;
  float: right;
  border-radius: 50%;
  margin-right:100px;
  border:3px solid #fff;
  -moz-box-shadow: 10px 10px 5px #ccc;
  -webkit-box-shadow: 10px 10px 5px #ccc;
  box-shadow: 10px 10px 5px #ccc;
  -moz-border-radius:25px;
  -webkit-border-radius:25px;
  border-radius:25px;
  display:flex;
  justify-content: center;
  align-items: center;
  margin-top: 10%;
}

#header-text{
  width: 60%;
  font-family: 'Silkscreen', cursive;
  font-size:1.2rem;
  padding-left: 35%;
  text-align: right;
  color: #234f74;
  text-shadow: 1px 1px white;
}

#header_big{
  font-family: 'Silkscreen', cursive;
  font-size: 150px;
  color:white;
  text-shadow: 4px 4px #17A0E4;
  margin:0;
  padding-top: 80px;
  padding-left: 30px;
}

.title-word {
  animation: color-animation 2s linear infinite;
}

.title-word-1 {
  --color-1: #DF8453;
  --color-2: #3D8DAE;
  --color-3: #E4A9A8;
}

.title-word-2 {
  --color-1: #DBAD4A;
  --color-2: #ACCFCB;
  --color-3: #17494D;
}

.title-word-3 {
  --color-1: #ACCFCB;
  --color-2: #E4A9A8;
  --color-3: #ACCFCB;
}

.title-word-4 {
  --color-1: #3D8DAE;
  --color-2: #DF8453;
  --color-3: #E4A9A8;
}

@keyframes color-animation {
  0%    {color: var(--color-1)}
  32%   {color: var(--color-1)}
  33%   {color: var(--color-2)}
  65%   {color: var(--color-2)}
  66%   {color: var(--color-3)}
  99%   {color: var(--color-3)}
  100%  {color: var(--color-1)}
}

.title {
  font-family: "Montserrat", sans-serif;
  font-size: 6vw;
  text-transform: uppercase;
  text-align: center;
}

#aboutme1{
  padding-top: 40px;
  margin:0;
}

#aboutme2{
  padding-top: 10px;
  margin:0;
}

#about-me{
  padding-left:8%;
  font-family: 'Silkscreen', cursive;
  padding-top: 40px;
}

#aboutmepara1{
  padding-top: 20px;
}

#aboutmepara2{
  padding-bottom: -10px;
}

li{
  font-family: 'Silkscreen', cursive;
  font-size: 1.3rem;
  margin-left: 30px;
}

  li:nth-child(1) {
    color: #3D8DAE;
  }
  li:nth-child(2) {
    color: #509460;
  }
  li:nth-child(3) {
    color: #DF8453;
  }
  li:nth-child(4) {
    color: #c68281;
  }
  li:nth-child(5) {
    color:#bb6596;
  }
  li:nth-child(6) {
    color: #a858b5;
  }

ul li { 
  padding: 4px 4px; 
  margin:0;
}

.arrow{
  display: flex;
  justify-content: center;
  align-content: center;
  width:100%;
}

.arrow img{
  width:90px;
  justify-content: center;
  align-items: center;
}

.cmh-word{
  animation: color-animation 2s linear infinite;
}

.cmh{
  font-family: "Montserrat", sans-serif;
  font-size: 5vw;
  text-transform: uppercase;
  text-align: center;
}

.cmh-1 {
  --color-1: #DF8453;
  --color-2: #3D8DAE;
  --color-3: #E4A9A8;
}

.cmh-2 {
  --color-1: #ACCFCB;
  --color-2: #E4A9A8;
  --color-3: #ACCFCB;
}

@keyframes color-animation {
  0%    {color: var(--color-1)}
  32%   {color: var(--color-1)}
  33%   {color: var(--color-2)}
  65%   {color: var(--color-2)}
  66%   {color: var(--color-3)}
  99%   {color: var(--color-3)}
  100%  {color: var(--color-1)}
}


form {
  margin: 30px auto;
  width: 90%;
}

.form-item input:hover,
.form-item textarea:hover {
    border: 2px solid #3846bd;
}
.form-item input,
.form-item textarea {
    width: 30em;
    height:30%;
  }

.input-name{
  font-family: 'Silkscreen', cursive;
  font-size: larger;
  color: #005C95;
  text-shadow: 1px 1px white;
}

.form-item{
  margin:30px;
  text-align: center;
  padding: 5px;
}

.form-item input,
.form-item textarea,
.form-item button {
    border: 2px solid #7e8ff1;
    background-color: rgb(241, 248, 252);
    padding: 10px;
    font-size: 18px;
    flex-basis: 50%;
}

.form-item input,
.form-item textarea{
  width:40vw;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.form-item button {
  height:40px;
  width:130px;
  border: 2px solid #4262c3;
  background-color: #6a88e9;
  padding: 10px;
  font-size: 18px;
  flex-basis: 50%;
}

.form-item button:hover {
    border: 2px solid #7c93d8;
    background-color: rgb(107, 191, 239);
    color: #FFF;
}

#submitbutton{
  font-family: 'Silkscreen', cursive;
  font-size: 1.5rem;
  text-align: center;
  padding: 0px;
  color: #ffffff;
}

#submitbutton:hover{
  color: white;
}

.socialmedia{
  width:70px;
  height:70px;
  display:inline-block;
}

footer{
  align-items: center;
  justify-content: center;
  /* width:100%; */
  padding-left: 45%;
  padding-bottom: 40px;
  padding-top: 0px;
}

@font-face {
  font-family: Clip;
  src: url("https://acupoftee.github.io/fonts/Clip.ttf");
}

.sign {
  font-family: "Clip";
  text-transform: uppercase;
  font-size: 6em;
  color: #ffe6ff;
  text-align: center;
  text-shadow: 0 0 0.6rem #e6f0ff, 0 0 1.5rem #6589ff,
  -0.2rem 0.1rem 1rem #656dff, 0.2rem 0.1rem 1rem #656aff,
  0 -0.5rem 2rem #6652c7, 0 0.5rem 3rem #2b24ff;
}

#projectheading{
  background-image: radial-gradient(
    ellipse 50% 35% at 50% 50%,
    #2d328b,
    transparent
  );
  margin:40px;
}

@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #e6f0ff, 0 0 1.5rem #6589ff,
    -0.2rem 0.1rem 1rem #656dff, 0.2rem 0.1rem 1rem #656aff,
    0 -0.5rem 2rem #6a52e2, 0 0.5rem 3rem #4944c4;
  }
  28%,
  33% {
    color: #6f65ff;
    text-shadow: none;
  }
  82%,
  97% {
    color: #243aff;
    text-shadow: none;
  }
}

.flicker {
  animation: shine 2s forwards, blink 3s 2s infinite;
}

.fast-flicker {
  animation: shine 2s forwards, blink 10s 1s infinite;
}

@keyframes shine {
  0% {
    color: #18206b;
    text-shadow: none;
  }
  100% {
    color: #e6eeff;
    text-shadow: 0 0 0.6rem #e6f0ff, 0 0 1.5rem #6589ff,
      -0.2rem 0.1rem 1rem #656dff, 0.2rem 0.1rem 1rem #656aff,
      0 -0.5rem 2rem #4824ff, 0 0.5rem 3rem #2b24ff;
  }
}

@keyframes flicker {
  from {
    opacity: 1;
  }

  4% {
    opacity: 0.9;
  }

  6% {
    opacity: 0.85;
  }

  8% {
    opacity: 0.95;
  }

  10% {
    opacity: 0.9;
  }

  11% {
    opacity: 0.922;
  }

  12% {
    opacity: 0.9;
  }

  14% {
    opacity: 0.95;
  }

  16% {
    opacity: 0.98;
  }

  17% {
    opacity: 0.9;
  }

  19% {
    opacity: 0.93;
  }

  20% {
    opacity: 0.99;
  }

  24% {
    opacity: 1;
  }

  26% {
    opacity: 0.94;
  }

  28% {
    opacity: 0.98;
  }

  37% {
    opacity: 0.93;
  }

  38% {
    opacity: 0.5;
  }

  39% {
    opacity: 0.96;
  }

  42% {
    opacity: 1;
  }

  44% {
    opacity: 0.97;
  }

  46% {
    opacity: 0.94;
  }

  56% {
    opacity: 0.9;
  }

  58% {
    opacity: 0.9;
  }

  60% {
    opacity: 0.99;
  }

  68% {
    opacity: 1;
  }

  70% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.95;
  }

  93% {
    opacity: 0.93;
  }

  95% {
    opacity: 0.95;
  }

  97% {
    opacity: 0.93;
  }

  to {
    opacity: 1;
  }
}

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

.projects a{
  font-family: 'Silkscreen', cursive;
  color:rgb(155, 51, 122);
  text-shadow: 1px 1px #efefef;
  font-size: 1.3rem;
}

.project-image{
  height:auto;
  width:100%;
  object-fit:contain;
  border-radius: 50%;
  border:3px solid #fff;
  -moz-box-shadow: 10px 10px 5px #ccc;
  -webkit-box-shadow: 10px 10px 5px #ccc;
  box-shadow: 10px 10px 5px #ccc;
  -moz-border-radius:25px;
  -webkit-border-radius:25px;
  border-radius:25px;
}

.project{
  width: 30%;
  font-family: "Montserrat", sans-serif;
  color: #005C95;
  font-size: smaller;
  text-align: center;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  margin: 40px;
}

.projecttext{
  padding-top:5%;
}



@media (max-width: 850px) {
  html{background: url(pastel.gif) center fixed; 
    object-fit:cover;
    }

  #arrow-icon2{
      display:none;
  }
  #arrow-icon{
    display:none;
  }
  .nav{
    position: relative;
    margin:0;
  }
  .nav-text{
    font-size: 12px;
    margin:0;
    padding:0;
    flex-wrap: wrap;
    text-align: top;
    display:block;
  }
  
  #header_big{
    font-size: 7rem;
    margin:0;
    padding-top: 80px;
  }

  #header-text{
    flex-wrap: wrap;
    margin:0;
    padding:20px;
    width:90%;
    font-size:0.8rem;
    text-align:justify;
  }
  #logo{
    position: relative;
  }
  #profile-pic{
    height:200px;
    width:200px;
    margin: 0;
  }

  #profilewrapper{
    width:100%;
    display: flex;
    justify-content: center;
  }

  #aboutme1{
    flex-wrap: wrap;
    font-size: 2rem;
    text-align: center;
  }

  #aboutme2{
    flex-wrap: wrap;
    font-size: 2rem;
    text-align: center;
  }

  #about-me{
    padding:10px;
    display:block;
  }

  #title{
    font-size: larger;
  }

li{
  font-size:1.2rem;
}
.form-item input,
.form-item textarea{
  text-align: center;
  align-content: center;
  width:20em;
}

.input-name{
  padding: 0;
  margin:0;
  display: flex;
  justify-content: center;
  align-content: center;
}

#form-item button{
  display: flex;
  justify-content: center;
  align-content: center;
}

.form-item{
  padding:0;
}

.form-item input,
.form-item textarea{
  width:60vw;
}

.cmh{
  font-size: 3rem;
  padding:0;
  margin:0;
}

footer{
  display:flex;
  justify-content: center;
  padding:0;
}

#projectheading{
  font-size: 4rem;
}
}


@media (max-width: 600px) {
  #arrow-icon2{
      display:none;
  }
  #arrow-icon{
    display:none;
  }
  .nav{
    position: relative;
    margin:0;
  }

  .nav-text{
    font-size: 12px;
    margin:0;
    padding:0;
    flex-wrap: wrap;
    text-align: top;
    display:block;
  }

  #header_big{
    font-size: 4rem;
    margin:0;
  }

  #header-text{
    flex-wrap: wrap;
    margin:0;
    padding:20px;
    width:90%;
    font-size:0.8rem;
    text-align:justify;
  }
  #logo{
    position: relative;
  }
  #profile-pic{
    height:200px;
    width:200px;
    margin-top: 0;
    float:center;
  }

  #aboutme1{
    flex-wrap: wrap;
    font-size: 2rem;
    text-align: center;
  }
  #aboutme2{
    flex-wrap: wrap;
    font-size: 2rem;
    text-align: center;
  }

  #title{
    font-size: larger;
  }

  li{
  font-size:1.2rem;
  }

  .form-item input,
  .form-item textarea{
  text-align: center;
  align-content: center;
  display:flex;
  justify-content: center;
  } 

  .form-item input, .form-item textarea{
  width:60vw;
  }

  #container{
    width:100%;
  }

  #submitbutton{
  margin-left:;
  margin:0;
  display: inline;
  } 

  .input-name{
  padding: 0;
  margin:0;
  display: flex;
  justify-content: center;
  align-content: center;
  } 

  #form-item button{
    display: flex;
    justify-content: center;
    align-content: center;
  }

  .form-item{
  padding:0;
  }

  .cmh{
  font-size: 3rem;
  padding:0;
  margin:0;
  }

  footer{
  display:flex;
  justify-content: center;
  padding:0;
  }

#projectheading{
    font-size: 4rem;
    ;
  }

}

@media (min-width: 1351px) {
  html{background: url(pastel.gif) center fixed; 
  object-fit: cover;
  }

@media (max-width: 1350px) {
  #arrow-icon2{
    display:none;
  }
  #arrow-icon{
  display:none;
  }
  
}