@font-face {
  font-family: 'wavehaus';
  src: url('../fonts/Wavehaus-158ExtraBold.ttf'); 
}

@font-face {
  font-family: 'kenfolg';
  src: url('../fonts/MADEKenfolgv2.ttf');
}

/*! HTML5 Boilerplate v7.1.0 | MIT License | https://html5boilerplate.com/ */

 
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   html {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--hr-color);
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}



*,
*::after,
*::before {
  box-sizing: border-box;
}








body {
  overscroll-behavior: none;
  color:var(--text-color);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  padding: 20px;
  background-color: var(--body-bg-color);
}



body::before {
  background: radial-gradient( #161E1A, #121C20, #1B191F,#4D288A);
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 400% 400%;
  position:absolute;
  animation: bg-gradient 10s ease infinite;
  transition: all 1.5s cubic-bezier(.02, .01, .47, 1);
  opacity:var(--bg-gradient);
  position:fixed;
}


@keyframes bg-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


.padding-wpr{
  position: relative;
  max-width: 1700px;
  margin: 0 auto;
  overflow: hidden;
}

h1{
  font-family: 'wavehaus';
  font-size: 30px;
  line-height: 32px;
  text-align: center;
  margin-bottom: 40px;
  margin-top: 100px;
}

h2{
  font-family: 'wavehaus';
  font-size: 26px;
  line-height: 26px;
  margin-bottom: 20px;
}


p{
  line-height: 20px;
}



#email-button{
  position: fixed;
  width: 51px;
  height: 51px;
  background: #FFFFFF;
  box-shadow: 0 5px 15px 0 rgba(0,0,0,0.08);
  top: 40px;
  right: 40px;
  z-index: 40;
  border-radius: 100%;
  transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.3s;
}



#email-button img, #home-button img{
  width: 23px;
  height: 19px;
  margin: 16px 14px;
}

#email-button a, #home-button a{
  width: 100%;
  height: 100%;
  display: block;
}

#email-button label{
  cursor:pointer;
}


#home-button{
  position: fixed;
  width: 51px;
  height: 51px;
  background: #FFFFFF;
  box-shadow: 0 5px 15px 0 rgba(0,0,0,0.08);
  top: 40px;
  left: 40px;
  z-index: 40;
  border-radius: 100%;
  transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.3s;
}

#dark-mode-btn{
  position: fixed;
  width: 51px;
  height: 51px;
  background: white;
  box-shadow: 0 5px 15px 0 rgba(0,0,0,0.08);
  top: 110px;
  right: 40px;
  z-index: 40;
  border-radius: 100%;
  transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.3s;
  cursor: pointer;
}







.retina{
  transform: scale(0.5, 0.5);
}



.header-bg{
  height: 300px;
  width: 100%;
  background-size: cover;
  background-position: center center;
}

.header-bg img{
  -webkit-filter: drop-shadow(0px 22px 20px rgba(36,36,36,0.24));
  display: block;
  position: absolute;
  top: 226px;
  left: 0;
  right: 0;
  margin: auto;
}

.work-2-bg img{
  top: 260px;
  width: 270px;
}

.work-4-bg img{
  top:226px;
  width: 136px;
}

.work-1{
  background-image: url("../img/work/work-1/background.jpg");
  background-clip: padding-box;
}


.banner{
  width: 100%;
  color:var(--banner-text-color);
  display: block;
  margin:0 auto;
  padding: 110px 30px 50px 30px;
}

.work-1-banner{
  background-image: url("../img/work/work-1/banner.svg");
  background-clip: padding-box;
  float: left;
  background-size: cover;
  background-position: center center;
}

.work-2-banner{
  background-image: url("../img/work/work-2/banner.svg");
  background-clip: padding-box;
  float: left;
}

.work-3-banner{
  background-image: url("../img/work/work-3/banner.svg");
  background-clip: padding-box;
  float: left;
}

.work-4-banner{
  background-image: url("../img/work/work-4/banner.svg");
  background-clip: padding-box;
  float: left;
}

