/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
/*===== VARIABLES CSS =====*/
:root{
  --header-height: 3rem;
  --font-semi: 600;
}

/*===== BASE COLOURS =====*/
:root{
  --first-color: salmon;
  --second-color: #f5f5f5;
  --timeline_color: white;
  --footer__color: #161625;
  --header-color: #161625 ;
  --box: rgb(98.04%, 50.2%, 44.71%);
  --skillstab: #808080;
  --bg-color: #161625;
  --font-color:white;
  --animated-color:  rgba(64,112,244, 0.2);
  --in-val: 100%;
  --selected: rgba(98.04%, 50.2%, 44.71%, 70%);
  --hover-swap: #0693e3;
}

/* --font-color: white;
--heading-color: #818cab; */


/* --font-color: black;
--heading-color: #818cab; */
/*===== FONT SIZES =====*/
:root{
  --body-font: 'Poppins', sans-serif;
  --big-font-size: 2rem;
  --work-font-size:1.75rem;
  --h2-font-size: 1.25rem;
  --normal-font-size: 0.938rem;
}
@media screen and (min-width: 768px){
  :root{
    --work-font-size: 2.25rem;
    --big-font-size: 3.5rem;
    --h2-font-size: 2rem;
    --normal-font-size: 1rem;
  }
}

/*===== MARGIN =====*/
:root{
  --mb-1: 0.5rem;
  --mb-2: 1rem;
  --mb-3: 1.5rem;
  --mb-4: 2rem;
  --mb-5: 2.5rem;
  --mb-6: 3rem;
}

/*===== INDEXES =====*/
:root{
  --z-back: -10;
  --z-normal: 1;
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*===== BASE =====*/
*,::before,::after{
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
body{
  margin: var(--header-height) 0 0 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  color: var(--second-color);
  background: var(--bg-color);
}
.header404
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px 100px;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .logo
{
  color: #424242;
  text-transform: uppercase;
  cursor: pointer;
}
.header h2
{
  font-size: 5em;
  font-weight: 800;
  color: #fff;
  line-height: 1em;
  text-transform: uppercase;
}

.showcase
{
  position: absolute;
  right: 0;
  width: 100%;
  min-height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #111;
  transition: 0.5s;
  z-index: 2;
}

.showcase.active
{
  right: 300px;
}

.showcase video
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}
.overlay
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


h1,h2,p{
  margin: 0;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
a{
  text-decoration: none;
}
img{
  max-width: 100%;
  height: auto;
  display: block;
}
/* first-colot 4070f4 */
[data-theme="light"] {
  --first-color: #0693e3;
  --second-color: #0E2431;
  --timeline_color: #121212;;
  --footer__color: #0e2431;
  --header-color: #dee4e7;
  --box: rgba(14,36,49);
  --skillstab: #d3d3d3;
  --bg-color: #dee4e7;
  --animated-color: rgba(250,128,114, 0.4); 
  --in-val: 0;
  --selected: rgba(6,147,227, 0.8);
  --font-color: black;
  --hover-swap: salmon;
}

/* === dark mode ==== */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
}

em {
  margin-left: 10px;
  font-size: 1rem;
}
.theme-switch {
  display: inline-block;
  height: 24px;
  position: relative;
  width: 50px;
}

.theme -switch input {
  display:none;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
  justify-content: space-between;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 16px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 16px;
}
.boxswitch {
  opacity: 0;
}
input:checked + .slider {
  background-color: salmon;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 28px;
}

.slider.round:before {
  border-radius: 50%;
}

[data-theme="light"] video {
  filter: invert(100);
}

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.2;
}


