*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;

        }

        body{
            background: rgb(255, 248, 198);
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            background-clip:border-box ;
            font-family: bahnschrift;
            color: whitesmoke;
        }
        html,body{
            scroll-behavior: smooth;
        }
        hr{
            border: none;
            width: 120px;
            height: 5px;
            border-radius: 12px;
            margin-bottom: 20px;
            background: linear-gradient(234deg, #e73c7e, rgb(101, 17, 228));
          }
          .head-1{
            padding: 12px;
            padding-bottom: 50px;
            padding-top: 50px;
            background-color: rgb(0, 150, 173);
            mask: linear-gradient(black, transparent);

          }
          .head-1 h1{
            font-size: 3rem;
          }
          .head-1 p{
            font-size: 1.5rem;
            width: 100%;
            color: white;
          }
          header{
            width: 100%;
            height: 64vh;
            background-image: url(img/iam.gif);
            background-position: center;
            background-attachment: none;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            mask: linear-gradient(transparent, black);
          }

          .h{
            color: #e73c7e;
          }



        .all-cards{
            padding: 12px;
            border-radius: 20px;
            display: flex;
            scale: 1;
            opacity: 0;
            animation: id 1s linear forwards;
            animation-timeline: view();
            animation-range: entry 0%;
        }

        @keyframes id {
            from{
                opacity: 0;
                
            }
            to{
                opacity: 1;
                scale: 1;
            }
        }
        #all-cards{
            background-image: url(img/about-before-img.png);
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-size: 100%;
            width: 100%;
            height: 100vh;
        }
        .card-border{
            width: 100%;
            padding: 2px;
            border-radius: 20px;
            background: rgb(170, 113, 223);
            font-size: 90%;
            display: flex;
        }
        .card{
            width: 60%;
            padding: 12px;
            background: whitesmoke;
            border-radius: 20px 0 0 20px;
            display: block;
        }
        .card h2{
            font-size: 1.4rem;
        }
        /* str cards backgrounds */
        /* pro/dev/hack*/
        .screen1{
            width: 40%;
            background-image: url(img/pro-hack-dev-comp.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: none;
            border-radius: 0 20px 20px 0;
        }

        /*editing tools*/
        .screen2{
            width: 40%;
            background-image: url(img/photoshop-1-comp.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: none;
            border-radius: 0 20px 20px 0;
        }

        /*education*/
        .screen3{
            width: 40%;
            background-image: url(img/education-comp.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: none;
            border-radius: 0 20px 20px 0;
        }

        /*Surfing internet*/
        .screen4{
            width: 40%;
            background-image: url(img/internet-surfing-comp.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: none;
            border-radius: 0 20px 20px 0;
        }

        /*Certificates*/
        .screen5{
            width: 40%;
            background-image: url(img/certificates-comp.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: none;
            border-radius: 0 20px 20px 0;
        }

        /*dedign*/
        .screen6{
            width: 40%;
            background-image: url(img/icon-web.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: none;
            border-radius: 0 20px 20px 0;
        }

        /*bloggin*/
        .screen7{
            width: 40%;
            background-image: url(img/icon-web.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: none;
            border-radius: 0 20px 20px 0;
        }

        /*voicing*/
        .screen8{
            width: 40%;
            background-image: url(img/icon-web.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: none;
            border-radius: 0 20px 20px 0;
        }

        /* end cards backgrounds */
        
        h2, p {
            font-size:0.9rem;
            width: 100%;
            color: rgb(76, 72, 72);
            backdrop-filter: blur(8px);
            border-radius: 12px;
            padding: 12px;
        }
        .button-show{
        width: 70%;
            padding: 12px;
            margin-right: 30%;
            background: rgb(37, 142, 255);
            color: white;
            border: none;
            border-radius: 12px 0 0 12px;
            margin-top: 6%;
            box-shadow: 0 0 30px rgba(37, 142, 255, 0.537);
            transition: 0.3s;
        }

        .button-show:hover{
            box-shadow: 0 0 30px rgba(37, 142, 255, 0.878);
            cursor: pointer;
            text-shadow: 0 0 20px yellow, 0 0 30px yellow;
            width: 100%;
            margin-right: 0;
        }



        .class-show{
            display: none;
            position: fixed;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100vh;
            z-index: 9999999;
            background: black;
            justify-content: center;
            align-items: center;
        }
        .content{
            color: white;
            align-items: center;
            overflow: auto;
            justify-content: center;
            background-image: url(img/about-before-img.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
            height: 100vh;
            padding: 50px;
            padding-left: 120px;
            padding-right: 120px;
        }
        .full-lists{
            display: block;
        }
        .all-list{
            display: flex;

        }
        .list img{
            border-radius: 12px;

        }
        .list{
            backdrop-filter: blur(7px);
            border-radius: 12px;
            width: 20%;
            height: 20vh;
            margin-left: 10%;
        }
        .flowRight{
            animation: flowRight 0.6s ease-in;
        }
        @keyframes flowRight {
            from{
                scale: 1.9;
            }
            to{
                scale: 1;
            }
        }
        .flowRight{
            animation: flowRight 0.6s ease-in;
        }
        @keyframes flowRight {
            from{
                scale: 1.9;
            }
            to{
                scale: 1;
            }
        }



        .list img{
            width: 40%;
            background: transparent;
        }
        .list h3{
            color: aquamarine;
        }
        .list button{
            padding: 6px;
            padding-left: 12px;
            padding-right: 12px;
            margin-top: 5%;
            color: white;
            border: none;
            border-radius: 12px;
            background: linear-gradient(234deg, rgb(202, 9, 193), rgb(101, 17, 228), rgb(0, 128, 255));
            transition: 0.6s;
        }
        .list button:hover{
            box-shadow: 0 0 10px rgba(0, 0, 255, 0.623);
            background: rgb(10, 113, 215);
            transition: 0.6s;
        }
        #close{
            position: fixed;
            width: 100%;
            height: 10vh;
            bottom: 6%;
        }
        .close{
            padding: 12px;
            padding-left: 30px;
            padding-right: 30px;
            margin-left: -18%;
            margin-top: 4%;
            cursor: pointer;
            color: white;
            border: none;
            border-radius: 12px;
            background: #e73c7e;
            box-shadow:0 0 20px #e73c7e;
        }




.about-get{
    position: relative;
    margin-top: 10%;
    padding: 12px;
}
.about-get h5{
    color: rgba(25, 24, 24, 0.865);
}
.about-get .tit{
    color: rgb(0, 148, 99);
    font-size: 20px;
}


.footer{
            padding: 12px;
            padding-bottom: 50px;
            padding-top: 50px;
            background-color: rgb(0, 150, 173);
}
        @media screen and (max-width: 768px){
            header{
                width:100%;
                height: 20vh;
            }
            .card-border{
                width: 100%;
                margin-top: 3%;
            }
            .all-cards{
                display: block;
            }
            #dev{
                background-image: url(img/copied\ images/internet-surfing-compyyy.jpg);
            }
            #edit{
                background-image: url(img/copied\ images/photoshop-1-comp.jpg);
            }
            .content{
            padding-left: 10px;
            padding-right: 10px;
        }
        .list{
            margin-left: 2.5%;
            width: 30%;
            height: 14vh;
        }
        .list button{
            margin-top: 0%;
        }
        .close{
            margin-left: 0%;
        }
        }