.work-5-banner{
  background-image: url("../img/work/work-5/banner.svg");
  background-clip: padding-box;
  float: left;
}



.banner p{
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  font: 18px/24px 'Inter',sans-serif;
  font-weight: 200;
  opacity: .8;
}

.banner-left{
  max-width: 600px;
  margin: 30px auto;
  border-left: 4px solid white;
}

.banner-right{
  max-width: 600px;
  margin: 30px auto;
  border-left: 4px solid white;
}

.banner h1{
  margin-top: 0;
}

.banner h2{
  margin: 0 0 20px 22px;
}

.banner ul{
  margin-bottom: 0;
}

.banner li{
  opacity: .8;
  line-height: 27px;
}




.work-content{
  float: left;
  width: 100%;
  text-align: center;
}

.work-content p{
  max-width: 700px;
  margin:0 auto 100px auto;
  text-align: center;
  font:  20px/28px 'Inter',sans-serif;
  color:var(--text-color);
  font-weight: 200;
}


.work-content img{
  margin-bottom: 30px;
  width: 100%;
}


.more-work{
  height: 560px;
  width: 100%;
  background-color: var(--blue-bg-color);
  float: left;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}



.more-work-content{
  position: absolute;
  width:100%;
  top: 0;
  text-align: center;
}

.more-work-content ul{
  padding: 0;
  margin: 30px auto;
  width:auto;
  height: 300px;
  display: inline-block;
}

.more-work-content li{
  list-style: none;
  float: left;
  margin-right: 30px;
}

.more-work-content li:last-child{
  margin-right: 0;
  display: none;
}

.more-work-content li:nth-last-child(2){
  margin-right: 0;
  display: none;
}

.more-work-content li:nth-last-child(3){
  margin-right: 0;
  display: none;
}

.more-work-content li:nth-last-child(4){
  margin-right: 0;
  width: 250px;
  height: 250px;
}


.more-work a{
  width: 100%;
  height: 100%;
  display: block;
}


.work-1{
  background-image: url(../img/work/work-1/server.jpg);
}

.work-1-bg{
  background-image: url(../img/work/work-1/background.jpg);
  background-size: 101%;
}

.work-1{
  border-radius: 150px;
}

.work-2{
  background-image: url(../img/work/work-2/work-2-bg.jpg);
}

.work-2{
  background-image: url(../img/work/work-2/work-2-bg.jpg);
}

.work-2-bg{
  background-image: url(../img/work/work-2/background.jpg);
}

.work-3{
  background-image: url(../img/work/work-3/work-3-bg.jpg);
}

.work-3-bg{
 background-image: url(../img/work/work-3/background.jpg); 
}

.work-3-bg img{
  width: 270px;
  top: 263px;
}

.work-4{
  background-image: url(../img/work/work-4/work-4-bg.jpg);
}

.work-4-bg{
 background-image: url(../img/work/work-4/background.jpg); 
}

.work-5{
  background-image: url(../img/work/work-5/work-5-bg.jpg);
  border-radius: 150px;
}

.work-5-bg{
  background-image: url(../img/work/work-5/background.jpg);
}

.work-5-bg img{
  width: 245px;
  top: 259px;
}


.work-6{
  background-image: url(../img/work/work-6/work-6-bg.jpg);
}

.work-6-bg{
  background-image: url(../img/work/work-6/background.jpg);
}



.work-1, .work-2, .work-3, .work-4, .work-5, .work-6{
  background-size: 100%;
  background-position: 50% 50%;
  width:300px;  
  height: 300px;
  text-align: center;
  box-shadow: 0 2px 50px 0 rgba(36,36,36,0.0);
  position: relative;
  cursor:pointer;
  transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.5s;
}