/*======ANIMATION AREA*======*/
.animation-area {
  background: var(--bg-color);
  width : 100%;
  height: 100vh;
}
.box-area{
  position: absolute;
  /* top:0; */
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.box-area li{
  position: absolute;
  display: block;
  list-style: none;
  width: 25px;
  height: 25px;
  bottom: -0;
  border-radius: 75%;
  background: var(--animated-color);
  animation: animate 20s linear infinite;
}
.box-area li:nth-child(1){
  left: 86%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}
.box-area li:nth-child(2){
  left: 12%;
  width: 30px;
  height: 30px;
  animation-delay: 1.5s;
  animation-duration: 10s;
}
.box-area li:nth-child(3){
  left: 70%;
  width: 100px;
  height: 100px;
  animation-delay: 5.5s;
}
.box-area li:nth-child(4){
  left: 42%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 15s;
}
.box-area li:nth-child(5){
  left: 65%;
  width: 40px;
  height: 40px;
  animation-delay: 0s;
}
.box-area li:nth-child(6){
  left: 15%;
  width: 110px;
  height: 110px;
  animation-delay: 3.5s;
}
@keyframes animate {
  0%{
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100%{
    transform: translateY(-800px) rotate(360deg);
    opacity: 0;
  }
}


/*===== CLASS CSS ===== */
.section-title{
  position: relative;
  font-size: var(--h2-font-size);
  color: var(--first-color);
  margin-top: var(--mb-2);
  margin-bottom: var(--mb-4);
  text-align: center;
}
.section-title::after{
  position: absolute;
  content: "";
  width: 64px;
  height: 0.18rem;
  left: 0;
  right: 0;
  margin: auto;
  top: 2rem;
  background-color: var(--first-color);
}
.section{
  padding-top: 3rem;
  padding-bottom: 2rem;
}

/*===== LAYOUT =====*/
.bd-grid{
  /* max-width: 85%; */
  display: grid;
  grid-template-columns: 100%;
  grid-column-gap: 2rem;
  width: calc(100% - 2rem);
  margin-left: var(--mb-2);
  margin-right: var(--mb-2);
  background-color: rgba(0,0,0,0);;
}
.l-header{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: var(--header-color);
  box-shadow: 0 4px 4px rgba(146,161,176,.15);
}

/*===== NAV BAR =====*/
.nav{
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: var(--font-semi);
  background-color: var(--bg-color);
}
.nav__list, .nav__item{
  color: black;
}


@media screen and (max-width: 1350px){
  .nav__menu{
    position: fixed;
    top: var(--header-height);
    right: -100%;
    width: 80%;
    height: 100%;
    padding: 2rem;
    background-color: var(--bg-color);
    transition: .5s;
  }
}
.nav__item{
  margin-bottom: var(--mb-4);
}
.nav__link{
  position: relative;
  color:var(--second-color);
}
.nav__link:hover{
  position: relative;
}
.nav__link:hover::after{
  position: absolute;
  content: "";
  width: 100%;
  height: 0.18rem;
  left: 0;
  top: 2rem;
  background-color: var(--first-color);
}
.nav__logo{
  color: var(--second-color);
}
.nav__toggle{
  color: var(--second-color);
  font-size: 1.5rem;
  cursor: pointer;
}

/*Active menu*/
.active::after{
  position: absolute;
  content: "";
  width: 100%;
  height: 0.18rem;
  left: 0;
  top: 2rem;
  background-color: var(--first-color);
}

/*=== Show menu ===*/
.show{
  right: 0;
}
/*===== HOME =====*/
.home{
  height: calc(100vh - 3rem);
  row-gap: 1rem;
  position: relative;
}
.home__data{
  align-self: center;
}
.home__title{
  font-size: var(--big-font-size);
  margin-bottom: var(--mb-5);
}
.home__title-color{
  color: var(--first-color);
  /* width: 60%; */
  /* animation: fill 0.5s ease forwards 3s; */
  /* font-size: var(--big-font-size); */
}
.name{
  width: 60%;
}
@keyframes fill {
  to{
    fill:white;
  }
}
.home__social{
  display: flex;
  flex-direction: column;
}
.home__social-icon{
  width: max-content;
  margin-bottom: var(--mb-2);
  font-size: 1.5rem;
  color: var(--second-color);
}
.home__social-icon:hover{
  color: var(--first-color);
}
.home__img{
  position: absolute;
  float: right;
  right: 0;
  bottom: 0;
  width: 80%;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 15%;
  padding-bottom: 10%;
}

/*BUTTONS*/
.button{
  display: inline-block;
  background-color: var(--first-color);
  color: #fff;
  padding: .75rem 2.5rem;
  font-weight: var(--font-semi);
  border-radius: .5rem;
}
.button:hover{
  box-shadow: 0 10px 36px rgba(0,0,0,.15);
}

/* ===== ABOUT =====*/
.about__container{
  /* grid-template-columns: 1fr 1fr; */
  row-gap: 1rem;
  text-align: center;
}
.about__subtitle{
  margin-bottom: var(--mb-2);
}
/* .about__img{
  /* justify-self: center; */
/* } */ 

.changing {
  color: var(--timeline_color);
}
.blog__link{
  color: var(--first-color);
}
.blog__link:hover {
  color: var(--hover-swap);
  transform: scale(1.1);
}

/* ===== EXPERIENCE ===== */
.experience__container{
  row-gap: 2rem;
  text-align: center;
}
.experience__subtitle{
  margin-bottom: var(--mb-2);
  margin: 0 auto;
}
.experience__text{
  margin-bottom: var(--mb-4);
}
/*.salmoncol{*/
/*  color: salmon;*/
/*  top: initial;*/
/*  bottom: 15px;*/
/*}*/

/*====TIMELINE=====*/
.timeline{
  margin: 0 auto;
  position: center;
  max-width: 90%;
  padding: 25px;
  display: grid;
  grid-template-columns: 3px 0.35fr 1fr;
  font-family: 'Poppins';
  color: #0E2431;
}
.timeline__component{
  margin: 0 18px 20px 20px;
}
.timeline__component__end{
  margin-bottom: 0;
}
.timeline__date {
  text-align: left;
  color: var(--first-color);
}
.timeline__bar {
  position: relative;
  top: 5px;
  background: #4070F4;
}
.timeline__marker{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  background: salmon;
}
.timeline__marker__inner{
  margin-top: 25%;
  margin-left: 25%;
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: var(--bg-color);
  border-radius: 50%;
}
.timeline__marker__end{
  top: initial;
  left:-1px;
  bottom: 7px;
  border-radius: initial ;
  height: 0px;
  border-top-left-radius: 80%;
  border-top-right-radius: 80%;
  /*background: salmon;*/
}
.timeline__marker__end__inner{
  margin-top: 25%;
  margin-left: 21%;
  bottom: 0;
  position: absolute;
  width: 60%;
  height: 75%;
  background-color: var(--bg-color);
  border-radius: 40%;
  border-top-left-radius: 70%;
  border-top-right-radius: 70%;
}
.status {
  justify-items: center;
  height:20px;
  opacity: 0;
}
.timeline__title{
  margin: 0;
  font-size: 1.25em;
  color: var(--timeline_color);
  font-weight: bold;
}
.timeline__subtitle{
  margin: 0;
  font-size: 1.1em;
  font-weight: normal;
  font-style: italic;
  color: var(--second-color);
}
.timeline__text{
  line-height: 1.25;
  color: var(--font-color);
}
/*===== EDUCATION TIMELINE ====== */
.edu__timeline{
  margin: 0 auto;
  position: center;
  max-width: 90%;
  text-align: justify;
  padding: 25px;
  display: grid;
  grid-template-columns: 1fr 0.35fr 3px;
  font-family: 'Poppins';
  color: #0E2431;
}
.edu__timeline__component{
  margin: 20px 20px 18px 0;
}

.edu__timeline__date {
  text-align: right;
  color: var(--first-color);
}
.edu__timeline__bar {
  position: relative;
  top: 25px;
  background: #4070F4;
}
.edu__timeline__marker{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  background: salmon;
}
/* === CAROUSEL === */
* {box-sizing:border-box}

/* Slideshow container */
.experience__carousel{
  max-width: 75%;
  position: relative;
  margin: auto;
}

/* Make the images invisible by default */
.exp_base_container {
  display: none;
}

.skill_base_container {
  display: none;
}


/* forward & Back buttons */
.Back {
  cursor: pointer;
  position: absolute;
  top: 48%;
  width: auto;
  left: -8%;
  margin-top: -23px;
  padding: 17px;
  color: var(--timeline_color);
  font-weight: bold;
  font-size: 25px;
  transition: 0.4s ease;
  border-radius: 0 5px 5px 0;
  user-select: none;
}

.forward {
  cursor: pointer;
  position: absolute;
  top: 48%;
  width: auto;
  margin-top: -23px;
  padding: 17px;
  color: var(--timeline_color);
  font-weight: bold;
  font-size: 25px;
  transition: 0.4s ease;
  border-radius: 0 5px 5px 0;
  user-select: none;
}

/* Place the "forward button" to the right */
.forward {
  right: -9%;
  border-radius: 4px 0 0 4px;
}

/*when the user hovers,add a black background with some little opacity */
.Back:hover, .forward:hover {
  color: salmon;
}

.experience__tab {
  cursor: pointer;
  padding: 1.5em;
  margin: 0 3px;
  width: 15em;
  font-family: 'Poppins' ;
  /*background-color: white;*/
  display: inline-block;
  border-radius: 10px;
  transition: background-color 0.5s ease;
}

/*skills carousel stuff*/
.skills__timeline{
  margin: 0 auto;
  /*position: center;*/
  max-width: 85%;
  text-align: center;
  /*padding: 25px;*/
  display: block;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
  font-family: 'Poppins';
  color: #0E2431;
}
.skills__carousel{
  max-width: 75%;
  position: relative;
  margin: auto;
  padding-top: 1em;
}
.skills__tab {
  cursor: pointer;
  padding: 1.8em;
  margin: 0 3px;
  width: 15em;
  font-family: 'Poppins' ;
  /* background-color: white; */
  display: inline-block;
  border-radius: 10px;
  transition: background-color 0.5s ease;
}
.heavy {
  font-weight: bold;
}

.skills__data{
  text-align: left;
  position: relative;
  font-weight: var(--font-semi);
  padding: .5rem 1rem;
  margin-bottom: var(--mb-4);
  border-radius: .5rem;
  box-shadow: 0 4px 25px var(--box);
}

/* The circles or bullets and indicators */
.enable, .experience__tab:hover, .skills__tab:hover {
  background-color: var(--selected);
}

/* Faint animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.4s;
  animation-name: fade;
  animation-duration: 1.4s;
}

@-webkit-keyframes fade {
  from {opacity: .5}
  to {opacity: 2}
}

@keyframes fade {
  from {opacity: .5}
  to {opacity: 2}
}
/* ===== SKILLS =====*/
/*.skills__container{*/
/*  row-gap: 2rem;*/
/*  text-align: center;*/
/*}*/

.skills__subtitle{
  color: var(--first-color);
  margin-bottom: var(--mb-3);
}
.skills__name{
  display: inline-block;
  box-shadow: 0 4px 25px var(--box);
  /*font-size: var(--small-font-size);*/
  color: var(--timeline_color);
  margin-right: var(--mb-2);
  margin-bottom: var(--mb-3);
  padding: .5rem 1rem;
  background-color: var(--bg-color);
  border-radius: .75rem;
  transition: 1s;
  cursor: pointer;
}
.skills__name:hover{
  /*background-color: var(--first-color);*/
  /* color: white; */
  transform: scale(1.1);
}
/* ===== KAGGLE ===== */
.kaggle__container{
  /* grid-template-columns: 1fr 1fr; */
  row-gap: 1rem;
  text-align: center;
  justify-content: center;
}

.kaggle__img{
  display: flex;
  justify-content: center;
}
.kaggle__img img{
  border-radius: .5rem;
}
.kaggle__link {
  padding-left: .5em;
  color:var(--first-color);
}
.kaggle__link:hover{
  color:var(--hover-swap);
}

/* ===== WORK =====*/
.work__container{
  row-gap: 2rem;
  /* position: relative; */
}

.work__link__wrapper {
  text-align: center;
  margin-left: 0.4rem;
  font-size: 2rem;
}
.work__link{
  word-spacing: 0.1rem;
  position: relative;
  display: none;
  color: var(--font-color);
}
.work__link:hover {
  color:var(--first-color);
}
.work__item{
  box-shadow: 0 4px 25px var(--box);
  border-radius: 0.5rem;
  padding: 1rem;
  overflow: hidden;
  transition: 1s;
  cursor: pointer;
  height:25em;
  justify-content: center;
  align-items: center;
}
.work__item:hover{
  transform: scale(1.1);
}
.tlogo {
  height: 100%;
}
.work__title{
  text-align: center;
  /* transform: translateY(rem); */
  font-family: 'Poppins' ;
  font-size: var(--work-font-size);
  font-weight: bold;
  font-style: normal;
}
.work__info{
  font-size: 2rem;
  text-align: center;
}
.work__text{
  text-align: left;
  /* padding-bottom: 1.8rem; */
  transform: translateY(10rem);
  overflow: hidden;
  display: none;
}
.work__tech {
  text-align: center;
  position: relative;
  font-weight: lighter;
  /* bottom: 4rem; */
  word-spacing: 1rem;
}
.work__tech__spaced{
  font-weight: lighter;
  /* bottom: -5rem; */
  /* font-size: 0.8rem; */
  word-spacing: 0.2rem;
}

.work__item:hover .work__text {
  display: initial;
  /* transform: translate(0px); */
}
.work__item:hover .work__title {
  transform: initial;
  text-align: left;
  font-size: 1.5rem;
}
.work__item:hover .work__info{
  display: none;
}
.work__item:hover .work__link {
  display: unset;
}

.work__item:hover .work__tech{
  /* position: absolute; */
  display: none;
  font-weight: lighter;
  bottom: -5rem;
  font-size: 0.8rem;
}
.work__item:hover .work__tech__spaced{
  display: none;
  font-weight: lighter;
  bottom: -5rem;
  font-size: 0.8rem;
  word-spacing: 0.2rem;
}


/* ===== CONTACT =====*/
.contact__input{
  width: 100%;
  font-size: var(--normal-font-size);
  font-weight: var(--font-semi);
  padding: 1rem;
  border-radius: .5rem;
  border: 1.5px solid var(--second-color);
  outline: none;
  margin-bottom: var(--mb-4);
}
.contact__button{
  display: block;
  border: none;
  outline: none;
  font-size: var(--normal-font-size);
  cursor: pointer;
  margin-left: auto;
}
.salmoncol {
  color:salmon;
}
/* ===== FOOTER =====*/
.footer{
  background-color: #161625;
  color: #f5f5f5;
  text-align: center;
  font-weight: var(--font-semi);
  padding: 2rem 0;
}
.footer__title{
  font-size: 2rem;
  margin-bottom: var(--mb-4);
}
.footer__social{
  margin-bottom: var(--mb-4);
  color: #fff;
}
.footer__icon{
  font-size: 1.5rem;
  color: #fff;
  margin: 0 var(--mb-2)
}
.footer__icon:hover {
  color: var(--first-color)
}
/*Test for centering nav icons*/
@media screen and (min-width: 1024px){
  .bd-grid{
    margin-left: auto;
    margin-right: auto;
  }
  .home__img{
    width: 60%;
    right: 0%;
    top: 25%;
  }
}
@media screen and (max-width: 550px){
  .Back, .forward {
    display: none;
  }
  .home__img {
    padding-bottom: 40%;
    width: 90%;
  }
  /* .home__social {
    padding-bottom: 30%;
  } */
}

@media screen and (min-width: 720px){

  .work__container{
    padding-left: 2rem;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2,1fr);
    column-gap: 2rem;
  }
}

/* ===== MEDIA QUERIES=====*/
@media screen and (min-width: 768px){
  .bd-grid {
    width: 85%;
  }
  body{
    margin: 0;
  }
  .section{
    padding-top: 4rem;
    padding-bottom: 3rem;
  }
  .section-title{
    margin-bottom: var(--mb-6);
  }
  .section-title::after{
    width: 80px;
    top: 3rem;
  }

  .home{
    height: 100vh;
  }
  .home__data{
    align-self: flex-end;
  }
  .home__social{
    padding-top: 0;
    padding-bottom: 2.5rem;
    flex-direction: row;
    align-self: flex-end;
  }
  .home__social-icon{
    margin-bottom: 0;
    margin-right: var(--mb-4);
  }
  .home__img{
    width: 55%;
    bottom: 18%;
    top: 30%;
  }

  .about__container, .experience__container{
    grid-template-columns: repeat(2,1fr);
    align-items: center;
    text-align: center;
  }
  .skills__container{
    grid-template-columns: 1fr 0.5fr;
    align-items: center;
    text-align: center;
  }
  .kaggle__container{
    grid-template-columns: 1fr 0.5fr;
    column-gap: 5em;
    align-items: center;
    text-align: center;
  }

  .contact__form{
    width: 360px;
  }
  .contact__container{
    justify-items: center;
  }
  .skills__timeline{
    grid-template-columns: repeat(5, 1fr);
    position: center;
  }
}

@media screen and (min-width: 850px){
/*  .home__img{*/
/*    position: absolute
/*    width: 20%;*/
/*    bottom: 0;*/
/*  }*/
  .work__container{
    padding-left: 2rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2,1fr);
    column-gap: 2rem;
  }
}



