:root{
       --pri:#2b2b2b;
    --sec: #4467ae94;
    --sec2:#47484c;
    --trd:#ffffff;
    --red:#f03636;
    --grn:#2fc151;
    --blu:#549ce4;
    --trns:rgba(0, 0, 0, 0.066);


}
@font-face {
  font-family: main;
  src: url(./fonts/Santa-Elegant-BF686e16623f579.otf);
}
@font-face {
  font-family: pomo;
  src: url(./fonts/Eilonost-Regular.otf);
}
@font-face {
    font-family: regular;
    src: url(./fonts/AeonikTRIAL-Regular.otf);
}
@font-face {
    font-family: bold;
    src: url(./fonts/AeonikTRIAL-Bold.otf);
}

*{
    margin: 0;padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-family:regular;
}

body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: var(--pri);
      color: var(--trd);
      background-clip: url(./video/bgwall.mp4);
      background-size: contain;
      height: 100%;
    }
    .vdo{
      position: fixed;
      width: 100vw;
      
    }
    .sidebar {
  width: 200px;
  background-color:var(--trns);
  height: 100vh;
  padding: 10px;
  -webkit-transition: width 0.3s;
  -o-transition: width 0.3s;
  transition: width 0.3s;
  overflow: hidden;
  -webkit-box-shadow: 2px 0 5px rgba(0,0,0,0.1);
          box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  position: fixed;
  z-index: 100;
}
#logo{
  height: 33px;
  margin-top: 20px;
  margin-bottom: 20px
}
.sidebar.collapsed {
  width: 60px;
}
.sidebar h1{
  margin: 10px;
}
.sidebar h2 {
  font-size: 20px;
  margin-bottom: 20px;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.sidebar.collapsed h2 {
  opacity: 0;
}

.sidebar a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 5px;
  text-decoration: none;
  color: #ffffff;
  -webkit-transition: background 0.3s;
  -o-transition: background 0.3s;
  transition: background 0.3s;
}

.sidebar a:hover {
  background-color: #f0f0f050;
}

.sidebar .icon {
  margin-right: 10px;
  font-size: 20px;
}