.work-1 img, .work-2 img, .work-3 img, .work-4 img, .work-5 img, .work-6 span{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


.work-1:hover, .work-2:hover, .work-3:hover, .work-4:hover, .work-5:hover, .work-6:hover{
  background-size: 108%;
  transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.2s;
  box-shadow: 0 30px 40px rgba(0,0,0,.2);
  transform: translate(0,-10px);
}

/*Png logos*/
.work-3 img{
  width: 180px;
  height: 54px;
}

.work-4 img{
  width: 98px;
  height: 98px;
}

.work-5 img{
  width: 180px;
  height: 47px;
}

.work-6 span{
  color:white;
  font-family: 'wavehaus';
  font-size: 30px;
}

.work-6-bg h1{
  color: white;
  line-height: 300px;
  margin: 0;
  font-size: 40px;
}

.cf-icons{
  width: 100%;
  padding: 50px 0;
  margin-bottom: 100px;
}

.purp{
  width:100%;
}
.summertas{
  width: 100%;
  margin-bottom: 100px;
}

.icons-wpr{
  width: 100%;
  display: inline-block;
}

.left-white{
  width: 100%;
  float: left;
  margin: 30px 0;
}

.right-orange{
  width: 100%;
  float: left;
  margin: 0 0 100px 0;
}













#footer{
  background-color: var(--footer-bg-color);
  width:100%;
  float: left;
  margin-bottom: 30px;
}

#footer h1{
  text-align: center;
}

#footer .left-col, #footer .right-col{
  text-align: center;
  float: left;
  width:100%;
}

.left-col{
  padding: 50px 0 0 0;
}

.right-col{
  padding: 50px 0 0 0;
}

#footer button{
  background-color:var(--text-color);
  color:var(--footer-button-text);
  font-family: inherit;
  padding:0;
  margin: 8px 0 0 0;
  border-radius: 16.5px;
  border: none;
  outline:none;
  cursor:pointer;
  transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.3s;
  font-weight: 400;
}

#footer button:hover{
  transform: scale(1.1);
  transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.1s;
}


#footer h1{
  margin: 20px;
}

#social-links-wpr{
  height: 40px;
  box-sizing: border-box;
  margin-bottom: 50px;
}

#social-links-wpr a{
  padding: 8px 3px;
  transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.3s;
}

#social-links-wpr a:hover{
  transform: scale(1.2);
  transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.1s;
}



/* Social Tooltips */


.hint { position: relative; display: inline-block; }

.hint:after {
      position: absolute;
      opacity: 0;
      z-index: 1000000;
      -webkit-transition: 0.3s ease;
      -moz-transition: 0.3s ease;
  pointer-events: none;
}

.hint:hover:before, .hint:hover:after {
  opacity: 1;
}

    
.hint:after {
  content: attr(data-hint);
      font-size: 12px;
  white-space: nowrap;
}


.hint-dribbble{
  color:#CB8CA7;
}
.hint-twitter{
  color:#93B299;
}
.hint-codepen{
  color:#D6A170;
}
.hint-linkedin{
  color:#7B9CC1;
}

    
.hint--bottom:after {
  top: 40px;
  left:-9px;
  letter-spacing: 1px;
}


.hint--bottom:hover:after {
  margin-top: 6px;
}














/*CSS Modal*/

label{
  display: block;
  -webkit-animation: fadeOut .1s reverse;
          animation: fadeOut .1s reverse;
}

.container {
  color: var(--text-color)
  position: absolute;
  background-color: var(--modal-bg);
  width: 100%;
  display: none;
  flex-direction: row;
  justify-content: center;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  overflow: hidden;
  position:fixed;
  -webkit-animation: fadeIn .1s linear;
          animation: fadeIn .1s linear;
}



@-webkit-keyframes fadeIn {
  from {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
    opacity: 0.25;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
    opacity: 0.25;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}



.container .form-wpr {
  align-self: center;
  color: var(--text-color);
  margin-top:20px;
  padding: 20px;
  width: 280px;
}

button label {
  z-index: 0;
  cursor: pointer;
  padding: 8px 15px;
}

input[type="checkbox"]:checked + .container {
  display: flex;
}





/* Responsive Form */


#form-wpr h1{
  margin-bottom: 30px;
}