@media screen and (min-width: 1024px){
  .bd-grid{
    margin-left: auto;
    margin-right: auto;
  }
  .home__img{
    width: 60%;
    right: 0%;
    top: 25%;
  }
  .skills__timeline{
    grid-template-columns: repeat(6, 1fr);
  }
}

@media screen and (min-width: 1180px) {
  .home__img{
    width: 35%;
    right: 5%;
    top: 20%;
    padding: revert;
  }
}

@media screen and (min-width: 1350px) {
  /*.home__img {*/
  /*  width: revert;*/
  /*}*/
  .nav{
    height: calc(var(--header-height) + 1rem);
  }
  .nav__list{
    display: flex;
    padding-top: 0;
  }
  .nav__item{
    margin-left: var(--mb-6);
    margin-bottom: 0;
  }
  .nav__toggle{
    display: none;
  }
  .nav__link{
    color: var(--second-color);
  }
  .skills__timeline {
    grid-template-columns: repeat(7, 1fr);
  }

}

@media screen and (max-width: 550px) {
  .timeline {
    margin-left: -2em;
  }
  .work__item{
    margin-left: 10%;
  }
}

@media screen and (min-width: 1354px) and (max-width: 1364px) {
  .work__item{
    height: 27em;
  }
}

@media screen and (min-width: 1292px) and (max-width: 1353px) {
  .work__item{
    height: 29em;
  }
}

