@import url('https://fonts.googleapis.com/css2?&family=Open+Sans:ital,wght@0,300..800;1,300..800');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');


@media (min-width:750px) {
    .maintxt{
        font-size:80px;
    }
    .subtitle{
        font-size:35px;
    }
    .subtitle:hover{
        font-size:40px;
    }
    .button{
         font-size: 30px;
    }
    .body{
        background-size:cover;
    }
    
    .yttext{
        font-size:20px;
        text-align:center;
        justify-content:center;
    }
    .bouncetext{
        justify-content:center;
        margin:0 auto;
    }
    .electronics{
        font-size:70px;
    }
    .electroimg{
        width:350px;
    }
    .Eimg{
        width:250px;
    }
    .getstarted{
        padding:10px 30px;
    }
    .button1{
        margin-right:25px;
        margin-left:25px;
    }
    .button2{
        margin-right:25px;
        margin-left:25px;
    }
    .video iframe{
        width:50%;
        height:50%;
    }
    .code{
        font-size:15px;
    }
    .faqtitle{
        font-size:70px;
    }
    }

@media(max-width:700px) {
    .maintxt{
        font-size:12vw;
        margin-bottom:40px;
    }
    .subtitle{
        font-size:9vw;
    }
    .subtitle:hover{
        font-size:10vw;
    }
    .button{
        font-size:30px;
    }
    .yttext{
        font-size:20px;
    }
    .button1{
        margin-left:10px;
        margin-right:10px;
    }
    .electronics{
        font-size:40px;
    }
    .electroimg{
    width:200px;
    }
    .Eimg{
        width:100px;
    }
    .getstarted{
        padding:5px 15px;
    }
    .button{
        font-size:20px;
    }
    .navbar{
        padding:20px;
    }
    .button1{
        margin-right:5px;
        margin-left:5px;
    }
    .button2{
        margin-right:5px;
        margin-left:5px;
    }
    .video iframe{
        width:100%;
        height:100%;
    }
    .code{
        font-size:10px;
    }
    .usefullinks{
        font-size:8px;
    }
    .faqtitle{
        font-size:50px;
    }
}

.body{
    position:absolute;
    top:40%;
    left:50%;
    transform:translate(-50%, -50%);
    background-image:url(pictures/pcbackground.png);
    background-color:rgb(58, 255, 255);  
    background-repeat:no-repeat; 
}

.homebody{
    background-image:url(pictures/pchome-bg.png);
    scroll-behavior:smooth;
    background-color:aquamarine;
    background-repeat:no-repeat;
}

.getstarted{
    display:inline-block;
    color:white;
    background-color:rgb(0, 119, 255);
    text-align: center;
    border-radius:12px;
    text-decoration: none;
    transition:0.3s;
}

.getstarted:hover{
    color:black;
    background-color: aqua;
}

.button{
    text-align: center;
    font-family: Inter;
}

.youtube{
    display:inline-block;
    color:red;
    background-color:white;
    margin-top:-2px;
    border-width:5px;
    border-radius:50%;
    transition:0.5s;
    padding:10px 10px;
    text-decoration:none;
    outline:2px solid red;
    align-items:center;
}

.youtube:hover{
    color:white;
    background-color:red;
    outline: 2px solid white;
}

.yttext{
    font-family:Poppins;
    text-align:center;
    text-decoration:none;
    font-weight:400;
    margin-top:8px;
}

@keyframes Bounce {
    0%{transform: translateY(0);}
    50%{transform: translateY(5px);}
    100% {transform:translateY(0);}
}

.bouncetext{
    animation:Bounce 1s ease infinite;
    font-family:Bebas Neue;
    font-size:40px;
    text-align:center;
    display: flex;
    align-items: center;
}
    
@keyframes nethum{
    0% {transform:scale(100%);}
    50% {transform:scale(120%);}
    100% {transform:scale(100%);} 
}

.maintxt{
    animation:nethum 3s ease-in-out infinite;
    margin-bottom:5px;   
    font-family:Orbitron; 
    color:rgb(255, 105, 6);
    font-weight:bolder; 
    text-align:center; 
}

.subtitle{
    color:black;
    transition:0.5s;
    margin-top:0px; 
    margin-bottom:20px;  
    font-family:Poppins; 
    text-align:center; 
}

.whatsapp{
    display:inline-block;
    padding:40px 40px;
    border-radius:50%;
    border:2px solid rgb(25, 190, 39);
    background-color:white;
    text-decoration:none;
    transition:0.3s;
}

.fa-phone{
    color:rgb(25, 190, 39);
    font-size:20px;
    transition:0.3s;
}

.whatsappdiv{
    text-align:center;
}

.wtxt{
    font-family:Poppins;
    font-weight:400;
}

.whatsapp:hover{
    background-color:rgb(25, 190, 39);
    border:2px solid white;
}

.whatsapp:hover .fa-phone{
    color:white;
}

