:root{
    --primaryColor: #365B6d;
    --white: #f7f7f7;
    --secondaryColor: #41C1BA
}
*{
    margin:0;
    padding:0;    
}
#loading{
    position: fixed;
    height: 100%;
    width: 100%;
    background: var(--primaryColor)
    url('../media/monophy.gif')
        no-repeat
        center;
    background-image: cover;
    background-size: 200px, 200px;
    z-index: 99999;
}
#loading2{
    position: fixed;
    height: 100%;
    width: 100%;
    background: --primaryColor url('../media/807.gif') no-repeat center;
    background-image: cover;
    background-size: 200px, 200px;
    z-index: 99999;
}
:root {
--ff-primary: "Poppins", sans-serif;
--fw-bold: 900;
--clr-light: #fff;
--clr-dark: #365B6D;
--clr-accent: #41c1da;
--fs-h2: 2.25rem;
--fs-body: 1rem;
--speed: 180px;
--main-bg-color: #365B6D;
}

@media (min-width: 800px) {
:root {
    --fs-h2: 3.75rem;
    --fs-body: 1.125rem;
    --speed: 300px;
}
}

body {
background: var(--main-bg-color);
color: var(--clr-dark);
font-family: var(--ff-primary);
font-size: var(--fs-body);
line-height: 1.5vh;
/* width: 100%; */
user-select: none;
}
.text-2 {
    list-style: none;
    margin-top: 0px;
    margin-left: 0px;
    color: var(--white);
    font-size: 30px;
    font-weight: 500;
    font-family: var(--ff-primary);
  }
.nav {
display: flex;
justify-content: center;
position: fixed;
background: var(--clr-dark);
color: var(--clr-light);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
transform: translateY(100%);
transition: transform 250ms cubic-bezier(0.5, 0, 0.5, 1);
}

.nav__list {
list-style: none;
display: flex;
height: 100%;
flex-direction: column;
justify-content: space-evenly;
margin: 0;
padding: 0;
}

.nav__link {
color: inherit;
font-weight: var(--fw-bold);
font-size: var(--fs-h2);
text-decoration: none;
}

.nav__link:hover {
color: var(--clr-accent);
}

.nav-toggle {
padding: 0.5em;
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
right: 1em;
top: 1em;
z-index: 1000;
outline: none;
}

.nav-open .nav {
transform: translateX(0);
}

.nav-open .nav-toggle {
position: fixed;
}

.nav-open .hamburger {
transform: rotate(0.625turn);
}

.nav-open .hamburger::before {
transform: rotate(90deg) translateX(-6px);
}

.nav-open .hamburger::after {
opacity: 0;
}