@media screen and (min-width: 1168px) and (max-width: 1291px) {
  .work__item{
    height: 31em;
  }
}

@media screen and (min-width: 1056px) and (max-width: 1167px) {
  .work__item{
    height: 33em;
  }
}

@media screen and (min-width: 1006px) and (max-width: 1055px) {
  .work__item{
    height: 35em;
  }
}

@media screen and (min-width: 1002px) and (max-width: 1005px) {
  .work__item{
    height: 37em;
  }
}

@media screen and (min-width: 948px) and (max-width: 1001px) {
  .work__item{
    height: 40em;
  }
}

@media screen and (min-width: 872px) and (max-width: 947px) {
  .work__item{
    height: 43em;
  }
}

@media screen and (min-width: 850px) and (max-width: 871px) {
  .work__item{
    height: 48em;
  }
}

@media screen and (min-width: 746px) and (max-width: 849px) {
  .work__item{
    height: 33em;
  }
}

@media screen and (min-width: 720px) and (max-width: 745px) {
  .work__item{
    height: 33em;
  }
}

@media screen and (min-width: 700px) and (max-width: 719px) {
  .work__item{
    height: 20em;
  }
}

@media screen and (min-width: 568px) and (max-width: 699px) {
  .work__item{
    height: 22em;
  }
}