.sidebar .text {
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.sidebar.collapsed .text {
  opacity: 0;
}

.back-btn {
  margin-top: 20px;
  width: 100%;
  padding: 8px;
  cursor: pointer;
  text-align: center;
}
    .content {
      margin-left: 50px;
      position: relative;
      padding: 20px;
      -webkit-transition: margin-left 0.3s;
      -o-transition: margin-left 0.3s;
      transition: margin-left 0.3s;
    }
    .header {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      gap: 10px;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }
    .header img {
      border-radius: 50%;
      width: 40px;
      height: 40px;
    }
    .user{
        background-color: #32363db8;
        padding: 10px;
        width: 100px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        border-radius: 10px;
        text-align: center;
    }
    .user input{
      width: 70px;
      font-size: 15px;
      background-color: #32363db8;
      border: none;
      color: var(--trd);
    }
    .detas{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: 10px;
    }
    /* .detas button{
      
    } */
    .changeBg {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-image: url(https://www.svgrepo.com/show/384978/change-exchange-refresh-page-sync.svg);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
   background-color: #32363db8;
}
    .main{
      background-color: #00000000;
      
      height: 100vh;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align:end ;
          -ms-flex-align:end ;
              align-items:end ;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;     
    }
    .mainname{
      height: 100vh;
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-item-align: center;
          -ms-grid-row-align: center;
          align-self: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
    .mainname h1{
       font-size: 250px;
       position: absolute;
       margin-top: 15vh;
       font-family: main;
       font-weight: 700;
       text-shadow: 0px 20px 19px rgba(0, 0, 0, 0.5);;
       z-index: 44;
       color: #d9fcfc;
    }

    .mainname h1:hover{
        scale: 1.1;
        -webkit-transition: all ease-in 1s;
        -o-transition: all ease-in 1s;
        transition: all ease-in 1s;
        
    }
    .head1{
      
      padding: 50px;
      margin-bottom: 7vh;
      position: absolute;
    }
    .head1 h2{
      font-size:70px;
    }

    .head2{
      
    width: 20vw;
    /* padding: 30px 30px 0px 0px; */
    margin-bottom: 13vh;
    right: 60%;
    position: absolute;
    }
    .head2 h2{
      font-size: 50px;
    }
    .cards {
      display: -ms-grid;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 20px;
      
      /* position: absolute; */
    }
    .card {
      background-color: #32363db8;
      border-radius: 12px;
      -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.1);
              box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 20px;
      -webkit-transition: -webkit-transform 0.2s;
      transition: -webkit-transform 0.2s;
      -o-transition: transform 0.2s;
      transition: transform 0.2s;
      transition: transform 0.2s, -webkit-transform 0.2s;
    }
    .card:hover {
      -webkit-transform: translateY(-5px);
          -ms-transform: translateY(-5px);
              transform: translateY(-5px);
    }
    .card img {
      width: 100%;
      border-radius: 8px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .toggle-btn {
      display: none;
      font-size: 24px;
      cursor: pointer;
      margin-right: 15px;
    }
    .back-btn {
      display: block;
      margin: 20px auto 0;
      padding: 10px 20px;
      background: #e74c3c;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      -webkit-transition: background 0.2s;
      -o-transition: background 0.2s;
      transition: background 0.2s;
    }
    .back-btn:hover {
      background: #c0392b;
    }

    .fullelem{
        height: 100%;
        width: 80%;
        background-color: var(--sec2);
        padding: 15px;
        color: #e4effa;
        margin-left: 10vw;
        display: none;
        position:absolute;
        z-index: 101;
    }
    .fullelem h1{
        font-size: 7vh;
    }
    .fullelem .back{
        position: absolute;
        right: 5%;
        background-color: #c0392b;
        border-radius: 10px;
        padding: 10px 11px;
        border: none;
        font-size: 15px;
        color: var(--trd);
        font-weight: 700
    }

    .todo-list-fullPage{
        display: none;
    }
    .task-container{
        height: 80%;
        width: 100%;
        background-color: var(--trns);
        margin-top: 30px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        
    }
    .addTask{
        width: 37%;
        
        height: 100%;
        border-radius: 10px;
        background-color: var(--pri);
    }
    
    .addTask form{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        padding: 20px;
    }
    .addTask form input#taskInput{
        width: 100%;
        padding: 10px 20px;
        color: black;
        background-color: var(--trd);
        border-radius: 5px;
        border: none;
        outline: none;
        margin-bottom: 10px;
        font-size: 15px;
    }
    .addTask form textarea{
        width: 100%;
        padding: 10px 20px;
        color: black;
        background-color: var(--trd);
        border-radius: 5px;
        border: none;
        outline: none;
        margin-bottom: 10px;
        font-size: 15px;
    }
    .addTask form button {
        width: 100%;
        padding: 10px 15px;
        color: var(--trd);
        background-color: #c0392b;
        border-radius: 5px;
        border: none;
        outline: none;
        margin-bottom: 10px;
        font-size: 15px;
        font-weight: 400; 
        -webkit-transition: all ease 0.3s; 
        -o-transition: all ease 0.3s; 
        transition: all ease 0.3s;
    }
    .addTask form button :hover{
        scale: 0.8;
        background-color: #613e3a;
        z-index: 11;
    }
    .allTask{
        width: 60%;
        padding: 10px;
        height: 100%;
        border-radius: 10px;
        background-color: var(--pri);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        overflow: auto;
    }
    .task{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        width: 100%;
        background-color: var(--trd);
        color: black;
        padding: 10px 10px;
        border-radius: 10px;
        margin-bottom: 5px;
        font-size: 25px;
    }
    .task h5{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 10px;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .task h5 span{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        background-color: red;
        padding: 3px 5px;
        font-size: 10px;
        border-radius: 10px;
        color: #e4effa;

    }
    .task button{
        padding: 5px;
        font-size: 20px;
        color: var(--trd);
        background-color:green;
        color: var(--trd);
        border: none;
    }
    .mark-imp{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        width: 100%;
        font-size: 20px;
        margin-bottom: 10px;
        padding: 10px 15px;
        border-radius: 10px;
    }
    .completeBtn{
        padding: 5px;
        font-size: 10px;
        border-radius: 10px;
        color: var(--trd);
        background-color:green;
        border: none;
    }
    .mark-imp input{
        scale: 1.5;
        margin-right: 10px;
    }
    
    .daily-planner-fullPage{
       display: none;
    }
    .daily-planner-fullPage .dayPlanner {
       background-color: var(--sec);
       height: 85%;
       margin-top: 40px;
       width: 100%;
       border-radius: 10px;
       padding: 10px;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
       -webkit-box-align: start;
           -ms-flex-align: start;
               align-items: flex-start;
       -webkit-box-pack: justify;
           -ms-flex-pack: justify;
               justify-content: space-between;
       overflow: auto;
      }
    .dayPlanner-Time{
       width: 49%;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       border-radius: 10px;
       position: relative;
       margin-bottom: 10px;
       
    }
    .dayPlanner-Time p{
       position: absolute;
       color: black;
       top: 10%;
       left: 1%;
       
    }
    .dayPlanner-Time input{
      padding: 10px 20px;
      width: 100%;
      background-color: var(--trd);
      border: none;
      padding-top: 25px;
      font-size: 20px;
      outline: none;
    }

    .Motivational-fullPage{
      
      position: relative;
      
    }
    .Motivational-fullPage .motivationContainer{
       position: absolute;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
           -ms-flex-direction: column;
               flex-direction: column;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
       text-align: center;
       height: 35vh;
       width: 60vw;
       background-color: #2c474773;
       border-radius: 20px;
       gap: 20px;
       top: 30vh;
       left: 10vw;
       padding: 10px;
       -webkit-box-shadow: 0 0 50px rgba(255, 255, 255, 0.3);
               box-shadow: 0 0 50px rgba(255, 255, 255, 0.3)
      }    
    .vd{
        height: 100vh;
        width:100%;
        -o-object-fit: cover;
           object-fit: cover;
        margin-right: 5px;
        -webkit-filter: brightness(0.2);
                filter: brightness(0.2);
      }
    .motivationContainer h2{
        z-index:2 ;
        font-size: 30px;
      }
    .motivationContainer h4{
         font-size:20px;
       }

    .pomodoro-fullPage{
      
      display: none;
    }
    .overlay{
      height: 100%;
      width: 100%;
      padding: -10px ;
      background-color: #00000000;
      position: absolute;
      right: 0.01%;
    bottom: 0.3%;
    }
    .overlay video{
      position: absolute;
      /* height: 100%; */
      width: 100%;
      -webkit-filter: brightness(0.4);
              filter: brightness(0.4);
    }
    .overlay button{
     padding: 10px;
     border: none;
     color: rgb(0, 0, 0);
     background-color: #ffffff;
     position: relative;
     border-radius:10px ;
    }
    .overlay #fullBtn :active{
      scale: 0.5;
    }
    .pomoTimer{
      position: absolute;
      background-color: #2b2d4200;
      top: 49%;
      left: 50%;
      -webkit-transform: translate(-50% , -50%);
          -ms-transform: translate(-50% , -50%);
              transform: translate(-50% , -50%);
      text-align: center;
      

    }
    .pomoTimer h1{
      font-size: 100px;
      font-family: bold;
    }
    .pomoTimer button{
      font-size: 20px;
      padding: 10px 20px;
      
      margin: 5px;     
    }
    .pomoTimer button:active{
      scale: 0.9;
    }
    .session{
      position: absolute;
      left: 49%;
      top: 20%;
      color: rgb(255, 255, 255);
      padding: 10px 20px;
      background-color: var(--grn);
      -webkit-transform: translate(-40%,0);
          -ms-transform: translate(-40%,0);
              transform: translate(-40%,0);
      text-align: center;
      font-size: 30px;
      border-radius:10px ;
      margin-bottom: 5px;
    }

    @media(max-width: 768px) {
      .user{
        width: 80PX;
      }
      .nickName{
        width: 70px;
      }
      .mainname h1{
        font-size: 120px;
        text-shadow: 0px 20px 19px rgba(0, 0, 0, 0.5);;
      }
      .vdo{
         position: fixed;
         height: 100vh;
         -o-object-fit: cover;
            object-fit: cover;
      }
      .head1{
        padding: 25px;
    margin-bottom: 15vh;
    position: absolute;
      }
      
     .head2{
      display: none;
     }
    
      .session{
        font-size: 15px;
      position: absolute;
      left: 47%;
      top: 25%;
      color: rgb(255, 255, 255);
      padding: 5px 10px;
    }
      .pomoTimer button{
      font-size: 15px;
      padding: 8px 15px;
      margin: 5px;     
    }
      .pomoTimer h1{
      font-size: 35px;
      font-family: bold;
    }
      .pomoTimer{
      position: absolute;
      background-color: #2b2d4200;
      top: 50%;
      left: 50%;
    }
      .overlay video{
        width:100%;
        height: 100vh;
        -o-object-fit: cover;
           object-fit: cover;
      }
      .motivationContainer h2{
        z-index:2 ;
        font-size: 20px;
      }
       .motivationContainer h4{
         font-size:15px;
       }
      .Motivational-fullPage .motivationContainer{
       position: absolute;
       background-color: #2c474773;
       height: 35vh;
       width: 85vw;
       top: 30vh;
       left: 50%;
       transform: translateX(-50%);
      }
      .Motivational-fullPage .back{
        font-size: 10px;
        padding: 4px;
      }
      .vd{
        height: 100vh;
        width: 100vw;
        margin-right: 0;
      }
      

      .Motivational-fullPage h1{
       font-size: 20px;
    }
      .dayPlanner-Time{
      width: 100%;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       border-radius: 10px;
       position: relative;
    }
      .daily-planner-fullPage .dayPlanner {
       background-color: var(--sec);
       height: 85%;
       margin-top: 40px;
       width: 100%;
       border-radius: 10px;
       padding: 10px;
    }
        .mark-imp{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        width: 100%;
        font-size: 12px;
        margin-bottom: 10px;
    }
        .task{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        width: 100%;
        background-color: var(--trd);
        color: black;
        padding: 10px 10px;
        border-radius: 10px;
        margin-bottom: 5px;
        font-size: 15px;
    }
    .task button{
        padding: 5px;
        font-size: 10px;
        color: var(--trd);
        background-color:green;
        
        border: none;
    }
        .task-container{
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }
        .addTask{
            width: 100%;
            height: 59%;
        }
        .allTask{
        width: 100%;
        
        height: 40%;
    }
      .sidebar {
        -webkit-transform: translateX(-300px);
            -ms-transform: translateX(-300px);
                transform: translateX(-300px);
      }
      .fullelem{
        width: 100%;
        margin-left: 0;
        transform: none;
      }
      .sidebar.active {
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
      }
      .content {
        margin-left: 0;
      }
      .toggle-btn {
        display: block;
      }
    }
    

    .footer {
  background-color: #32363db8;
  color: #ffffff;
  padding: 40px 20px 20px;
  font-size: 16px;
  display: block;
  position: relative;
  z-index: 1;
}

.footer-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-container > div {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 250px;
          flex: 1 1 250px;
  margin: 10px;
}

.footer h3 {
  margin-bottom: 10px;
  font-size: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 5px;
}

.footer p, .footer ul {
  margin: 0;
  line-height: 1.6;
}

.footer ul {
  list-style: none;
  padding: 0;
}

.footer ul li {
  margin-bottom: 8px;
}

.footer ul li a {
  color: #ffffff;
  text-decoration: none;
  -webkit-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
}

.footer ul li a:hover {
  color: var(--sec);
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 20px;
  padding-top: 15px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .footer-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
  }

  .footer-container > div {
    margin: 20px 0;
  }
}