:root{
    animation: boot 0.8s;
    --main_color: rgb(251, 251, 251);
    --back_color: rgb(255, 163, 163);
}
@keyframes boot{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.main h1{
    position: absolute;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: aqua;
    font-weight: bolder;
    color:black;
    padding: 5px;
    width: 250px;
    box-sizing: border-box;
    box-shadow: 2px 2px 2px white;
}
@media screen and (min-width:647px){
    .menu{
        width: 400px;
        margin: auto;
        background-color: blue;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-top:-80px;
    }
    .menu button{
        transition: 0.6s;
        padding: 10px;
        width: 120px;
        color: rgb(31, 88, 88);
        background-color: rgb(255, 255, 255);
        font-weight: bolder;
        border-color: rgb(0, 0, 0);
        border-radius: 10px;
        box-shadow: 2px 2px 2px rgb(146, 146, 146);
    }   
    .menu button:hover{
        background-color: black;
        color: aliceblue;
        transition: 0.6s;
        box-shadow: 2px 2px 2px white;
    }
}
#main_body{
    justify-content: center;
    align-items: center;
    margin:auto;
    background-color: rgb(255, 255, 255);
    width: 80%;
}
@media screen and (min-width:648px){
    .main_main{
        width: 650px;
        height: 350px;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin:auto;
    }
    .main img{
        width: 650px;
        height: 350px;
        justify-content: center;
        align-items: center;
        justify-items: center;
        margin: auto;
        box-sizing: border-box;
        box-shadow: 10px 10px 10px rgb(150, 150, 150);
        overflow: hidden;
    }
    #m_head{
        height: 370px;
        width: 100%;
        background-color: rgb(255, 255, 255);
        overflow: hidden;
    }
    #cimg1,#cimg2,#cimg3{
        justify-content: center;
        align-items: center;
        width: 300px;
        margin-left: 0px;
        display: flex;
        padding: 0;
        border-radius: 10px;
        background-color: rgb(231, 231, 231);
    }
    #content,#content1,#content2{
        display: flex;
        margin-top: 20px;
        background-color:var(--text-background) ;
        justify-content: left;
        align-items: center;
        box-sizing: border-box;
        box-shadow: 0.1em 0.1em 0.1em 0.1em gray;
        border-bottom: 2px solid white;
        text-align: left;
        min-width: 300px;
        padding: 10px;
        border-radius: 10px;
        margin-left: 0px;
    }
    #content1 h2,#content2 h2{
        margin-left: 12px;
    }
    #team{
        display: flex;
    }
    #teams_form_main{
        min-width: 80%;
    }
    .aug{
        min-width: 100%;
        justify-content: left;
        align-items: center;
        text-align: left;
    }
    .aug h2{
        justify-content: left;
        align-items: center;
        text-align: left;
        width: 100%;
    }
    #more_arduino_mark{
        max-width: 100%;
        display: none;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
        text-align: left;
        margin-inline: 20px;
        box-shadow:  0em 0.3em 0.3em gray;
        background-color: var(--head-color);
        border-radius: 20px;
    }
    .menu2{
        display: none;
    }
    .aug1 .img11{
        width: 300px;
        margin-left: 15px;
        border-radius: 10px;
    }
    .fa-globe{
        scale: 150%;
        height: fit-content;
    }
    .fa-globe:hover{
        scale: 170%;
    }
    #translateee h5{
        font-size: 10px;
    }
}
@media screen and (max-width:647px){
    .main_main{
        width: 345px;
        height: 200px;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin:auto;
    }
    .main img{
        text-align: center;
        width:338px ;
        height: 200px;
        justify-content: center;
        align-items: center;
        justify-items: center;
        margin: auto;
        box-sizing: border-box;
        box-shadow: 10px 10px 10px rgb(150, 150, 150);
        overflow: hidden;
    }
    .main_main h3{
        border-radius: 5px;
        padding-inline: 15px;
        position:relative;
        text-align: center;
        justify-content: center;
        align-items: center;
        margin-inline: auto;
        width: 150px;
        box-sizing: border-box;
        font-weight: bolder;
        margin-top: -40px;
        background-color: aqua;
        color: rgb(0, 0, 0);
    }
    #cimg1,#cimg2,#cimg3{
        margin: 30px;
        justify-content: center;
        align-items: center;
        width: 80%;
        display: grid;
        padding: auto;
        background-color: rgb(231, 231, 231);
        border-radius: 10px;
    }
    #content,#content1,#content2{
        display: grid;
        margin-top: 20px;
        background-color:var(--text-background) ;
        justify-content: center;
        align-items: center;
        box-shadow: 0.1em 0.1em 0.1em 0.1em gray;
        border-bottom: 1px solid white;
        text-align: left;
        min-width: 85%;
        padding: 10px;
        border-radius: 10px;
    }
    #team{
        display: grid;
    }
    #teams_form_main{
        min-width: 80%;
    }
    .aug{
        min-width:100%;
        justify-content: center;
        align-items: center;
        text-align: left;
    }
    .aug h2 a{
        justify-content:center;
        align-items: center;
        text-align: left;
        width: 100%;
    }
    #more{
        width: 80%;
    }
    #more_arduino_mark{
        max-width: 90%;
        display: none;
        justify-content: left;
        align-items: center;
        margin-top: 30px;
        text-align: left;
        margin-inline: auto;
        box-shadow:  0em 0.3em 0.3em gray;
        background-color: var(--head-color);
        border-radius: 20px;
    }
    .menu{
        display: none;
    }
    .menu2{
        height: 80px;
        width: 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: azure;
        position: sticky;
        position: -webkit-sticky;
        bottom: 0px;

    }
    .menu2 span{
        justify-content: center;
        align-items: center;
        display: inline-flex;
        margin: auto;
        font-size: 5em;
    }
    .aug1 .img11{
        width: 85px;
        height: 120px;
        margin-left: 10px;
        border-radius: 10px;
    }
    .fa-globe{
        scale: 120%;
    }
    .fa-globe:hover{
        scale: 130%;
    }
    #translateee h5{
        font-size: 8px;
    }
}
.material-symbols-outlined{
    cursor: pointer;
    transition: 0.6s;
    background-color: azure;
    color: black;
}
.material-symbols-outlined:hover{
    background-color: rgb(0, 0, 0);
    transition: 0.6s;
    color: azure;
}
.social{
    display: block;
    border: 1px solid gray;
    border-radius: 10px;
    box-shadow: 0em 0.3em 0.3em gray; 
    justify-content:left;
    align-items: center;
    text-align: left;
    margin: 30px 5px 5px;
    height: fit-content;
    color: aliceblue;
    background-color: var(--head-color)
}
.social_all{
    text-align: center;
    align-items: center;
    justify-content: center;
}
@media screen and (min-width:766px){
    .social h2{
        font-size: 1.2em;
        width: fit-content;
        position: absolute;
        margin-top: 30px;
        margin-left: 40px;
        color: black;
    }
}
@media screen and (max-width:765px){
    .social h2{
        font-size: 1.2em;
        position: relative;
        margin-top: 10px;
        justify-content: center;
        text-align: center;
        align-items: center;
        color: black;
    } 
}
.read{
    margin-top: 20px;
    justify-content: center;
    width: 100px;
    margin-inline: auto;
}
#read_more3{
    transition: 0.6s;
    padding: 5px;
    width: 120px;
    color: rgb(31, 88, 88);
    background-color: rgb(255, 255, 255);
    font-weight: bolder;
    border-color: rgb(0, 0, 0);
    border-radius: 10px;
    box-shadow: 2px 2px 2px rgb(146, 146, 146);
}
#read_more3:hover{
    background-color: black;
    color: aliceblue;
    transition: 0.6s;
    box-shadow: 2px 2px 2px white;
}
.fa {
    padding: 20px;
    font-size: 30px;
    width: 35px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
  }
  
.fa:hover {
      opacity: 0.7;
      scale: 110%;
}
.fa-youtube {
    background: #bb0000;
    color: white;
}
.fa-facebook {
    background: #3B5998;
    color: white;
}
.fa-instagram {
    background: #125688;
    color: white;
}
#translateee{
    cursor: pointer;
}
#translateee i:hover{
   /* transform: rotateZ(90deg)*/
   animation: trans 0.8s;
}
@keyframes trans {
    0% {rotate:0deg;}
    100% {rotate: 90deg;}
}