@media screen and (min-width: 435px) and (max-width: 567px) {
  .work__item{
    height: 28em;
  }
}

@media screen and (min-width: 416px) and (max-width: 434px) {
  .work__item{
    height: 28em;
  }
}

@media screen and (min-width: 390px) and (max-width: 415px) {
  .work__item{
    height: 32em;
  }
}


@media screen and (min-width: 373px) and (max-width: 389px) {
  .work__item{
    height: 33em;
  }
}

@media screen and (min-width: 322px) and (max-width: 372px) {
  .work__item{
    height: 37em;
  }
}

@media screen and (min-width: 294px) and (max-width: 322px) {
  .work__item{
    height: 43em;
  }
}

@media screen and (min-width: 50px) and (max-width: 294px) {
  .work__item{
    height: 50em;
  }
}


.container {
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 12px;
  background: none;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: #0e2431;
  border-radius: 90%; */
  position: relative;
  filter: invert(0);
}

.sun {
  width: 50%;
  height: 50%;
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.6) rotate(0deg);
  transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
  color: yellow;

/*  white transparent for Safari  */
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 50%, #f0f0f0 50%);
}

.sun:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  /* background: radial-gradient(circle, #f0f0f0 30%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, #f0f0f0 50%); */
  background: radial-gradient(circle, #fcb900 30%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, #fcb900 50%);

  transform: rotate(45deg);
}

