@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rowdies:wght@300;400;700&display=swap');

#Fullpic{
    animation: fade 5s ease-in-out;
}
@keyframes fade{
    from {opacity: 1;}
      to {opacity: 0;}
}


.loader{
    margin: auto;
    animation: load  1.5s infinite;
    transition: transform 1s ease-in;
}
@keyframes load {
0%{ transform: rotate(0deg)}
100%{ transform: rotate(360deg);}
}

#top1{
    display: none;
}
 
.layout{
color:#FFFF;
  font-family: "Roboto";

    font-size:22px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: .2fr 0.8fr 0.8fr .7fr .7fr;
    grid-template-areas: "header"
                         "aboutme"
                         "techxpo"
                         "services"
                        "footer";
}

nav {
    font-family: "Rowdies",'Times New Roman', Times, serif;
    color:   #800000;;

}
.header{
   color: #EB5B00;
    grid-area: header;
    background-color: #000435;
}
.aboutme{
     grid-area: aboutme;
}

.serve,.aboutMeContent{
    box-shadow: 0px 0px 30px rgba(76, 0, 130, 0.459); 
}

.aboutmeunderline{position: relative
}
.aboutmeunderline::before{
    content: "";
    background-color: chocolate;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 5px;
    border-radius: 5px;


}

.techxpo{ 

     grid-area: header;

}
.techxpounderline{position: relative
}
.techxpounderline::before{
    content: "";
    background-color: chocolate;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 5px;
    border-radius: 5px;


}
.services{
     grid-area: services;
     background-color: rgba(0, 0, 0, 0.393);
}


.serviceunderline{position: relative
}
.serviceunderline::before{
    content: "";
    background-color: chocolate;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 185px;
    height: 5px;
    border-radius: 5px;
}
.footer{
     grid-area: footer;
     background-color: #000435;
     color:whitesmoke;
}

.active{
    text-decoration: underline;
    color: #EB5B00;
    text-decoration-thickness: 5px;
    text-decoration-color: #800000;
}

#animatedheader{
    width: 0px;
white-space: nowrap;
    border-right: 2px solid #EB5B00 ;
    overflow: hidden ;
    animation: typing 2s steps(20,end)  infinite alternate, blink 0.9s  step-end infinite;
}
@keyframes typing {
   from {width: 0px;}
    to {width: 130px;}
}

@keyframes blink {
  50% { border-color: transparent; }
  100% { border-color: #EB5B00; }
}


.serve{
    opacity: 0;
    transform: translateY(20px);
  transition: transform .5s ease-in,opacity 0.5s ease-in;
}
.fadein{
    transform:translateY(0px);
    opacity: 1;
}