.hamburger {
display: block;
position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after {
background: var(--clr-accent);
width: 2em;
height: 3px;
border-radius: 1em;
transition: transform 250ms ease-in-out;
}

.hamburger::before,
.hamburger::after {
content: "";
position: absolute;
left: 0;
right: 0;
}

.hamburger::before {
top: 6px;
}

.hamburger::after {
bottom: 6px;
}

label {
position: relative;
margin: 2px;
}

label::before {
position: absolute;
content: "";
top: 0;
left: -3rem;
width: 0.25rem;
height: 100%;
background: var(--menu-link-active-color);
transition: 2s;
margin-left: 5px;
}

label li {
position: relative;
background: linear-gradient(var(--menu-link-active-color) 0 100%) left/0
    no-repeat;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
transition: background-size 0.45s 0.04s;
}

label li::before {
position: absolute;
content: attr(data-text);
z-index: -1;
color: #fff;
}

label:nth-child(1) {
--menu-link-active-color: rgb(21, 185, 240);
}

label:nth-child(2) {
--menu-link-active-color: rgb(21, 185, 240);
}

label:nth-child(3) {
--menu-link-active-color: rgb(21, 185, 240);
}

label:nth-child(4) {
--menu-link-active-color: rgb(21, 185, 240);
}
label:nth-child(5) {
--menu-link-active-color: rgb(21, 185, 240);
}

label:hover::before {
left: var(--speed);
}

.nav__item {
color: #fff;
}
.main {
    display: flexbox;
    text-align: center;
    padding-top: 10vh;
    padding-bottom: 1vh;
    }
.main img {
width: 100px;
border-radius: 50%;
}
.Title {
color: #f7f7f7;
font-size: 3rem;
font-family: "Poppins", 'Times New Roman', Times, serif;
font-weight: bold;
margin: 0px;
line-height: 4rem;

}
.animation2{
    animation:fade 2s ease;
    animation-delay: 2s;
}
.animation{
    animation: fade 0s ease;
}

@keyframes fade{
    0%{opacity:0;}
    100%{opacity:1;}
}

.content{
    height:30px;
    margin-bottom: 2rem;
    display:flex;
    align-items: center;
    justify-content: center;
}
.textSlider{
    font-size: 2rem;
    font-family: "Poppins", 'Times New Roman', Times, serif;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    display:flex;
    align-items: center;
    justify-content: center;
}
.slider{
    height: 48px;
    padding: 10px;
    overflow: hidden;
    box-sizing: border-box;
    margin-left:0;
}
.slider div{
    height:48px;
    margin-bottom: 30;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider-text-1{
    color: #aaa;
    margin-bottom: 48px;
    text-align: left;
    animation: slide 5000ms linear infinite;
}
.slider-text-2{
    color: #aaa;
    margin-bottom: 48px;
    text-align: left;

    
}
.slider-text-3{
    color:#aaa;
    margin-bottom: 48px;
    text-align: left;

    
}
@keyframes slide{
    0%{margin-top: -288px;}
    5%{margin-top:-192px;}
    33%{margin-top:-192px;}
    38%{margin-top:-96px;}
    66%{margin-top:-96px;}
    71%{margin-top:0px;}
    100%{margin-top:0px;}
}
.ChandigarhUniversity{
    font-size: small;
    text-align: right;
}
.main button {
    display: flexbox;
    line-height:1rem;
    /* width: 10rem; */
    border-radius: 3vh;
    margin-left:2vw;
    margin-right: 2vw;
    margin-top: 1rem;
    margin-bottom: 5rem;
    background-color: #41c1da;
    font-size: 1rem;
    border: none;
    color: white;
    padding: 1rem 1rem;
    text-align: center;
    text-decoration: none;
    font-size: 2vh;
}
.main button:hover {
opacity: 0.5;
}
.contact {
background: white;
display: flexbox;
min-height: 60vh;
padding-bottom: 10vh;
text-align: center;
background: url("unnamed.png"), white;
}

.welcome {
font-size: 3rem;
font-family: "Poppins";
line-height: 3rem;
}
.tomyportfolio {
font-size: 2rem;
line-height: 2rem;
font-family: "Poppins";
}
.contact p {
font-size: 1rem;
padding-left: 20vw;
padding-right: 20vw;
line-height: 2rem;
}
.contact button {

display: flexbox;
border-radius: 3vh;
margin-left: 2vw;
margin-top: 1rem;
margin-bottom:2rem;
background-color: #41c1da;
font-size: var(--ff-primary);
border: none;
color: white;
padding: 1rem 1rem;
text-align: center;
text-decoration: none;
font-size: 2vh;
line-height: 1rem;
}
.contact button:hover {
opacity: 0.5;

}
.last {
background-color: #04284d;
width: 100vw;
height: 50vh;
text-align: center;
color: white;
}
footer {
display: flexbox;
padding-bottom: 5vh;
background-color: var(--primaryColor);
text-align: center;
padding-top: 10vh;
font-size: small;
color: grey;
}
.fa {
padding: 10px;
font-size: 40px;
width: 50px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-instagram {
background: #3b599800;
color: white;
}
.fa-twitter {
background: #55acee00;
color: white;
}
.fa-facebook{
    background: #55acee00;
    color: white;
}
.fa-github {
background: #00000000;
color: white;
}
.fa-linkedin {
    background-color: #00000000;
    color: white;
}
.fa-google {
    background-color: #00000000;
    color: white;
}