#saveForm{
  font-weight: 600;
  font-size: 16px;
  width: 100%;
  height: 50px;
  background-color: var(--text-color);
  color: var(--footer-button-text);
  border-radius: 33px;
  margin-top: 30px;
  cursor: pointer;
  transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.3s;
}

#saveForm:hover{
  transform: scale(1.05);
  transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.1s;
}

input{
  background-color: transparent;
  border-width: 0 0 0 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  padding: 11px 0;
  margin: 0 0 30px 0;
  box-sizing:border-box;
  cursor: text;
  border-bottom: 2px solid var(--form-color);
}

textarea {
  background-color:var(--form-color);
  color:var(--text-color);
  border:none;
  font-size: 14px;
  padding:15px;
  border-radius: 6px;
  margin-top: 10px;
  line-height: 1.5em;
  box-sizing:border-box;
  margin-bottom: 0;
}


textarea:focus{
  opacity: 1;
}

input text

fieldset {
  border: 0;
  padding: 0;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
  width: 100%;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
  width: 100%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
  outline: 0;
  border-color: #4697e4;
}


.close{
  position: absolute;
  top: 54px;
  right: 54px;
  transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.1s;
}

.close:hover{
  transform: scale(1.2);
  transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.1s;
}






















/* ========== Responsive styles ========== */


@media screen and (min-width: 400px){
  
  .right-col {
    padding: 90px 0 0 0;
  }

  .left-col {
    padding: 90px 0 0 0;
  }

  #footer .left-col, #footer .right-col{
    width:50%;
    height: 310px;
  }

  .more-work-content li:nth-last-child(4){
    margin-right: 0;
    width: 300px;
    height: 300px;
  }
}


@media screen and (min-width: 600px){
  
  .right-col {
    padding: 90px 4% 0 0;
  }

  .left-col {
    padding: 90px 0 0 4%;
  }

  #social-links-wpr a {
    padding: 8px 10px;
  }

  
  .container .form-wpr {
    width: 450px;
  }

}


@media screen and (min-width: 800px){
  
  .right-col {
    padding: 90px 10% 0 0;
  }

  .left-col {
    padding: 90px 0 0 10%;
  }

  .left-white{
    width: 50%;
    margin: 100px 0;
  }
  .right-orange{
    width: 50%;
    margin: 100px 0;
  }

  .more-work-content li:nth-last-child(4){
    margin-right: 30px;
  }

  .more-work-content li:nth-last-child(3){
    display: block;
  }

  #email-button:hover, #home-button:hover, #dark-mode-btn:hover{
    transform: scale(1.2);
    transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.1s;
    box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.22);
  }
  

}



@media screen and (min-width: 1050px){
  
  body{
    padding: 30px;
  }

  #email-button{
    top:70px;
    right: 70px;
  }

  #home-button{
    top:70px;
    left:70px;
  }

  #dark-mode-btn{
    top:140px;
    right: 70px;
  }

  .right-col {
    padding: 90px 20% 0 0;
  }

  .left-col {
    padding: 90px 0 0 20%;
  }

  .header-bg{
    height: 480px;
  }

  .header-bg img{
    top: 406px;
  }

  .banner{
    padding: 110px 18% 50px 18%;
  }

  .more-work-content li:nth-last-child(3){
    margin-right: 30px;
  }

  .more-work-content li:nth-last-child(2){
    display: block;
  }

  .work-2-bg img{
    top:428px;
    width: auto;
  }

  .work-3-bg img{
    width: 270px;
    top: 440px;
  }

  .work-4-bg img{
    top:410px;
    width: 136px;
  }

  .work-5-bg img{
    width: 245px;
    top: 440px;
  }

  .work-6-bg h1 {
    line-height: 478px;
    font-size: 48px;
  }
    

}



@media screen and (min-width: 1400px){
  .banner-left{
    float: left;
    width: 48%;
    margin-top: 60px;
    padding-right: 20px;
    border-left: 4px solid white;
  }

  .banner-right{
    float: left;
    width:48%;
    margin-top: 60px;
    margin-left: 4%;
    border-left: 4px solid white;
  }

  .banner{
    height: 646px;
  }

  .banner p{
    font: 20px/28px 'Inter',sans-serif;
    font-weight: 200;
  }

  .more-work-content li:nth-last-child(2){
    margin-right: 30px;
  }

  .more-work-content li:last-child{
    display: block;
  }

}