.navbar{
    background-color:#333;
    color:white;
    padding:5px;
    position:fixed;
    width:100%;
    top:0;
    left:0;
    z-index:1000;
}

#about{
    background-color:#333;
}

section{
    height:auto;
    min-height:100vh;
    padding:50px;
}

.button1{
    background-color:transparent;
    color:black;
    transition:0.4s;
    margin-left:20px;
    border:hidden;
}

.button1:hover{
    color:hsl(114, 100%, 32%);
}

.button1.active{
    color:white;
}

.button2{
    display:inline-block;
    background-color:white;
    color:#333;
    border-radius:10%;
    transition:0.4s;
}

.button2:hover{
    background-color:#333;
    color:white;
}

.txt1{

    font-family:Poppins;
    font-weight:bolder;
    font-size:20px;
}

.txt2{
    color:white;
    font-family:Inter;
    font-weight:lighter;
    font-size:20px;
}

.txt3{
    text-align:center;
}

.txt5{
    font-family:Poppins;
    font-weight:bolder;
    font-size:12px;
}

.electronics{
    font-family:Open Sans;
    text-align:center;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    background-image:linear-gradient(to right, #fc13d1, #0596f0);
    font-weight:bolder;
    margin-bottom:20px;
    transition:0.4s ease;
}

.electrotxt{
    font-size:15px;
    font-family:Inter;
    font-weight:normal;
    text-align:center;
    transition:0.3s;
}

.electroimg{
    border-radius:50%;
    transition:0.3s;    
}

.electroimg:hover{
    scale:110%;
}

.lrnbtn{
    display:inline-block;
    padding:20px;
    color:#333;
    background-color:transparent;
    border:transparent;
    border-radius:50%;
    position:absolute;
    transition:1s;
    left:80%;
}

.lrntxt{
    font-size:15px;
    font-family:Montserrat;
    text-align:right;
    transition:0.3s ease;
    text-decoration:underline 2px black;
}

.lrnbtn:hover .lrntxt{
    font-weight:bolder;
}

.component{
    font-size:30px;
    font-family:Inter;
    text-align:left;
    font-weight:bolder;
}

.Eimg{
    border-radius:50%;
    transition:0.3s ease;
}

.Eimg:hover{
    scale:110%;
}

.learn{
    padding:50px;
    height:auto;
}

.arduinobody{
    overflow:scroll;
    scroll-behavior:smooth;
    background: linear-gradient(to right, #9ae4ff, #1fa5f9);
    background-repeat:no-repeat;
}

.connections{
    font-family:Inter;
    font-size:20px;
    text-align:left;
    text-decoration:underline;
}

.connections2{
    font-family:Inter;
    font-size:15px;
    text-align:left;
}

.code{
    font-family:Fira Code;
    text-align:left;
    background-color:#333;
    color:white;
    transition:0.4s ease;
}
.code:hover{
    color:#16ff16;
}

.video{
    display:flex;
    justify-content:center;
    position:relative;
    width:100%;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    text-align:center;
}

.video iframe{
    position:absolute;
    top:0;
}

.article{
    font-size:25px;
    font-family:Open Sans;
    color:Black;
    font-weight:bold;
}

.txt5{
    text-align:center;
}

.articleimg{
    width:230px;
    border-radius:50%;
    border:3px solid black;
}

@keyframes rotate{
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}

}

.articleimg:hover{
    animation:rotate 1s ease;
}

.arttxt{
    font-family:Montserrat;
    text-align:justify;
}

#menubtn{
    background:white;
    color:#333;
    font-family:Montserrat;
    font-weight:bold;
    margin-left:20px;
    transition:0.3s ease;
}

#menubtn:hover{
    color:white;
    background-color:#333;
}

#menubox{
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    width:2000px;
    border-radius:8px;
    position:fixed;
    height:100vh;
    top:40px;
    left:10px;
    z-index:2000;
    transform:translateX(-2000px);
    transition:0.3s ease;
}

#menubox.active{
    transform:translateX(0);
}

.usefullinks{
    text-decoration:none;
    color:white;
    transition:0.3s ease;
}

.usefullinks:hover{
    color:#00a500;
    font-weight:bold;
}

.faqbody{
    background-color:#848484;
    background-size:cover;
    background-repeat:no-repeat;
    scroll-behavior:smooth;
}

.faqtitle{
    font-family:Poppins;
    font-weight:bold;
    color:white;
    text-align:center;
    margin-bottom:0;
    -webkit-text-stroke:2px black;
    
}

.faqsub{
    font-family:Poppins;
    font-weight:bold;
    color:white;
    text-align:center;
    font-size:20px;
    margin-top:0;
    
}

.faqtxt{
    font-family:Inter;
    color:white;
    margin:30px;
    text-align:justify;
}

.faqbox{
    display:inline-block;
    padding:auto;
    box-shadow:5px 5px 10px white;
    transition:0.5s ease;
}

.faqbox:hover{
    box-shadow:-5px -5px 10px white;
}