:root{--background-color:#5eacb3;--background-image:url(cover.261b3610bc221c41b6bc.png);--gradient-color-1:#ef9889;--gradient-color-2:hsla(0,0%,100%,.2);--gradient-color-3:hsla(0,0%,100%,.15);--gradient-color-4:hsla(0,0%,100%,.1);--gradient-color-5:hsla(0,0%,100%,.4);--text-white:#fff;--text-color-1:#544d56;--text-color-2:#e2d8d0;--link-color-default:var(--text-color-2);--link-color-visited:var(--text-color-2);--link-color-hover:var(--text-color-2);--link-color-active:var(--text-color-2)}body,html{margin:0;height:100%;width:100%}body{background-color:var(--background-color);background-image:radial-gradient(var(--gradient-color-1),var(--gradient-color-2) 2px,transparent 40px),radial-gradient(var(--gradient-color-1),var(--gradient-color-3) 1px,transparent 30px),radial-gradient(var(--gradient-color-1),var(--gradient-color-4) 2px,transparent 40px),radial-gradient(var(--gradient-color-5),var(--gradient-color-4) 2px,transparent 30px);background-size:550px 550px,350px 350px,250px 250px,150px 150px;background-position:0 0,40px 60px,130px 270px,70px 100px}#container{overflow-y:hidden;width:100%}@-webkit-keyframes resizeHeight{0%{height:60%}to{height:20%}}@keyframes resizeHeight{0%{height:60%}to{height:20%}}#profile-card{position:absolute;top:0;width:100%;background-color:var(--link-color-default);background-image:var(--background-image);background-size:cover;background-repeat:no-repeat;background-position:50%;-webkit-animation:resizeHeight 3s forwards;animation:resizeHeight 3s forwards /* Adjust the duration as needed */}#profile-pic{border-radius:130px;width:130px;height:130px;margin:auto;background-size:cover;background-image:url(me.1fb754c5ff88636ce6a1.jpg);-webkit-animation:rotate 2s linear forwards;animation:rotate 2s linear forwards}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(120deg);transform:rotate(120deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{0%{-webkit-transform:rotate(120deg);transform:rotate(120deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}#profile-name{width:150px;color:var(--text-color-1);font-size:17px;font-family:Playfair Display,serif;vertical-align:middle}#profile-name,#quote{text-align:center;margin:auto}#quote{color:var(--text-color-2);font-size:15px;font-family:Tajawal,sans-serif}.grid-container{display:grid;grid-template-columns:auto auto auto;padding:10px}.grid-item{padding:20px;font-size:30px;text-align:center}.icon{width:60px;height:60px}#app-root{width:100%;height:100%}

/************************************************** App **********************************************/#app{margin-top:155px}

/*  should cover all mobile devices*/@media (min-width:0px) and (max-width:900px){#app{margin-top:160px}}

/* iPads */@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait){#app{margin-top:300px}}

/* Desktop*/@media (min-width:925px) and (max-width:2048px){.icon{width:100px;height:100px}#app{margin-top:220px}}

/************************************************** App **********************************************/

/* unvisited link */a:link{color:var(--link-color-default)}

/* visited link */a:link,a:visited{text-decoration:none}a:visited{color:var(--link-color-visited)}

/* mouse over link */a:hover{color:var(--link-color-hover)}

/* selected link */a:active,a:hover{text-decoration:none}a:active{color:var(--link-color-active)}.list-container{color:var(--text-color-2);margin:0 auto;margin-top:200px}#block_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:10px}.list-image-container{width:20%;display:inline}.list-content{width:60%;font-size:13px;display:inline;text-decoration:none}.list-item{height:auto;width:98%;color:var(--text-color-2);margin:auto;margin-bottom:20px}.list-heading{font-weight:600;font-size:14px}.list-image{width:100px;height:100px;border-radius:20px}.component-footer{margin:0 auto;left:0;bottom:0;width:100%;text-align:center;padding-top:15px}

/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */@media (min-width:1281px){.list-container{margin-top:300px}.list-item{width:60%;margin:auto}.list-image-container{width:15%;display:inline}.list-content{width:45%;font-size:16px}.list-image{width:100px;height:100px;border-radius:25px}.list-heading[_ngcontent-c1]{font-size:18px;padding-bottom:10px}}

/* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px */@media (min-width:1025px) and (max-width:1280px){.list-container{margin-top:300px}.list-content{width:75%;font-size:20px}.list-item{width:70%;margin:auto}.list-image{width:100px;height:100px}.list-heading[_ngcontent-c1]{font-size:20px}}

/* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px */@media (min-width:768px) and (max-width:1024px){.list-container{margin-top:300px}.list-content{width:60%;font-size:20px}.list-item{width:75%;margin:auto}.list-image{width:100px;height:100px;border-radius:20px}.list-heading[_ngcontent-c1]{font-size:20px}}

/* ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px */@media (min-width:568px) and (max-width:768px){.list-container{margin-top:-20px}.list-content{width:55%;font-size:18px}.list-item{width:90%;margin:auto;padding-top:33px}.list-image{width:100px;height:100px}.list-heading[_ngcontent-c1]{font-size:20px}}

/* ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px */@media (min-width:320px) and (max-width:568px){.list-container[_ngcontent-c1]{margin-top:180px}.list-content{width:60%;font-size:12px;padding-top:8px}.list-item{margin-bottom:10px}.list-image{width:80px;height:80px;border-radius:20px}.list-heading[_ngcontent-c1]{font-size:13px}.list-image-container{width:35%}}