/* =========== Dark Mode button ===========*/


button.btn-toggle{
  position: fixed;
  top:150px;
  right:70px;
}




/* =========== Dark Mode button animated ===========*/




#dark-mode-btn a{
  width: 100%;
  height: 100%;
  display: block;
}

#icon-wrapper{
  width:24px;
  height:24px;
  margin: 0 auto;
  clip-path: circle(12px at center);
  position: relative;
  border-radius:50%;
  transform: translateZ(0);
  top: 14px;
}

#icon-circle{
  border:1px solid black;
  box-sizing:border-box;
  width:24px;
  height:24px;
  background-color:white;
  transition: background-color .15s cubic-bezier(.02, .01, .47, 1);
  border-radius:50%;
  transform: translateZ(0);
  transform: scale(1);
  box-sizing:border-box;
}

#icon-circle:before{
  position:absolute;
  content: "";
  width: 17px;
  height:17px;
  border:1px solid black !important;
  box-sizing:border-box;
  border-radius:50%;
  top:1px;
  right:-4px;
  z-index:12;
  background-color:white;
  transition: background-color .15s cubic-bezier(.02, .01, .47, 1);
  transform: translateZ(0);
}

.rays{
  padding:0;
  margin:0;
}

.rays li{
  width:1.5px;
  height:4px;
  border-radius:6px;
  background-color:black;
  margin:0;
  padding: 0;
  list-style-type: none;
  position:absolute;
  z-index:-3;
}

li.ray1{ }
li.ray2{transform: rotate(45deg);}
li.ray3{transform: rotate(90deg);}
li.ray4{transform: rotate(135deg);}
li.ray5{transform: rotate(180deg);}
li.ray6{transform: rotate(225deg);}
li.ray7{transform: rotate(270deg);}
li.ray8{transform: rotate(315deg);}



/* ================  Animation frames =================== */





/* Crescent leave */
@keyframes moon {
  0%   { top: 1px; right: -4px; opacity:1;   border:1px solid black;}
  10%   { top: 1px; right: -4px; opacity:1;   border:1px solid black;}
  49%   { top: -8px; right: -20px; opacity:1;   border:1px solid black;}
  50%  { opacity:0;   border:1px solid black;}
  100%  { opacity:0;  border:1px solid black; }
}

/* Shrink circle */
@keyframes shrink-circle {
  0%   { transform: scale(1); translateZ(0);  border:1px solid black;}
  45%  { transform: scale(1); translateZ(0);  border:1px solid black;}
  50%  { transform: scale(.4); translateZ(0);   border:2px solid black;}
  100% { transform: scale(.4); translateZ(0);   border:2px solid black;}
}

/* Open Rays */
@keyframes ray1 {
  0%   { top:10px; right:11.5px; }
  50%  { top:10px; right:11.5px; }
  55% { top:0; right:11.5px; }
  100% { top:0; right:11.5px; }
}

@keyframes ray2 {
  0%   { top:12px; right:12px; }
  55%  { top:12px; right:12px; }
  60% { top:3px; right:3px; }
  100% { top:3px; right:3px; }
}

@keyframes ray3 {
  0%   { top:12px; right:12px; }
  60%  { top:12px; right:12px; }
  65% { top:10px; right:0; }
  100% { top:10px; right:0; }
}

@keyframes ray4 {
  0%   { bottom:8px; right:12px; }
  65%  { bottom:8px; right:12px; }
  70% { bottom:3px; right:3px; }
  100% { bottom:3px; right:3px; }
}

@keyframes ray5 {
  0%   { bottom:8px; right:12px; }
  70%  { bottom:8px; right:12px; }
  75% { bottom:0; right:11.5px; }
  100% { bottom:0; right:11.5px; }
}

