body {
    background-color: #333;
    color: rgb(255, 244, 230);
}
@media (max-width:1366px) and (min-width:1024px){
    .welcome {
        font-size: 300%;
    }
    .welcfiel {
        width: 50%;
    }
    .download {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        background-color: rgb(8, 109, 241);
        height: 50px;
        font-size: 150%;
        border-radius: 20px;
        margin-bottom: 10px;
        cursor: pointer;
        box-shadow: 1px 1px 4px rgb(161, 245, 7);
        transition: 0.15s;
    }
    .download:hover {
        background-color: rgb(161, 245, 7);
        opacity: 0.6;
        box-shadow: 1px 1px 8px rgb(8, 50, 235);
        transform: scale(1.05);
    }
    .download:active {
        opacity: 0.4;
        transform: scale(0.95);
    }
    a {
        color: #03c6d4;
    }
    a:visited {
        color: rgb(65, 248, 10);
    }
    a:hover , a:active{
        color: aliceblue;
    }
    .iconst {
        border-radius: 30px;
        width: 35%;
        height: 430px;
        margin-left: 60%;
        margin-top: -420px;
        cursor: pointer;
        transition: opacity 0.4s;
    }
    .iconst:hover {
        opacity: 0.6;
    }
    .ourapps {
        font-size: 220%;
        font-weight: bold;
    }
    .CryptGuard,.NoteMaster,.SpamStorm {
        font-size: 150%;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .logfiel {
        border-radius: 20px;
        height: 80px;
        margin-bottom: 10px;
    }
    .loginlab {
        font-size: 300%;
    }
    .help {
        font-size: 250%;
    }
    .community {
        font-size: 200%;
    }
    .mm {
        border-radius: 20px;
        margin-top: 20px;
    }
    .login {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        background-color: #07f2f2;
        border-radius: 30px;
        cursor: pointer;
        margin-left: 1%;
        box-shadow: 1px 1px 5px #0786ed;
        width: 22%;
        height: 60px;
        font-size: 240%;
        user-select: none;
        transition: 0.2s;
    }
    .login:hover {
        opacity: 0.6;
        background-color: #fff;
        border-width: 3px;
        border-color: lightskyblue;
        transform: scale(1.05);
        box-shadow: 1px 1px 8px orangered;
        
    }
    .login:active {
        opacity: 0.6;
        background-color: #fff;
        border-width: 3px;
        border-color: lightskyblue;
        transform: scale(0.9);
        box-shadow: 0px 0px 8px greenyellow;
    }
    .sigfiel {
        border-radius: 20px;
        height: 80px;
        margin-top: 10px;
    }.siglab {
        font-size: 300%;
    }
    .signup{
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        background-color: #f80606;
        border-radius: 30px;
        cursor: pointer;
        margin-top: 10px;
        margin-bottom: 25px;
        margin-left: 12%;
        box-shadow: 1px 1px 5px orangered;
        width: 22%;
        height: 60px;
        font-size: 240%;
        user-select: none;
        transition: 0.2s;
    }
    .signup:hover {
        opacity: 0.6;
        background-color: #fff;
        border-width: 3px;
        border-color: lightskyblue;
        transform: scale(1.05);
        box-shadow: 1px 1px 8px orangered;
    }
    .signup:active {
        opacity: 0.6;
        background-color: #fff;
        border-width: 3px;
        border-color: lightskyblue;
        transform: scale(0.9);
        box-shadow: 0px 0px 8px greenyellow;
    }
    .back_top {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        background-image: url(../Images/back-to-top.png);
        width: 55px;
        height: 55px;
        margin-left: 45%;
        margin-top: 20px;
        border-radius: 15px;
        cursor: pointer;
        transition: opacity 0.5s;
    }
    .back_top:hover {
        opacity: 0.7;
    }
    mark {
        background-color: #03c6d4;
    }
    summary {
        cursor: pointer;
    }
    .copy {
        font-size: 200%;
        margin-left: 28%;
    }
    .mail,.tel {
        font-size: 220%;
    }
    .foot {
        border-radius: 20px;
        margin-top: 30px;
    }
}



@media (max-width: 852px) and (min-width:400px) {
    .welcome {
        font-size: 140%;
    }
    .welcfiel {
        width: 35%;
        height: 410px;
    }
    .download {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        background-color: rgb(8, 109, 241);
        height: 50px;
        width: 70%;
        font-size: 120%;
        border-radius: 20px;
        margin-bottom: 10px;
        
        box-shadow: 1px 1px 4px rgb(161, 245, 7);
        transition: 0.15s;
    }
    .download:active {
        transform: scale(0.95);
        opacity: 0.4;
    }
    a {
        color: #03c6d4;
    }
    a:visited {
        color: rgb(65, 248, 10);
    }
    a:hover , a:active{
        color: aliceblue;
    }
    .iconst {
        border-radius: 20px;
        width: 40%;
        height: 300px;
        margin-left: 55%;
        margin-top: -300px;
        transition: opacity 0.4s;
    }
    .iconst:active {
        opacity: 0.6;
    }
    .ourapps {
        font-size: 180%;
        font-weight: bold;
    }
    .CryptGuard,.NoteMaster,.SpamStorm {
        font-size: 150%;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .logfiel {
        border-radius: 20px;
        height: 70px;
        margin-bottom: 10px;
    }
    .loginlab {
        font-size: 100%;
    }
    .help {
        font-size: 200%;
    }
    .community {
        font-size: 200%;
    }
    .mm {
        border-radius: 20px;
        margin-top: 20px;
    }
    .login {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        background-color: #07f2f2;
        border-radius: 25px;
        margin-left: 0.1%;
        box-shadow: 1px 1px 5px #0786ed;
        width: 18%;
        height: 58px;
        font-size: 105%;
        transition: 0.2s;
    }
    .login:active {
        opacity: 0.6;
        background-color: #fff;
        border-width: 3px;
        border-color: lightskyblue;
        transform: scale(0.9);
        box-shadow: 0px 0px 8px greenyellow;
    }
    .sigfiel {
        border-radius: 20px;
        height: 70px;
        margin-top: 10px;
    }.siglab {
        font-size: 110%;
    }
    .signup{
        /* To remember:padding-top left.... are used to change space between the element inside the button and the border of the button , use vertical align:top to align buttons based on that not on their texts ,font-family:Arial, text-align for aligning , in html use span on a text part to only target it with it's own class
        display:inline-block so that the element will only take as much space as required , display:block so that the element takes the whole line*/
        background-color: #f80606;
        border-radius: 30px;
        
        margin-top: 10px;
        margin-bottom: 25px;
        margin-left: 2%;
        box-shadow: 1px 1px 5px orangered;
        width: 20%;
        height: 58px;
        font-size: 105%;
        user-select: none;
        transition:  0.2s;
    }
    .signup:active {
        opacity: 0.6;
        background-color: #fff;
        border-width: 3px;
        border-color: lightskyblue;
        box-shadow: 0px 0px 8px greenyellow;
        transform: scale(0.9);
    }
    .back_top {
        background-image: url(../Images/back-to-top.png);
        width: 55px;
        height: 55px;
        margin-left: 45%;
        margin-top: 20px;
        border-radius: 15px;
        
        transition: opacity 0.5s;
    }
    .back_top:active {
        opacity: 0.7;
    }
    mark {
        background-color: #03c6d4;
    }
    .copy {
        font-size: 180%;
        margin-left: 5%;
    }
    .mail,.tel {
        font-size: 180%;
    }
    .foot {
        border-radius: 20px;
        margin-top: 30px;
    }
}






@media (min-width:853px) and (max-width:1023px) {
    .welcome {
        font-size: 250%;
    }
    .welcfiel {
        width: 50%;
    }
    .download {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        background-color: rgb(8, 109, 241);
        height: 50px;
        font-size: 150%;
        border-radius: 20px;
        margin-bottom: 10px;
        cursor: pointer;
        box-shadow: 1px 1px 4px rgb(161, 245, 7);
        transition: 0.15s;
    }
    .download:active {
        transform: scale(0.95);
        opacity: 0.4;
    }
    a {
        color: #03c6d4;
    }
    a:visited {
        color: rgb(65, 248, 10);
    }
    a:hover , a:active{
        color: aliceblue;
    }
    .iconst {
        border-radius: 25px;
        width: 35%;
        height: 420px;
        margin-left: 60%;
        margin-top: -360px;
        cursor: pointer;
        transition: opacity 0.4s;
    }
    .ourapps {
        font-size: 220%;
        font-weight: bold;
    }
    .CryptGuard,.NoteMaster,.SpamStorm {
        font-size: 150%;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .logfiel {
        border-radius: 20px;
        height: 70px;
        margin-bottom: 10px;
    }
    .loginlab {
        font-size: 220%;
    }
    .help {
        font-size: 250%;
    }
    .community {
        font-size: 200%;
    }
    .mm {
        border-radius: 20px;
        margin-top: 20px;
    }
    .login {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        background-color: #07f2f2;
        border-radius: 30px;
        cursor: pointer;
        margin-left: 2%;
        box-shadow: 1px 1px 5px #0786ed;
        width: 20%;
        height: 58px;
        font-size: 200%;
        transition: 0.2s;
    }
    .login:active {
        opacity: 0.6;
        background-color: #fff;
        border-width: 3px;
        border-color: lightskyblue;
        box-shadow: 0px 0px 8px greenyellow;
        transform: scale(0.95);
    }
    .sigfiel {
        border-radius: 20px;
        height: 70px;
        margin-top: 10px;
    }.siglab {
        font-size: 220%;
    }
    .signup{
        background-color: #f80606;
        border-radius: 30px;
        cursor: pointer;
        margin-top: 10px;
        margin-bottom: 25px;
        margin-left: 15%;
        box-shadow: 1px 1px 5px orangered;
        width: 20%;
        height: 58px;
        font-size: 200%;
        user-select: none;
        transition:  0.2s;
    }
    .signup:active {
        opacity: 0.6;
        background-color: #fff;
        border-width: 3px;
        border-color: lightskyblue;
        transform: scale(0.9);
        box-shadow: 0px 0px 8px greenyellow;
    }
    .back_top {
        background-image: url(../Images/back-to-top.png);
        width: 55px;
        height: 55px;
        margin-left: 45%;
        margin-top: 20px;
        border-radius: 15px;
        cursor: pointer;
        transition: opacity 0.5s;
    }
    .back_top:active {
        opacity: 0.7;
    }
    mark {
        background-color: #03c6d4;
    }
    summary {
        cursor: pointer;
    }
    .copy {
        font-size: 200%;
        margin-left: 28%;
    }
    .mail,.tel {
        font-size: 220%;
    }
    .foot {
        border-radius: 20px;
        margin-top: 30px;
    }
}
@media (max-width: 400px) {
    .welcome {
        font-size: 100%;
    }
    .welcfiel {
        width: 40%;
    }
    .download {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        background-color: rgb(8, 109, 241);
        height: 45px;
        width: 95%;
        font-size: 90%;
        border-radius: 20px;
        margin-bottom: 10px;
    
        box-shadow: 1px 1px 4px rgb(161, 245, 7);
        transition: 0.15s;
    }
    .download:active {
        transform: scale(0.95);
        opacity: 0.4;
    }
    a {
        color: #03c6d4;
    }
    a:visited {
        color: rgb(65, 248, 10);
    }
    a:hover, a:active {
        color: aliceblue;
    }
    .iconst {
        border-radius: 12px;
        width: 40%;
        height: 250px;
        margin-left: 60%;
        margin-top: -280px;
        transition: opacity 0.4s;
    }
    .iconst:active {
        opacity: 0.6;
    }
    .ourapps {
        font-size: 150%;
        font-weight: bold;
    }
    .CryptGuard, .NoteMaster, .SpamStorm {
        font-size: 130%;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .logfiel {
        border-radius: 20px;
        height: 60px;
        margin-bottom: 10px;
    }
    .loginlab {
        font-size: 70%;
    }
    .help {
        font-size: 170%;
    }
    .community {
        font-size: 170%;
    }
    .mm {
        border-radius: 20px;
        margin-top: 20px;
    }
    .login {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        background-color: #07f2f2;
        border-radius: 25px;
        margin-left: 0%;
        box-shadow: 1px 1px 5px #0786ed;
        width: 22%;
        height: 50px;
        font-size: 60%;
        transition: 0.2s;
        
    }
    .login:active {
        opacity: 0.6;
        background-color: #fff;
        border-width: 3px;
        border-color: lightskyblue;
        box-shadow: 0px 0px 8px greenyellow;
        transform: scale(0.95);
    }
    .sigfiel {
        border-radius: 20px;
        height: 60px;
        margin-top: 10px;
    }
    .siglab {
        font-size: 80%;
    }
    .signup {
        background-color: #f80606;
        border-radius: 30px;
        
        margin-top: 10px;
        margin-bottom: 25px;
        margin-left: 0%;
        box-shadow: 1px 1px 5px orangered;
        width: 28%;
        height: 50px;
        font-size: 70%;
        user-select: none;
        transition:  0.2s;
    }
    .signup:active {
        opacity: 0.6;
        background-color: #fff;
        border-width: 3px;
        border-color: lightskyblue;
        box-shadow: 0px 0px 8px greenyellow;
        transform: scale(0.95);
    }
    .back_top {
        background-image: url(../Images/back-to-top.png);
        width: 45px;
        height: 45px;
        margin-left: 40%;
        margin-top: 20px;
        border-radius: 10px;
        
        transition: opacity 0.5s;
    }
    .back_top:active {
        opacity: 0.7;
    }
    mark {
        background-color: #03c6d4;
    }
    .copy {
        font-size: 150%;
        margin-left: 5%;
    }
    .mail, .tel {
        font-size: 150%;
    }
    .foot {
        border-radius: 20px;
        margin-top: 30px;
    }
}
@media (min-width: 1367px) {
    .welcfiel {
        width: 55%;
        height: 540px;
        font-size: 200%;
    }
    .download {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        background-color: rgb(8, 109, 241);
        height: 45px;
        font-size: 130%;
        border-radius: 20px;
        margin-bottom: 10px;
        cursor: pointer;
        box-shadow: 1px 1px 4px rgb(161, 245, 7);
        transition: 0.15s;
    }
    .download:hover {
        background-color: rgb(161, 245, 7);
        opacity: 0.6;
        box-shadow: 1px 1px 8px rgb(8, 50, 235);
        transform: scale(1.05);
    }
    .download:active {
        opacity: 0.4;
        transform: scale(0.95);
    }
    a {
        color: #03c6d4;
    }
    a:visited {
        color: rgb(65, 248, 10);
    }
    a:hover, a:active {
        color: aliceblue;
    }
    .iconst {
        border-radius: 32px;
        width: 40%;
        height: 400px;
        margin-left: 60%;
        margin-top: -22%;
        cursor: pointer;
        transition: opacity 0.4s;
    }
    .iconst:hover {
        opacity: 0.6;
    }
    .ourapps {
        font-size: 200%;
        font-weight: bold;
    }
    .CryptGuard, .NoteMaster, .SpamStorm {
        font-size: 140%;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .logfiel {
        border-radius: 20px;
        height: 70px;
        margin-bottom: 10px;
    }
    .loginlab {
        font-size: 250%;
    }
    .help {
        font-size: 220%;
    }
    .community {
        font-size: 180%;
    }
    .mm {
        border-radius: 20px;
        margin-top: 20px;
    }
    .login {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        background-color: #07f2f2;
        border-radius: 30px;
        cursor: pointer;
        margin-left: 1%;
        box-shadow: 1px 1px 5px #0786ed;
        width: 25%;
        height: 55px;
        font-size: 220%;
        transition: 0.2s;
    }
    .login:hover {
        opacity: 0.6;
        background-color: #fff;
        border-width: 3px;
        border-color: lightskyblue;
        box-shadow: 1px 1px 8px orangered;
        transform: scale(1.05);
    }
    .login:active {
        opacity: 0.6;
        background-color: #fff;
        border-width: 3px;
        border-color: lightskyblue;
        box-shadow: 0px 0px 8px greenyellow;
        transform: scale(0.9);
    }
    .sigfiel {
        border-radius: 20px;
        height: 70px;
        margin-top: 10px;
    }
    .siglab {
        font-size: 250%;
    }
    .signup {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        background-color: #f80606;
        border-radius: 30px;
        cursor: pointer;
        margin-top: 10px;
        margin-bottom: 25px;
        margin-left: 10%;
        box-shadow: 1px 1px 5px orangered;
        width: 25%;
        height: 55px;
        font-size: 220%;
        transition: 0.2s;
    }
    .signup:hover {
        opacity: 0.6;
        background-color: #fff;
        border-width: 3px;
        border-color: lightskyblue;
        box-shadow: 1px 1px 8px orangered;
        transform: scale(1.05);
    }
    .signup:active {
        opacity: 0.6;
        background-color: #fff;
        border-width: 3px;
        border-color: lightskyblue;
        box-shadow: 0px 0px 8px greenyellow;
        transform: scale(0.9);
    }
    .back_top {
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        background-image: url(../Images/back-to-top.png);
        width: 50px;
        height: 50px;
        margin-left: 44%;
        margin-top: 20px;
        border-radius: 15px;
        cursor: pointer;
        transition: opacity 0.5s;
    }
    .back_top:hover {
        opacity: 0.7;
    }
    mark {
        background-color: #03c6d4;
    }
    summary {
        cursor: pointer;
    }
    .copy {
        font-size: 180%;
        margin-left: 25%;
    }
    .mail, .tel {
        font-size: 200%;
    }
    .foot {
        border-radius: 20px;
        margin-top: 30px;
    }
}