.sun.visible {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1) rotate(180deg);
  transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
  background: radial-gradient(circle, #fcb900 30%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, #fcb900 50%);

}
    
.moon {
  width: 50%;
  height: 50%;
  pointer-events: none;
  position: absolute;
  left: 12.5%;
  top: 18.75%;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 50%;
  box-shadow: 9px 3px 0px 0px #f0f0f0;
  opacity: 0;
  transform: scale(0.3) rotate(65deg);
  transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
}

.moon.visible {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
}

.star {
  position: absolute;
  top: 25%;
  left: 5%;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 7px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid #f0f0f0;
  border-left: 7px solid rgba(0, 0, 0, 0);
  transform: scale(0.55) rotate(35deg);  
  opacity: 0;
  transition: all 0.2s ease-in 0.4s;
}

.star:before {
  border-bottom: 5px solid #f0f0f0;
  border-left: 3px solid rgba(0, 0, 0, 0);
  border-right: 3px solid rgba(0, 0, 0, 0);
  position: absolute;
  height: 0;
  width: 0;
  top: -3px;
  left: -5px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}

.star:after {
  position: absolute;
  display: block;
  color: red;
  top: 0px;
  left: -7px;
  width: 0px;
  height: 0px;
  border-right: 7px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid #f0f0f0;
  border-left: 7px solid rgba(0, 0, 0, 0);
  transform: rotate(-70deg);
  content: '';
}

.moon.visible .star {
  opacity: .8;
/*   transform: rotate(35deg); */
}

.star.small {
  transform: scale(0.35) rotate(35deg);
  position: relative;
  top: 50%;
  left: 37.5%;
  opacity: 0;
  transition: all 0.2s ease-in 0.45s;
}

.moon.visible .star.small {
  opacity: .7;
  transform: scale(0.45) rotate(35deg);
}