@keyframes ray6 {
  0%   { bottom:8px; left:10px; }
  75%  { bottom:8px; left:10px; }
  80% { bottom:3px; left:3px; }
  100% { bottom:3px; left:3px; }
}

@keyframes ray7 {
  0%   { top:12px; left:10px; }
  80%  { top:12px; left:10px; }
  85% { top:10px; left:0; }
  100% { top:10px; left:0; }
}

@keyframes ray8 {
  0%   { top:12px; left:10px; }
  85%  { top:12px; left:10px; }
  90% { top:3px; left:3px; }
  100% { top:3px; left:3px; }
}













/* REVERSE - Crescent leave */
@keyframes moon-2 {
  0%   { top: 1px; right: -4px; opacity:1;   border:1px solid black;}
  10%   { top: 1px; right: -4px; opacity:1;   border:1px solid black;}
  49%   { top: -8px; right: -20px; opacity:1;   border:1px solid black;}
  50%  { opacity:0;   border:1px solid black;}
  100%  { opacity:0;  border:1px solid black; }
}

/* Shrink circle */
@keyframes shrink-circle-2 {
  0%   { transform: scale(1); translateZ(0);  border:1px solid black;}
  45%  { transform: scale(1); translateZ(0);  border:1px solid black;}
  50%  { transform: scale(.4); translateZ(0);   border:2px solid black;}
  100% { transform: scale(.4); translateZ(0);   border:2px solid black;}
}

/* Open Rays */
@keyframes ray1-2 {
  0%   { top:10px; right:11.5px; }
  50%  { top:10px; right:11.5px; }
  55% { top:0; right:11.5px; }
  100% { top:0; right:11.5px; }
}

@keyframes ray2-2 {
  0%   { top:12px; right:12px; }
  55%  { top:12px; right:12px; }
  60% { top:3px; right:3px; }
  100% { top:3px; right:3px; }
}

@keyframes ray3-2 {
  0%   { top:12px; right:12px; }
  60%  { top:12px; right:12px; }
  65% { top:10px; right:0; }
  100% { top:10px; right:0; }
}

@keyframes ray4-2 {
  0%   { bottom:8px; right:12px; }
  65%  { bottom:8px; right:12px; }
  70% { bottom:3px; right:3px; }
  100% { bottom:3px; right:3px; }
}

@keyframes ray5-2 {
  0%   { bottom:8px; right:12px; }
  70%  { bottom:8px; right:12px; }
  75% { bottom:0; right:11.5px; }
  100% { bottom:0; right:11.5px; }
}

@keyframes ray6-2 {
  0%   { bottom:8px; left:10px; }
  75%  { bottom:8px; left:10px; }
  80% { bottom:3px; left:3px; }
  100% { bottom:3px; left:3px; }
}

@keyframes ray7-2 {
  0%   { top:12px; left:10px; }
  80%  { top:12px; left:10px; }
  85% { top:10px; left:0; }
  100% { top:10px; left:0; }
}

@keyframes ray8-2 {
  0%   { top:12px; left:10px; }
  85%  { top:12px; left:10px; }
  90% { top:3px; left:3px; }
  100% { top:3px; left:3px; }
}








/* ================  Dark mode themes =================== */

@media (prefers-color-scheme: dark) {
  /* defaults to dark theme */

  body{
    --body-bg-color: #161E1A;
    --bg-gradient:1;
    --text-color: #f3f2f0d1;
    --bullet-color:#aac2e02e;
    --blue-bg-color:#ffffff0f;
    --green-bg-color:#ffffff0f;
    --lightgreen-bg-color:#ffffff0f;
    --orange-bg-color:#ffffff0f;
    --pink-bg-color:#ffffff0f;
    --purple-bg-color:#ffffff0f;
    --footer-bg-color: #f3f2f012;
    --footer-button-text:#242424;
    --modal-bg:#242a2aed;
    --form-color: #cdcdcc6b;
    --hr-color:#cccccc26;
    --banner-text-color:#f3f2f0d1;
    transition: all 1.5s cubic-bezier(.02, .01, .47, 1);
  }


  body.light-theme {
    --body-bg-color: white;
    --bg-gradient:0;
    --bullet-color:#C4DBF8;
    --text-color:#242424;
    --blue-bg-color: #E8F2FE;
    --green-bg-color:#EAEFEB;
    --lightgreen-bg-color:#F1F6E9;
    --orange-bg-color:#FDECDC;
    --pink-bg-color:#F6E4EB;
    --purple-bg-color:#EDE4F6;
    --footer-bg-color:#F3F2F0;
    --footer-button-text:white;
    --modal-bg:#F1F7E9;
    --form-color:#E7F0DA;
    --hr-color:#cccccc;
    --banner-text-color:white;
    transition: all 1.5s cubic-bezier(.02, .01, .47, 1);
  }


  .work-content img, .header-bg, .more-work-content li{
    filter: brightness(.75) contrast(1.2);
  }

  body.light-theme .work-content img, body.light-theme .header-bg, body.light-theme .more-work-content li{
    filter:none;
  }

  #social-links-wpr img {
    filter: invert(100%);
  }

  body.light-theme #social-links-wpr img {
    filter: none;
    transition: all 1.5s cubic-bezier(.02, .01, .47, 1);
  }

  .container{
    backdrop-filter: blur(5px);
  }

  body.light-theme .container{
    backdrop-filter: none;
  }

  #dark-mode-btn, #email-button, #icon-circle, #icon-circle:before, #home-button{
  background-color: #CECECD;
  }

  body.light-theme #dark-mode-btn, body.light-theme #email-button, body.light-theme #icon-circle, body.light-theme #icon-circle:before, body.light-theme #home-button{
    background-color: white;
  }

  .close{
    filter: invert(.7);
  }

  body.light-theme .close{
    filter: none;
  }

  .cf-icons{
    background-color:#BFC3C5;
  }

  body.light-theme .cf-icons{
    background-color:#F1F5F8;
  }

  .purp{
    background-color: #00001E;
  }

  body.light-theme .purp{
    width:100%;
    background-color: #02043F;
  }

  .left-white{
    background-color:#CCCCCC;
  }

  body.light-theme .left-white{
    background-color:white;
  }

  .right-orange{
    background-color:#C98700;
  }

  body.light-theme .right-orange{
    background-color:#FBB314;
  }

  .summertas{
    background-color:#CCC4A8;
  }

  body.light-theme .summertas{
    background-color:#FFF6D7;
  }


  #icon-circle{ animation: shrink-circle-2 1s ease-out reverse; }
  #icon-circle:before { animation: moon-2 1s ease-out reverse; }
  li.ray1{ animation: ray1-2 1s ease-out reverse; }
  li.ray2{ animation: ray2-2 1s ease-out reverse; }
  li.ray3{ animation: ray3-2 1s ease-out reverse; }
  li.ray4{ animation: ray4-2 1s ease-out reverse; }
  li.ray5{ animation: ray5-2 1s ease-out reverse; }
  li.ray6{ animation: ray6-2 1s ease-out reverse; }
  li.ray7{ animation: ray7-2 1s ease-out reverse; }
  li.ray8{ animation: ray8-2 1s ease-out reverse; }
  

  body.light-theme #icon-circle{ animation: shrink-circle 1s ease-out forwards; }
  body.light-theme #icon-circle:before{ animation: moon 1s ease-out forwards; }
  body.light-theme li.ray1{ animation: ray1 1s ease-out forwards; }
  body.light-theme li.ray2{ animation: ray2 1s ease-out forwards; }
  body.light-theme li.ray3{ animation: ray3 1s ease-out forwards; }
  body.light-theme li.ray4{ animation: ray4 1s ease-out forwards; }
  body.light-theme li.ray5{ animation: ray5 1s ease-out forwards; }
  body.light-theme li.ray6{ animation: ray6 1s ease-out forwards; }
  body.light-theme li.ray7{ animation: ray7 1s ease-out forwards; }
  body.light-theme li.ray8{ animation: ray8 1s ease-out forwards; }


}