/*---ANIMATIONS---*/
@keyframes  pulse/*Makes the object change size in a pulsating motion*/
{
    0%, 100%{transform: scale(0.95);}
    50%{transform: scale(1);}
    /*animation: pulse 2s ease-in-out infinite;*/
}
@keyframes bounce
{
    0%, 100%{transform: translateY(0);}
    50%{transform: translateY(-10px);}
    /*animation: bounce 2s ease-in-out infinite;*/
}
@keyframes revolution
{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
    /*animation: revolution 2s infinite linear;*/
}
@keyframes disp-rev
{
    0%{transform: rotateZ(0deg);}
    100%{transform: rotateZ(360deg);}
    /*animation: revolution 2s infinite linear;*/
}
@keyframes antirevolution
{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(-360deg);}
    /*animation: antirevolution 2s infinite linear;*/
}
@keyframes slidein
{
    0%{transform: translateX(-100%);}
    100%{transform: translateX(0);}
    /*animation: slidein 2s forwards infinite;*/
}
@keyframes slideup
{
    0%{transform: translateY(-100%);}
    100%{transform: translateY(0);}
    /*animation: slidein 2s forwards infinite;*/
}
@keyframes popslideup
{
    0%{transform: translateY(-100%);}
    100%{transform: translateY(0);}
    /*animation: slidein 2s forwards infinite;*/
}
@keyframes slideleft /*Slides In from the far Left*/
{
    0%{transform: translateX(-100%);}
    100%{transform: translateX(0);}
}
@keyframes slideright
{
    0%{transform: translateX(100%);}
    100%{transform: translateX(0);}
}
@keyframes zoomfade
{
    0%
    {
        transform: scale(0.001);
        opacity: 0;
    }
    50%
    {
        opacity: 0.5;
    }
    100%
    {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes downbounce
{
    0%{transform: translateY(-100%);}
    60%{transform: translateY(10%);}
    80%{transform: translateY(-10%);}
    100%{transform: translateY(0);}
}
@keyframes slidedown
{
    0%{transform: translateY(-150%);}
    100%{transform: translateY(0);}
}
@keyframes opening
{
    0%
    {
        z-index: 300;
    }
    75%
    {
        z-index:300;
        transform: translateY(0);
    }
    100%
    {
        transform: translateY(-150dvh);
    }
}

@keyframes bg-switch
{
    0%
    {
        top: 0;
        left: 0;    
        opacity: 1;
        z-index: 500;
        width: 100dvw;
        height: 100dvh;
        position: absolute;
        background:var(--deg45-blue-gradient);
    }
    70%
    {
        position: absolute;
        top: 35;
        left: 35;
        width: 30%;
    }
    71%
    {
        background: none;
    }
    100%
    {    
        background: none;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        position: absolute;
        z-index: 0;
    }
}


/*---Defining Constants---*/
:root
{
    --linear-blue-gradient: linear-gradient(to right, var(--dark-blue), var(--mid-blue), var(--dark-blue));
    --deg45-blue-gradient: linear-gradient(45deg, var(--dark-blue), var(--mid-blue), var(--dark-blue));
    --linear-gold-gradient: linear-gradient(to right, var(--dark-gold), var(--gold), var(--dark-gold));
    --deg45-gold-gradient: linear-gradient(45deg, var(--dark-gold), var(--gold), var(--dark-gold));
    --gold-grad: linear-gradient(to right,rgb(119, 101, 0), gold, rgb(119, 101, 0));
    --dark-blue: rgb(0, 0, 35);
    --mid-blue: rgb(25,25,112);
    --light-blue: rgb(38, 0, 255);
    --font-1: Arial, Helvetica, sans-serif;
    --bio-img: url("bio background.png");
    --banner-img: url("banner.gif");
    --gold: rgb(190, 180, 70);
    --dark-gold: rgb(85, 81, 4);
    --darker-gold: rgb(54, 51, 0);
    --intro-height: 10vh;
    --font-1-B: 'Bahnschrift';
    --font-2-I: 'Impact';
    --font-3-C: 'Consolas';
    --font-4-A: 'Acute';
    --center-size: 140px;
    --sat-size:   80px;
    --radius:     200px;
    --gap:        16px;
}
@font-face 
{
    font-family: Acute;
    src: url(Fonts/Black\ Acute.ttf);
}
@font-face 
{
    font-family: Bukhari;
    src: url(Fonts/BukhariScript-lemD.ttf);
}
@font-face 
{
    font-family: Blueridge;
    src: url(Fonts/Blue\ Ridge.otf);
}
@font-face 
{
    font-family: Clickuper;
    src: url(Fonts/Clickuper.ttf);
}
@font-face 
{
    font-family: Cambridge;
    src: url(Fonts/Cambridge-owYqx.otf);
}
@font-face 
{
    font-family: Fontania;
    src: url(Fonts/Fontania-MjXr.ttf);
}
@font-face 
{
    font-family: Fugazone;
    src: url(Fonts/FugazOne-M8jn.ttf);
}
@font-face 
{
    font-family: August;
    src: url(Fonts/HeyAugust-qZ73q.otf);
}
@font-face 
{
    font-family: Excluded;
    src: url(Fonts/Excluded-z8XrX.ttf);
}
@font-face 
{
    font-family: Pariscafe;
    src: url(Fonts/CafedeparisScript-8M190.ttf);
}
@font-face 
{
    font-family: Gebody;
    src: url(Fonts/GeBody-x0zj.ttf);
}
@font-face 
{
    font-family: Digital;
    src: url(Fonts/Digitalt-04no.ttf);
}
@font-face 
{
    font-family: Grawust;
    src: url(Fonts/Grawust-1GM4j.ttf);
}
@font-face 
{
    font-family: Graduate;
    src: url(Fonts/Graduate-9WoB.ttf);
}
@font-face 
{
    font-family: Gomarice;
    src: url(Fonts/gomarice_showa-source-curry.ttf);
}
@font-face 
{
    font-family: Gomarice naname;
    src: url(Fonts/gomarice_naname_goma.ttf);
}
@font-face 
{
    font-family: Gladifi;
    src: url(Fonts/Gladifilthefte-2Dve.ttf);
}
@font-face 
{
    font-family: Geometry;
    src: url(Fonts/GeometrysoftproBoldn-wJp2.otf);
}
@font-face 
{
    font-family: Garineldo;
    src: url(Fonts/Garineldo-MJqY.otf);
}
@font-face 
{
    font-family: Didact;
    src: url(Fonts/Didactgothic-23ev.ttf);
}
@font-face 
{
    font-family: Humanoid;
    src: url(Fonts/Humanoid-ARLg.ttf);
}
@font-face 
{
    font-family: Hussar;
    src: url(Fonts/HussarBdobl-jnqv.ttf);
}
@font-face 
{
    font-family: Ipsum;
    src: url(Fonts/IpsumSemi700Free-d9x9X.otf);
}
@font-face 
{
    font-family: Jersey;
    src: url(Fonts/JerseyclubGrungeBold-JRXVK.otf);
}
@font-face 
{
    font-family: Jetset;
    src: url(Fonts/JetSet-8j1J.ttf);
}
@font-face 
{
    font-family: Lambda;
    src: url(Fonts/Lambda-vmr47.ttf);
}
@font-face 
{
    font-family: Limelight;
    src: url(Fonts/Limelight-1XzM.ttf);
}
@font-face 
{
    font-family: Logopixies;
    src: url(Fonts/Logopixies-owwBB.ttf);
}
@font-face 
{
    font-family: Magfont;
    src: url(Fonts/MagFontRegular-3x0p.ttf);
}
@font-face 
{
    font-family: Mikesans;
    src: url(Fonts/MikeSansFree-MVDLP.ttf);
}
@font-face 
{
    font-family: Mikodacs2;
    src: url(Fonts/Mikodacspcs-wAv9.otf);
}
@font-face 
{
    font-family: Mikodacs;
    src: url(Fonts/Mikodacs-vp2L.otf);
}
@font-face 
{
    font-family: Mufan;
    src: url(Fonts/Mufanpfs-owKgx.otf);
}
@font-face 
{
    font-family: Nesatho;
    src: url(Fonts/Nesathoberyl-BW9j3.ttf);
}
@font-face 
{
    font-family: Newsfont;
    src: url(Fonts/NewsfontRegular-qJY2.ttf);
}
@font-face 
{
    font-family: Nocontinue;
    src: url(Fonts/NoContinue-Vogl.ttf);
}
@font-face 
{
    font-family: Norwester;
    src: url(Fonts/Norwester-eRV6.otf);
}
@font-face 
{
    font-family: Octapost;
    src: url(Fonts/OctapostNbp-3e0X.ttf);
}
@font-face 
{
    font-family: Oxanium;
    src: url(Fonts/OxaniumBold-p77oZ.ttf);
}
@font-face 
{
    font-family: Oxanium xbold;
    src: url(Fonts/OxaniumExtrabold-DOOd0.ttf);
}
@font-face 
{
    font-family: Pasti reg;
    src: url(Fonts/PastiRegular-mLXnm.otf);
}
@font-face 
{
    font-family: Playa;
    src: url(Fonts/PlayaRegular-6YBEx.ttf);
}
@font-face 
{
    font-family: Play;
    src: url(Fonts/Playball-q6o1.ttf);
}
@font-face 
{
    font-family: Quantam;
    src: url(Fonts/Quantumregular-MVmXr.otf);
}
@font-face 
{
    font-family: Rabbid;
    src: url(Fonts/RabbidHighwaySignIvBlack-aGDm.otf);
}
@font-face 
{
    font-family: Regensburg;
    src: url(Fonts/RegensburgRegular-PRvP.ttf);
}
@font-face 
{
    font-family: Regensburg grunded;
    src: url(Fonts/RegensburgGrungedRegular-518Vv.ttf);
}
@font-face 
{
    font-family: Righteous;
    src: url(Fonts/Righteous-j7av.ttf);
}
@font-face 
{
    font-family: Rocks;
    src: url(Fonts/RocksSerif-1G0E4.ttf);
}
@font-face 
{
    font-family: Sever;
    src: url(Fonts/SeverSansBold-9YYKL.ttf);
}
@font-face 
{
    font-family: Sikat;
    src: url(Fonts/Sikat-8MrrB.ttf);
}
@font-face 
{
    font-family: Simpleness;
    src: url(Fonts/SimplenessRegular-KRpy.otf);
}
@font-face 
{
    font-family: Soldier;
    src: url(Fonts/SolidSoldier-1G87M.ttf);
}
@font-face 
{
    font-family: Squada;
    src: url(Fonts/SquadaOne-aOrm.ttf);
}
@font-face 
{
    font-family: Stepalange;
    src: url(Fonts/Stepalange-x3BLm.otf);
}
@font-face 
{
    font-family: Step short;
    src: url(Fonts/StepalangeShort-p7GZd.otf);
}
@font-face 
{
    font-family: Suboleya;
    src: url(Fonts/SuboleyaRegular-qZeV1.ttf);
}
@font-face 
{
    font-family: Sunny;
    src: url(Fonts/SunnyspellsRegular-MV9ze.otf);
}
@font-face 
{
    font-family: Supernormal;
    src: url(Fonts/SuperNormal-xRoj5.ttf);
}
@font-face 
{
    font-family: Techna;
    src: url(Fonts/TechnaSansRegular-Xp79.otf);
}
@font-face 
{
    font-family: Teko;
    src: url(Fonts/TekoBold-jap9.ttf);
}
@font-face 
{
    font-family: Teko semi;
    src: url(Fonts/TekoSemibold-y483.ttf);
}
@font-face 
{
    font-family: Valezuela;
    src: url(Fonts/Valenzuela-m7Yv.ttf);
}
@font-face 
{
    font-family: Vibra;
    src: url(Fonts/VibraRegular-GWpg.ttf);
}
@font-face 
{
    font-family: Yatra;
    src: url(Fonts/YatraOne-Regular.ttf);
}
@font-face 
{
    font-family: Yoka;
    src: url(Fonts/Yokawerad-E974.otf);
}
@font-face 
{
    font-family: Yulong;
    src: url(Fonts/Yulong-JpGDE.ttf);
}
@font-face 
{
    font-family: Zan;
    src: url(Fonts/Zantroke-gmR5.otf);
}

*
{
    margin: 0px;
    padding: 0px;
    cursor: none;
    box-sizing: border-box;
}
html
{
    background: linear-gradient(to right,black, var(--dark-blue), black);
    scroll-snap-type: y mandatory;
    scroll-padding-top: 50px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body
{
    font-family: var(--font-1);
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-size: large;
    color: white;
    display: flex;
    margin: 0px;
}
/*--- Cursor Follower Config ---*/
.cursor-light 
{
    z-index: 1;
    width: 30px;
    display: flex;
    position: fixed;
    aspect-ratio: 1/1;
    border-radius: 50%;
    align-items: center;
    pointer-events: none;
    mix-blend-mode: screen;
    justify-content: center;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255);
    box-shadow: 0 0 25px 15px rgba(255, 255, 255);
}

#borders
{
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    position: fixed;
}
.part
{
    position: fixed;
}
.part li
{
    list-style-type: none;
}
.left
{
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    display: flex;
    position: fixed;
}
.l-first
{
    background: white;
    position: absolute;
    height: 100%;
    width: 10px;
    left: 0;
    top: 0;
}
.l-second
{
    transform: skewY(135deg);
    background: white;
    position: absolute;
    width: 30px;
    height: 20%;
    top: 45%;
    left: 0;
}
.l-third
{
    left: 0;
    top: 35%;
    width: 30px;
    height: 20%;
    position: absolute;
    background: white;
    transform: skewY(45deg);
}
.l-forth
{
    transform: skewY(135deg);
    background: white;
    position: absolute;
    height: 15%;
    width: 10px;
    left: 15px;
    top: 70%;
}
.l-fifth
{
    top: 15%;
    left: 15px;
    width: 10px;
    height: 15%;
    position: absolute;
    background: white;
    transform: skewY(45deg);
}

.right
{
    top: 0;
    width: 0;
    right: 0px;
    height: 100%;
    position: fixed;
}

.r-first
{
    background: white;
    position: absolute;
    height: 100%;
    width: 10px;
    right: 0;
    top: 0;
}

.r-second
{
    top: 45%;
    right: 0;
    width: 30px;
    height: 20%;
    position: absolute;
    background: white;
    transform: skewY(45deg);
}

.r-third
{
    top: 35%;
    right: 0;
    width: 30px;
    height: 20%;
    position: absolute;
    background: white;
    transform: skewY(135deg);
}

.r-forth
{
    top: 15%;
    right: 15px;
    width: 10px;
    height: 15%;
    position: absolute;
    background: white;
    transform: skewY(135deg);
}

.r-forth
{
    top: 15%;
    right: 15px;
    width: 10px;
    height: 15%;
    position: absolute;
    background: white;
    transform: skewY(135deg);
}

.r-fifth
{
    top: 70%;
    right: 15px;
    width: 10px;
    height: 15%;
    position: absolute;
    background: white;
    transform: skewY(45deg);
}

.top
{
    top: 0;
    right: 0px;
    width: 100%;
    height: 10%;
    z-index: 100;
    position: fixed;
} 
.t-first
{
    background-color: white;
    position: absolute;
    height: 10px;
    width: 100%;
    right: 0;
    top: 0;
}

.bottom
{
    bottom: 0;
    right: 0px;
    width: 100%;
    height:auto;
    position: fixed;
    transform: rotateX(180deg);
}
.b-first
{
    background: white;
    position: absolute;
    height: 10px;
    width: 100%;
    right: 0;
    top: 0;
}
.b-second
{
    top: 0;
    left: 30%;
    width: 30%;
    height: 20px;
    position: absolute;
    background: white;
    transform: skewX(45deg);
}
.b-third
{
    transform: skewX(135deg);
    background: white;
    position: absolute;
    height: 20px;
    width: 30%;
    right: 30%;
    top: 0;
}

.serv-ring
{
    top: 50%;
    left: 50%;
    z-index: 0;
    height: 50%;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    transform: translate(-50%,-50%);
}
.serv-ring img
{
    border-radius: 50%;
    animation: revolution 15s  linear infinite;
}


.intro-bg
{
    position: fixed;
    z-index: 180;
    height: 20%;
    width: 35%;
    left: 0;
    top: 0;
}
.in-one
{
    background-color: white;
    position: absolute;
    height: 75px;
    width: 80%;
    top: 0%;
    left: 0;
}
.in-two
{
    left: 0;
    top: 65px;
    width: 40%;
    height: 20px;
    position: absolute;
    transform: skewX(-40deg);
    background-color: white;
}
.in-three
{
    background-color: white;
    transform: skewX(-45deg);
    position: absolute;
    height: 10px;
    width: 20%;
    right: 17%;
    top: 9px;
}
.in-four
{
    background-color: white;
    transform: skewY(-45deg);
    position: absolute;
    height: 75px;
    left: 80%;
    width: 2%;
    top: -5px;
}
#bg
{
    top: 40%;
    left: 45%;
    width: 10%;
    z-index: 0;
    display: flex;
    aspect-ratio: 1/1;
    position: absolute;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
}
#backdrop
{
    top: 0;
    left: 0;
    z-index: 300;
    display: flex;
    width: 100dvw;
    height: 100dvh;
    position: fixed;
    align-items: center;
    flex-direction: column;
    justify-content: center;   
    animation: opening 2s forwards ease-in-out;
    background: linear-gradient(to right, black, var(--light-blue),black);
}
#backdrop .icon
{
    width: 50%;
    height: auto;
    position: absolute;
}

.symbol
{
    height: 50%;
    width: auto;
}
.mj
{
    width: 90%;
    height: auto;
}

#intro
{
    z-index: 200;
/*    animation: downbounce 1s forwards ease-in-out;*/ 
}

.pic img:hover
{
    transition: 0.25s;
    position: relative;
    transform:scale(1.1);
}
.tabs .serv
{
    font-size: x-large;
    animation: slideright 1s forwards ease-out;
    font-family: 'Agency FB','Banshcrift','Consolas';
}
.tabs .proj
{
    font-size: x-large;
    animation: slideright 1.5s forwards ease-out;
    font-family: 'Agency FB','Banshcrift','Consolas';
}
.tabs .cont
{
    font-size: x-large;
    font-family: 'Agency FB','Banshcrift','Consolas';
    animation: slideright 2s forwards ease-out;
}

/*MAIN/HERO Section*/
#main-ld
{
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    width: 110%;
    z-index: -10;
    aspect-ratio: 1/1;
    position: absolute;
    transform: translate(-50%,-50%);
}
#rings
{
    left:20px;
    z-index: 10;
    width: 100px;
    bottom: 20px;
    display: flex;
    height: 100px;
    position: fixed;   
    align-items: center;
    justify-content: center;
    animation: zoomfade linear;
    animation-timeline: view();
    animation-range: entry cover 40%;
}
#rings li
{
    border-radius: 50%;
    list-style-type: none;
    text-decoration: none;
    animation-duration: scroll();
}
.ring1
{
    width: 90px;
    height: 90px;
    display: flex;
    position: absolute;   
    align-items: center;
    justify-content: center;
    animation: revolution 10s infinite linear;
}

.ring2
{
    animation: antirevolution 20s infinite linear;
    justify-content: center;
    align-items: center;
    position: absolute;   
    display: flex;
    height: 70px;
    width: 70px;
}

.pic
{
    top: 20%;
    z-index: 100;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    --light_blue: rgb(0,0,225);
    animation: pulse 2s ease-in-out infinite;
    box-shadow: 0 0 40px 50px var(--light-blue);
}


.pic img
{
    animation: slideleft 1s ease-in;
    border-radius: 50%;
    height: 80%;
    width:80%;
}
.pic img:hover
{
    transform: scale(1.1);
    border-radius: 50%;
}
.pic:hover
{
    overflow: visible;
}

.job .wrap
{
    font-family: 'clickuper';
    width: fit-content;
    text-shadow: none;
    color: gold;
    border: none;
}
.typewrite
{
    justify-content: center;
    align-items: center;
    background: none;
    display: flex;
    border: none;
    padding: 0;
    margin: 0;
}
.bio
{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.name
{
    width: 90%;
    align-items: center;
    justify-content: center;
}
.name img
{
    width: 99%;
    height: auto;
}
.sum
{
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Agency FB','Banshcrift','Consolas';
}

.bg1
{
    left: 0;
    z-index: 0;
    width: 70%;
    height: 40px;
    border-left: none;
    position: absolute;
    transform: skewX(25deg);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);
}
.bg2
{
    right: 0;
    z-index: 0;
    width: 70%;
    height: 40px;
    border-left: none;
    border-left: none;
    position: absolute;
    transform: skewX(-25deg);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);
}

#category
{
    justify-content: center;
    height: fit-content;
    flex-direction: row;
    align-items: center;
    display: flex;
    width: 80%;
    z-index: 0;
    padding: 0;
    margin: 0;
}
.cat
{
    padding: 0;
    z-index: -1;
    width: 50dvw;
    height: 50px;
    position: relative;
    background: white;
}
.cat-one
{
    left: 10%;
    transform: skewX(135deg);
}
.cat-two
{
    transform: skewX(45deg);
    right: 10%;
}
.cat-three
{
    right: 50%;
    width: 950px;
}

.socials

.more
{
    height: 40px;
    display: flex;
    transition: 0.3s;
    font-size: large;
    font-weight: bold;
    width: fit-content;
    --more: var(--gold);
    align-items: center;
    border-radius: 10px;
    padding: 0 10px 0 10px;
    border: solid var(--more);
    justify-content: space-between;
    background: var(--deg45-gold-gradient);
    font-family: 'Agency FB','Banshcrift','Consolas';
} 
.more:hover
{
    box-shadow: 0 0 50px 20px var(--more);
}
.more .icon
{
    height: 20px;
    aspect-ratio: 1/1;
    margin-left: 10px;
}
/*---General Settings---*/
body section, main
{
    scroll-snap-align: start;
}
#services .serv-title
{
    display: flex;
    z-index: 100;
    align-items: center;
    justify-content: center;
    position: relative;
    backdrop-filter: blur(50px);
}

#services .icons
{
    gap: 20px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
#name
{
    z-index: 10;
    height: 60%;
    width: 200px;
    border: none;
    display: flex;
    background: none;
    border-radius: 20px;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(5px);
    justify-content: space-around;
    background-color: rgba(0, 0, 255, 0.2);
}
#name figure
{
    background-color: rgba(0, 0, 45, 0.7);
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    position: absolute;
    overflow: hidden;
    height: 70%;
    width: 90%;
    padding: 0;
    top: 2.5%;
    left: 50%;
    margin: 0;
}
#name figure img
{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
}

#name .icon-img
{
    top: 0%;
    left: 50%;
    width: 50px;
    height: 50px;
    padding: 5px;
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 25, 0.9);
}
#name .det
{
    top: 80%;
    width: 100%;
    color: white;
    font-weight: 900;
    font-size: x-large;
    position: absolute;
    font-family: var(--font-1-B);
}
#name .view
{
    right: 1%;
    bottom: 1%;
    height: 7%;
    width: 30%;
    display: flex;
    color: white;
    padding: 0 10px;
    transition: 0.5s;
    font-size: large;
    font-weight: bold;
    font-style: italic;
    position: absolute;
    align-items: center;
    border-radius: 50px;
    border: solid black;
    justify-content: center;
    font-family: 'Agency FB';
    background-color: rgba(0, 0, 255, 0.7);
}
#services .send:hover
{
    box-shadow: 
    0 0 50px 1px var(--light-blue),
    0 0 20px 1px blue,0 0 40px 1px blue;
}
.pops .slide
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.slide .serv-info
{
    width: 190px;
    display: flex;
    list-style: none;
    aspect-ratio: 1/1;
    align-items: center;
    border-radius: 20px;
    flex-direction: column;
    backdrop-filter: blur(5px);
    justify-content: space-evenly;
}
.serv-info svg
{
    border-radius: 50%;
    aspect-ratio: 1/1;
    padding: 2px;
}
.slide svg
{
    border: solid blue;
}
.slide a
{
    width: 92.5%;
    height: 30px;
    display: flex;
    font-weight: bold;
    align-items: center;
    border-radius: 20px;
    justify-content: end;
}
.slide a .skl-link
{
    height: 90%;
    padding: 5px;
    display: flex;
    margin-left: 5px;
    align-items: top;
    aspect-ratio: 1/1;
    border-radius: 50%;
    font-weight: bolder;
    justify-content: center;
    color: var(--dark-blue);
    background: var(--deg45-gold-gradient);
}
/*----Skills Section----*/
#skills
{
    gap: 30px;
    display: flex;
    padding-top: 1%;
    flex-wrap: wrap;
    overflow-y: auto;
    align-items: center;
    justify-content: center;
}
.skill-cat
{
    width: 200px;
    display: flex;
    aspect-ratio: 1/1;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    animation: rotate 1s linear infinite;
    background-color: rgba(0, 0, 255, 0.2);
}
.skill-cat::before
{
    width: 70%;
    z-index: -3;
    content: " ";
    aspect-ratio: 1/1;
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0 30px 2px rgba(0, 0, 0);
}
.skill-cat1::before
{
    background: conic-gradient(from 0deg, var(--gold) 0deg 275deg, rgba(5, 2, 155, 0.1) 90deg);
}
.skill-cat2::before
{
    background: conic-gradient(from 0deg, var(--gold) 0deg 315deg, rgba(5, 2, 155, 0.1) 90deg);
}
.skill-cat3::before
{
    background: conic-gradient(from 0deg, var(--gold) 0deg 235deg, rgba(5, 2, 155, 0.1) 90deg);
}
.skill-cat4::before
{
    background: conic-gradient(from 0deg, var(--gold) 0deg 235deg, rgba(5, 2, 155, 0.1) 90deg);
}
.skill-cat5::before
{
    background: conic-gradient(from 0deg, var(--gold) 0deg 215deg, rgba(5, 2, 155, 0.1) 90deg);
}
.skill-cat6::before
{
    background: conic-gradient(from 0deg, var(--gold) 0deg 235deg, rgba(5, 2, 155, 0.1) 90deg);
}
.skill-cat7::before
{
    background: conic-gradient(from 0deg, var(--gold) 0deg 215deg, rgba(5, 2, 155, 0.1) 90deg);
}
.skill-cat8::before
{
    background: conic-gradient(from 0deg, var(--gold) 0deg 270deg, rgba(5, 2, 155, 0.1) 90deg);
}
.skill-cat9::before
{
    background: conic-gradient(from 0deg, var(--gold) 0deg 180deg, rgba(5, 2, 155, 0.1) 90deg);
}
.skill-cat10::before
{
    background: conic-gradient(from 0deg, var(--gold) 0deg 300deg, rgba(5, 2, 155, 0.1) 90deg);
}
.skill-cat::after
{
    width: 65%;
    z-index: -2;
    content: " ";
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: absolute;
    background-color: rgba(0, 0, 40);
    box-shadow: 0 0 10px 2px inset rgba(0, 0, 0);
}
.skill-icon
{
    top: 4%;
    left: 4%;
    width: 22%;
    height: 22%;
    z-index: -1;
    padding: 2px;
    position: absolute;
    border-radius: 50%;
    background-color: black;
    box-shadow: 0 0 10px 1px rgba(0, 0, 255);
}
.skill-cat h4
{
    width: 65%;
    z-index: -1;
    display: flex;
    color: white;
    flex-wrap: wrap;
    font-size: 20px;
    text-align: center;
    position: absolute;
    align-items: center;
    font-weight: bolder;
    justify-content: center;
    text-shadow: 0 0 30px white;
    font-family: 'Agency FB','Banshcrift','Consolas';
}
.skill-cat #skill-more
{
    right: 5%;
    width: 15%;
    bottom: 5%;
    border: none;
    z-index: 2000;
    display: flex;
    color: blue;
    font-size: 20px;
    aspect-ratio: 1/1;
    border-radius: 12%;
    position: absolute;
    align-items: center;
    font-weight: bolder;
    justify-content: center;
    backdrop-filter: blur(5px);
    background-color: rgb(255, 255, 255);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.skill-cat #skill-more:hover
{
    transition: 0.5s;
    transform: rotatez(360deg);
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(2, 2, 156, 0.2);
}
.skill-cat:hover
{
    transition: 0.5s;
    transform: scale(1.05);
    box-shadow: 0 0 50px 20px rgba(0, 0, 255, 0.5);
    
    .skl-graphics span
    {
        border-width: 3px;
        transition: 0.5s;
    }
    .g5
    {
        border-width: 2px;
        height: 50%;
        transition: 0.5s;
    }
    .g6
    {
        border-width: 2px;
        height: 50%;
        transition: 0.5s;
    }
    .g7
    {
        border-width: 2px;
        width: 50%;
        transition: 0.5s;
    }
    .g8
    {
        border-width: 2px;
        width: 50%;
        transition: 0.5s;
    }
}
.skill-cat .skl-graphics
{
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
}
.skl-graphics span
{
    width: 10%;
    height: 10%;
    position: absolute;
    border: solid blue 4px;
}
.skl-graphics .g1
{
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 15px;
}
.skl-graphics .g2
{
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 15px;
}
.skl-graphics .g3
{
    left: 0;
    bottom: 0;
    border-top: none;
    border-right: none;
    border-bottom-left-radius: 15px;
}
.skl-graphics .g4
{
    right: 0;
    bottom: 0;
    border-top: none;
    border-left: none;
    border-bottom-right-radius: 15px;
}
.skl-graphics .g5
{
    left: 0;
    top: 50%;
    border-top: none;
    border-right: none;
    border-bottom: none;
    transform: translateY(-50%);
}
.skl-graphics .g6
{
    right: 0;
    top: 50%;
    border-top: none;
    border-left: none;
    border-bottom: none;
    transform: translateY(-50%);
}
.skl-graphics .g7
{
    top: 0;
    left: 50%;
    border-left: none;
    border-right: none;
    border-bottom: none;
    transform: translateX(-50%);
}
.skl-graphics .g8
{
    transform: translateX(-50%);
    border-right: none;
    border-left: none;
    border-top: none;
    left: 50%;
    bottom: 0;
}

.tiles
{
    top: 50%;
    left: 50%;
    z-index: -10;
    width: 80dvw;
    height: 80dvh;
    display: flex;
    position: absolute;
    align-items: center;
    list-style-type: none;
    justify-content: center;
    transform: translate(-50%,-50%);
}
.tile
{
    z-index: -1;
    width: 200px;
    height: 200px;
    display: flex;
    border-radius: 5%;
    position: absolute;
    align-items: center;
    justify-content: center;
    transform: rotateZ(45deg);
}
.tile:hover
{
    transform: none;
    transition: 0.5s;
}
.tile1
{
    z-index: -10;
    width: 200px;
    height: 200px;
    background-color: rgb(0, 0, 100);
    box-shadow: 0 0 150px 20px rgb(0, 0, 100);
}
.tile2
{
    z-index: -12;
    width: 300px;
    height: 300px;
    background-color: rgb(0, 0, 150);
    box-shadow: 0 0 100px 10px rgb(0, 0, 150);
}
.tile3
{
    z-index: -13;
    width: 400px;
    height: 400px;
    background-color: rgb(0, 0, 255);
    box-shadow: 0 0 200px 20px rgb(0, 0, 255);
}

section
{
    animation: zoomfade linear;
    animation-timeline: view();
    animation-range: entry cover 20%;
}

.header
{
    top: 0;
    right: 0;
    width: 350px;
    height: 100px;
    display: flex;
    font-size: large;
    font-weight: 900;
    position: absolute;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: rgba(255, 255, 255, 0.253);
}
.links
{
    top: 120px;
    width: 60%;
    height: 50px;
    display: flex;
    position: absolute;
    border-radius: 20px;
    align-items: center;
    justify-content: space-evenly;
}
.links .link
{
    height: 70%;
    width: 100px;
    display: flex;
    font-weight: 600;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    font-family: var(--font-1-B);

}
.links :nth-child(2)
{
    padding: 0 10px;
    background-color: blue;   
    box-shadow: 0 0 5px 1px blu e; 
}
.links :nth-child(1)
{
    box-shadow: 0 0 10px 1px white;
    background-color: white;
    border: solid white;
    color: blue;
}
.detail li
{
    width: 100%;
    height: 40px;
    display: flex;
    color: white;
    font-size: larger;
    font-style: italic;
    font-weight: bolder;
    align-items: center;
    transform: skew(20deg);
    justify-content: center;
    font-family: 'Agency FB';
    background-color: rgba(255, 255, 255, 0.232);
}

/*----Projects Section----*/
#projects
{
    width: 95dvw;
    display: flex;
    height: 95dvh;
    position: relative;
    align-items: center;
    justify-content: center;
}
#projects .head
{
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    width: 90%;
    height: 20%;
    z-index: 1000;
    display: flex;
    font-size: 5rem;
    position: absolute;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    font-family: var(--font-1-B);
    transform: translate(-50%,-50%);
}
#project-icons
{
    width: 90%;
    bottom: 25px;
    border: none;
    display: flex;
    border-left: none;
    border-right: none;
    position: absolute;
    height: fit-content;
    align-items: center;
    backdrop-filter: blur(10px);
    justify-content: space-evenly;
}
.pjt-btn
{
    width: 200px;
    height: 50px;
    color: white;
    font-size: 20px;
    transition: 0.5s;
    font-weight: bolder;
    border-radius: 10px;
    font-family: var(--font-1-B);
    border: solid rgba(255, 255, 255, 0.7) 1px;
    background-color: rgba(255, 255, 255, 0.03);
}
.pjt-btn:hover
{
    color: var(--dark-blue);
    transform: translateY(5px);
    background-color: rgba(255, 255, 255, 0.7);
}
.pop-panel
{
    top: 10px;
    left: 30px;
    cursor: grab;
    width: 94.5dvw;
    position: fixed;
    align-items: left;
    border: transparent;
    justify-content: end;
    height: calc(100dvh - 20px);
    background: rgba(0, 0, 30);
}
#close-btn
{
    background-color: var(--mid-blue);
    box-shadow: 0 0 5px 2px black;
    font-family: var(--font-3-C);
    border: solid black;
    font-weight: bolder;
    border-radius: 50%;
    position: absolute;
    font-size: larger;
    transition: 0.5s;
    z-index: 1000;
    padding: 5px;
    height: 50px;
    width: 50px;
    left: 5px;
    top: 5px;
}
#close-btn:hover
{
    background-color: var(--light-blue);
    box-shadow: 0 0 20px 5px white;
    border: solid white;
    color: white;
}
.projects
{
    gap: 5%;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: auto;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    cursor: grab;
}

/*---Project Buttons Section---*/
.project
{
    border: solid rgba(255, 255, 255, 0.4) 1px;
    background-color: rgba(0, 0, 255, 0.05);
    backdrop-filter: blur(2px);
    list-style-type: none;
    border-radius: 5px;
    aspect-ratio: 1/1;
    cursor: pointer;
    width: 200px;
}
.project .pop-data
{
    right: 0;
    bottom: 0;
    width: 50%;
    height: 15%;
    display: flex;
    cursor: pointer;
    font-size: 20px;
    transition: 0.5s;
    position: absolute;
    font-weight: bolder;
    align-items: center;
    justify-content: center;
    color: var(--dark-blue);
    backdrop-filter: blur(30px);
    font-family: var(--font-1-B);
    border-top-left-radius: 10px;
    border-bottom-right-radius: 5px;
    background-color: rgba(255, 255, 255);
    border: solid rgba(255, 255, 255, 0.622) 1px;
}
.project .pop-data:hover
{
    background-color: rgba(255, 255, 255, 0.7);
    color: var(--dark-blue);
    border: none;
}
.project .pjt-name
{
    top: 5%;
    left: 50%;
    width: 90%;
    height: 16%;
    cursor: text;
    display: flex;
    color: white;
    font-size: 200%;
    border-left: none;
    position: absolute;
    border-radius: 2px;
    font-weight: bolder;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    font-family: var(--font-1-B);
    background-color: rgba(0, 0, 255, 0.175);
}
.project .pjt-stt
{
    border: solid var(--led-color) ;
    box-shadow: 
    0 0 7px 5px var(--led-color),
    0 0 50px 10px var(--led-color);
    background-color: var(--led-color);
    width: 5px;
    aspect-ratio: 1/1;
    position: absolute;
    top: 12%;
    left: 12%;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
    transform: translate(-50%,-50%);
}
.project .pro
{
    --led-color: rgb(255, 217, 0);
}
.project .hob
{
    --led-color: white;
}


/*---Project Data UI Section---*/
.project-ui
{
    /*width: min(100%, 1000px);  Responsive width*/
    cursor: crosshair;
    overflow: hidden;
    flex-wrap: wrap;
    height: 100%;
    width: 100%;
}
.data-panel
{
    width: 100%;
    height: 100%;
    display: flex;
    column-gap: 3%;
    margin: 0 auto;
    overflow: auto;
    flex-wrap: wrap;
    cursor: crosshair;
    align-items: center;
    justify-content: center;
    background-color: rgb(0, 0, 15);
}

#dtp-bg::before
{
    top: 50%;
    left: 50%;
    width: 99%;
    content: " ";
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
    background-color: rgb(0, 0, 15);
}
#dp-grp
{
    top: 50%;
    left: 50%;
    height: 900px;
    display: flex;
    aspect-ratio: 1/1;
    position: absolute;
    border-radius: 50%;
    --grp-color: blue;
    align-items: center;
    justify-content: center;
    transform: translate(-50%,-50%);
    border: solid var(--grp-color) 2px;
    box-shadow: 
                0 0 100px 50px var(--grp-color),
                0 0 500px 50px var(--grp-color),
                0 0 1000px 50px var(--grp-color), 
                0 0 100px 10px var(--grp-color) inset;
}
#dp-grp::after
{
    content: " ";
    width: 300px;
    aspect-ratio: 1/1;
    border-radius: 40px;
    transform: rotate(45deg);
    border: solid var(--grp-color) 2px;
    background-color: var(--grp-color);
    box-shadow: 
                0 0 100px 10px var(--grp-color),
                0 0 500px 100px var(--grp-color),
                0 0 2000px 50px var(--grp-color), 
                0 0 100px 10px var(--grp-color) inset;
}
#dash-panel
{
    font-family: 'Agency FB','Banshcrift','Consolas';
    --dp-panel: rgba(0, 0, 141, 0.3);
    --dp-bg: rgba(0, 0, 141, 0.029);
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    position: absolute;
    cursor: crosshair;
    color: white;
    display: flex;
} 
.pjt-ui0  /* Project name and identity details */
{
    gap: 5%;
    top: 5%;
    left: 5%;
    z-index: 1;
    width: 30%;
    height: 30%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    backdrop-filter: blur(20px);
    background-color: var(--dp-bg);
    border: solid var(--dp-panel) 1px; 
    
    h1
    {
        justify-content: space-around;
        font-family: var(--font-3-C);
        font-weight: bolder;
        align-items: center;
        cursor: crosshair;
        font-size: 1.5rem;
        display: flex;
        color: blue;
        width: 100%;
       
        .pjt-nm
        {
            width: 50%;
            color: white;
            font-size: 2rem;
            cursor: crosshair;
            text-align: center;
            font-weight: bolder;
            font-family: var(--font-1-B);
        }
    }
    .full-name
    {
        font-weight: bolder;
        text-align: center;
        cursor: crosshair;
        font-size: 1.3rem;
        color: white;
        width: 90%;
    }
    .pjt-cat
    {
        width: 90%;
        height: 30%;
        color: gold;
        display: flex;
        font-weight: bold;
        font-size: 1.3rem;
        align-items: center;
        justify-items: space-around;
        h1
        {
            width: 50%;
            font-family: var(--font-3-C);
        }
    }

}
hr
{
    width: 70%;
    border: solid blue 1px;
    animation: zoomfade 1s linear ease-in-out;
}
.pjt-ui1 /* Project Image/Display */
{
    background-color: rgba(0, 0, 15, 0.5);
    transform: translate(-50%,-50%);
    height: 100%;
    width: 100%;
    z-index: 0;
    left: 50%;
    top: 50%;
}
.pjt-ui2 /* Project Specs */
{
    gap: 2dvh;
    top: 5%;
    right: 5%;
    z-index: 1;
    width: 30%;
    padding: 2%;
    display: flex;
    height: fit-content;
    list-style-type: none;
    flex-direction: column;
    backdrop-filter: blur(20px);
    justify-content: space-around;
    background-color: var(--dp-bg); 
    border: var(--dp-panel) solid 1px;
    .pjt-spec
    {
        width: 90%;
        font-size: 1.2rem;
        font-weight: bold;
        text-align: center;
    }
}
.pjt-ui3 /* Links & Actions */
{
    right: 5%;
    bottom: 5%;
    width: 30%;
    z-index: 1;
    height: 10%;
    backdrop-filter: blur(20px);
    background-color: var(--dp-bg);
    border: solid var(--dp-panel) 1px; 
    .pjt-lnk
    {
        width: 90%;
        height: 100%;
        cursor: grab;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-evenly;
        
        a{cursor: grab;}
        h1{cursor: text;}
        
        img
        {
            cursor: grab;
            width: auto;
            height: 50%;
        }
    }
}
.pjt-ui4 /* Project Images*/
{
    left: 3.5%;
    gap: 10px;
    z-index: 1;
    width: 30%;
    bottom: 5%;
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
    .pjt-img
    {
        height: 150px;
        overflow: hidden;
        aspect-ratio: 1/1;
        object-fit: cover;
        border-radius: 20px;
        list-style-type: none;
        backdrop-filter: blur(20px);
        background-color: var(--dp-bg);
        border: solid var(--dp-panel) 1px;
    }
}
.pjt-ui5 /* Project Technologies */
{
    top: 70%;
    right: 5%;
    z-index: 1;
    height: 10%;
    display: flex;
    width: fit-content;
    align-items: center;
    backdrop-filter: blur(20px);
    justify-content: space-evenly;
    background-color: var(--dp-bg);
    border: solid var(--dp-panel) 1px; 
    .sft-icon
    {
        height: 90%;
        width: auto;
    }
}
.pjt-ui6
{
    width: 40%;
    bottom: 5%;
    height: 100px;

    svg
    {
        width: 70px;
        height: 70px;
    }
}

#contacts
{
    width: 95dvw;
    margin: 10px;
    height: 95dvh;
    display: flex;
    margin-top: 50px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
}
.contact-title
{
    background-color: rgba(0, 0, 255, 0.012);
    border: solid var(--light-blue) 1px;
    width: clamp(200px, 50%, 600px);
    backdrop-filter: blur(20px);
    color: var(--light-blue);
    justify-content: center;
    border-radius: 20px;
    align-items: center;
    position: absolute;
    font-weight: bold;
    font-size: 3vh;
    display: flex;
    padding: 10px;
    height: 10%;
    top: 20px;
}
.c-link
{
    border: solid var(--light-blue) 1px;
    backdrop-filter: blur(20px);
    border-radius: 10px;
    padding: 10px;
}
.contact-form, .contact-list
{
    position: relative;
}
.form-input
{
    background-color: rgba(0, 0, 255, 0.012);
    border: solid var(--light-blue) 1px;
    backdrop-filter: blur(2px);
    border-radius: 10px;
    font-weight: bold;
}
.con-bg-graphic
{
    z-index: -1;
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: absolute;
    height: clamp(100px);
    --con-bg-color: blue;
    border: solid 1px var(--con-bg-color);
    background-color: var(--con-bg-color);
    box-shadow: 0 0 50px 30px var(--con-bg-color), 
                0 0 500px 100px var(--con-bg-color), 
                0 0 1000px 50px var(--con-bg-color), 
                0 0 3000px 100px var(--con-bg-color);
}

#footer
{
    width: 90%;
    display: flex;
    height: 130px;
    margin-top: 20px;
    border-radius: 20px;
    align-items: center;
    flex-direction: column;
    scroll-snap-align: end;
    backdrop-filter: blur(10px);
    border: solid var(--mid-blue);
    justify-content: space-around;
}
#footer nav
{
    justify-content: center;
    align-items: center;
    font-size: larger;
    display: flex;
    height: 30%;
    width: 70%;
}
#footer nav .tabs
{
    width: 100%;
} 
#footer .summary
{
    font-family: var(--font-1-B);
    font-style: italic;
    padding: 0 20px;
    color: white;
}

@media screen and (min-width: 1000px)
{   
    .serv-ring
    {
        top: 50%;
        left: 50%;
        z-index: 0;
        height: 95%;
        display: flex;
        position: absolute;
        align-items: center;
        justify-content: center;
        transform: translate(-50%,-50%);
    }
    .serv-ring img
    {
        border-radius: 50%;
        animation: revolution 30s  linear infinite;
    }
    #intro
    {
        right: 0%;
        top: 10px;
        width: 99%;
        height: 50px;
        display: flex;
        position: fixed;
        justify-content: space-around;
        color: var(--dark-gold);
    }
    
    .tabs
    {
        width: 70%;
        display: flex;
        list-style: none;
        margin-right: 10px;
        border-radius: 5px;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(20px);
    }
    .tabs li
    {
        flex: 1 0 0;
        height: 50%;
        color: red;
        display: flex;
        font-size: large;
        font-weight: bold;
        align-items: center;
        justify-content: center;
        font-family: var(--font-1-B);
    }
    .tabs a:hover
    {
        font-weight: bold;
        transition: 0.25s;
        color: var(--light-blue);
        text-shadow: 0 0 20px var(--light-blue);
    }
    a
    {
        color: white;
        text-decoration: none;
    }
    .cit
    {
        top: 10px;
        width: 10%;
        right: 10px;
        height: 40px;
        z-index: 100;
        border-top: 0;
        display: flex;
        border-right: 0;
        position: fixed;
        font-size: x-large;
        align-items: center;
        color: var(--dark-blue);
        justify-content: center;
        background-color: white;
        border: solid white 10px;
        border-bottom-left-radius: 15px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    main
    {
        width: 96%;
        row-gap: 30%;
        display: flex;
        height: 89dvh;
        overflow: hidden;
        align-items: center;
        border-radius: 20px;
        scroll-snap-align: start;
        margin: 60px 10px 10px 10px;
        justify-content: space-around;
    }
    .pic
    {
        right: 35%;   
        width: 30%;
        display: flex;
        box-shadow: none;
        overflow: hidden;
        aspect-ratio: 1/1;
        position: absolute;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        filter: drop-shadow(0 0 30px var(--light-blue));
    }
    img
    {
        width: 100%;
        height: 100%;
    }
    .bio
    {
        left: 30px;
        width: 35%;
        height: 85%;
        display: flex;
        overflow: hidden;
        position: absolute;
        border-radius: 20px;
        flex-direction: column;
        font-family: var(--font-1);
        justify-content: space-around;
        animation: slideleft 5s ease-in-out;
    }
    .greet
    {
        display: flex;
        font-size: larger;
        font-weight: bold;
        justify-content: center;
        text-shadow: 0 0 20px white;
    }
    
    .job
    {
        z-index: 50;
        width: 110%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .typewrite
    {
        margin: 0;
        padding: 0;
        width: 110%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wrap
    {
        margin: 0;
        padding: 0;
        height: 100%;
        display: flex;
        color: gold;
        padding: 0 10px;
        width: fit-content;
        font-size: xx-large;
        font-weight: bolder;
        border-radius: 20px;
        justify-content: center;
        font-family: 'Consolas';
        backdrop-filter: blur(5px);
        text-shadow: 0 0 20px var(--light-blue);
        background-color: rgba(135, 135, 222, 0.208);
    }
    .sum
    {
        width: 100%;
        display: flex;
        height: 300px;
        overflow: hidden;
        font-weight: bold;
        font-size: x-large;
        border-radius: 20px;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
        background-color: rgba(41, 41, 194, 0.042);
        font-family: 'Agency FB','Banshcrift','Consolas';
    }
    .sum .title
    {
        top: 0;
        z-index: 1;
        width: 60%;
        height: 40px;
        position: absolute;
    }
    .sum .title .words
    {
        z-index: 50;
        width: 100%;
        height: 100%;
        font-size: 50%;
        font-weight: bolder;
        color: var(--dark-blue);
        font-family: var(--font-1-B);
    }
    .blur
    {
        z-index: -100;
        aspect-ratio: 1/1;
        position: absolute;
        border-radius: 50%;
    }
    .blue
    {
        top: 0;
        left: 0;
        width: 10px;
        border: none;
        background-color: var(--light-blue);
        box-shadow: 0 0 60px 70px var(--light-blue);
    }
    .gold
    {
        bottom: 0;
        right: 30%;
        width: 10px;
        border: none;
        background-color: var(--gold);
        box-shadow: 0 0 60px 70px var(--gold);
    }
    .white
    {
        width: 10px;
        border: none;
        background-color: white;
        box-shadow: 0 0 60px 70px white;
        right: 0;
        top: 0;
        position: absolute;
    }
    .socials
    {
        justify-content: space-around;
        align-items: center;
        border-radius: 20px;
        position: absolute;
        list-style: none;
        display: flex;
        z-index: 100;
        height: 10%;
        width: 90%;
        bottom: 5%;
    }
    .socials li
    {
        height: 90%;
        padding: 10px;
        display: flex;
        transition: 0.5s;
        aspect-ratio: 1/1;
        border-radius: 20px;
        border: solid var(--light-blue);
        background: var(--deg45-blue-gradient);
    }
    .socials li:hover
    {
        border: none;
        box-shadow: 0 0 40px 1px var(--light-blue);
    }
    
    .socials p
    {
        display: none;
        animation: zoomfade 0.5s ease-in-out forwards;
    }
    .socials li:hover #note
    {
        display: contents;
        width: 150px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -70%;
        font-weight: 900;
        border-radius: 20px;
        border: solid white 2px;
        font-family: 'Agency FB', 'Banshcrift', 'Consolas';
        background: var(--deg45-blue-gradient);
    }
    
    .products
    {
        width: 30%;
        right: 35px;
        height: 90%;
        display: flex;
        position: absolute;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
    }
    .product
    {
        height: 30%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .product li
    {
        animation: zoomfade 2s forwards ease-in-out;
        background-color: rgba(0, 0, 255, 0.2);
        backdrop-filter: blur(5px);
        border-radius: 20px;
        list-style: none;
        animation-delay: 1s;
        overflow: hidden;
        height: 100%;
        width: 47%;
    }
    .gap
    {
        height: 20dvh;
    }
    #services
    {
        height: 80vh;
        width: 90dvw;
        margin: 10px;
        padding-top: 50px;
        align-items: center;
        border-radius: 20px;
        flex-direction: column;
        justify-content: space-around;
        box-shadow: 5px 5px 20px black;
    }
    #services .ring
    {
        z-index: -100;
        width: 20%;
        --glow: blue;
        overflow: hidden;
        aspect-ratio: 1/1;
        border-radius: 50%;
        border: solid var(--glow) 5px;
        box-shadow: 0 0 20px 8px var(--glow),
        0 0 20px 5px var(--glow) inset;
    }
    #services .serv-title
    {
        width: 50%;
        height: 10%;
        color: gold;
        margin-left: 25%;
        font-size: x-large;
        border-radius: 30px;
        backdrop-filter: blur(20px);
        font-family: var(--font-2-I);
        background-color: rgba(255, 255, 255, 0.13);
    }
    #services .icons
    {
        width: 100%;
        height: 90%;
        display: flex;
        transition: 0.5s;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;
    }
    #services .row
    {
        height: 50%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    #services .det
    {
        color: white;
        font-weight: 900;
        font-size: larger;
        font-family: var(--font-1-B);
    } 
    #services .view
    {
        width: 50%;
        height: 10%;
        padding: 5px;
        transition: 0.5s;
        font-size: medium;
        font-weight: bold;
        font-style: italic;
        border-radius: 20px;
        font-family: 'Agency FB';
        background-color: blue;
    }
    #services .send:hover
    {
        box-shadow: 
        0 0 20px 1px blue,
        0 0 50px 1px var(--light-blue),
        0 0 40px 1px rgb(1, 1, 52);
    }
    #mech,#elec,#cad,#web,#graphic,#brand
    {
        width: 80%;
        height: 73%;
        border: none;
        color: white;
        transition: 0.4s;
        background: none;
        margin-left: 10%;
        margin-top: 170px;
        border-radius: 20px;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(30px);
        animation: zoomfade 0.2s forwards ease-in-out;
    }
    #services .det
    {
        color: white;
        font-weight: 900;
        font-size: larger;
        font-family: var(--font-1-B);
    } 
    #x-btn
    {
        height: 70px;
        font-weight: 900;
        aspect-ratio: 1/1;
        border-radius: 50%;
        font-size: xx-large;
        border: solid white;
        color: var(--dark-blue);
        background: conic-gradient(white,grey, white,grey, white);
    }
    
    #services .detail
    {
        bottom: 0;
        width: 60%;
        height: 70%;
        display: flex;
        transform: none;
        overflow: hidden;
        margin-left: 50px;
        position: absolute;
        border-radius: 20px;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;
    }
    #services .pops
    {
        background-color: none;
        backdrop-filter: blur(5px);
    }
    #services .header
    {
        text-shadow: 1px 1px 0px var(--dark-blue);
        background: var(--deg45-gold-gradient);
        border: solid var(--dark-gold);
        color: var(--dark-gold);
        border-radius: 20px;
        font-size: 120%;
        height: 15%;
        width: 45%;
    }
    #services .detail
    {
        right: 0;
        bottom: 0;
        width: 45%;
        height: 80%;
        background-color: rgba(1, 1, 78, 0.5);
    }
    #services .detail li
    {
        width: 80%;
        transform: none;
        transition: 0.3s;
        border-radius: 5px;
        border: solid var(--light-blue);
        background: var(--deg45-blue-gradient);
        box-shadow: 0 0 10px 1px var(--light-blue);
    }
    #services .detail p:hover
    {
        border: none;
        transform: none;
        box-shadow: 0 0 45px 5px var(--light-blue);
    }
    #services .slide
    {
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 20px;
        position: absolute;
        aspect-ratio: 1/1;
        height: 75%;
        bottom: 0;
        right: 50%;

    }
    #services .links
    {
        background-color: rgba(0, 0, 255, 0.5);
        justify-content: space-around;
        height: 15%;
        width: 35%;
        right: 50%;
        top: 0%;
    }
    #services .links :nth-child(2)
    {
        color: blue;
        font-size: large;
        font-weight: bolder;
        background: var(--deg45-blue-gradient);
    }
    .skills
    {
        width: 95vw;
        margin: 10px;
        height: 87vh;
        display: flex;
        overflow: hidden;
        padding-top: 20px;
        align-items: center;
        border-radius: 20px;
        flex-direction: row;
        box-shadow: 5px 5px 20px black;
    }
    .skill
    {
        flex-direction: column;
        border-radius: 20px;
        align-items: center;
        display: flex;
        padding: 5px;
        height: 95%;
        width: 100%;
        margin: 5px;
    }
    .skill h2
    {
        font-family: var(--font-1-B);
        background-color: blue;
        justify-content: center;
        color: var(--dark-blue);
        border: solid blue;
        align-items: center;
        border-radius: 20px;
        padding: 0 10px;
        display: flex;
        height: 10%;
        width: 60%;
    }
    .chart-container
    {
        border-radius: 10px;
        aspect-ratio: 1/1;
        height: 90%;
    }
    .programming-stats
    {
        width: 95%;
        height: 90%;
        display: flex;
        padding: 8px 32px;
        flex-direction: row;
        align-items: center;
        border-radius: 20px;
        color: var(--light-blue);
        transition: all 400ms ease;
        justify-content: space-around;
    }
    .programming-stats .details
    {
        backdrop-filter: blur(20px);
        justify-content: center;
        border-radius: 10px;
        align-items: center;
        overflow-y: scroll;
        aspect-ratio: 1/1;
        display: flex;
        height: 100%;
        width: 40%;
    }
    .programming-stats .details ul
    {
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
        list-style: none;
        display: flex;
        height: 100%;
        padding: 0;
        width: 95%;
    }
    .programming-stats .details ul li
    {
        background-color: var(--mid-blue);
        justify-content: space-around;
        text-transform: uppercase;
        border: solid blue;
        border-radius: 10px;
        align-items: center;
        font-weight: bolder;
        color: lightblue;
        padding-left: 10%;
        font-size: 20px;
        display: flex;
        height: 10%;
        width: 90%;
        margin: 0;
    }
    .programming-stats .details .percentage
    {
        font-weight: 700;
        font-size: 50px;
        color: white;
    }

    span
    {
        width: 100%;
        display: flex;
        font-size: 50px;
        font-weight: bold;
        align-items: center;
        color: var(--mid-blue);
        justify-content: center;
    }
    
    .contacts
    {
        width: 99%;
        height: 90%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
    }
    form
    {
        width: 40%;
        height: 80%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
    }
    .contact-form input
    {
        width: 90%;
        height: 10%;
    }
    .contact-form textarea
    {
        width: 90%;
        height: 50%;
        resize: none;
        padding: 10px;
        font-size: medium;
        border-radius: 20px;
        font-family: 'Agency FB';
    }
    .contact-form button
    {
        height: 10%;
        width: 200px;
        border: none;
        color: white;
        cursor: pointer;
        transition: 0.3s;
        font-size: larger;
        font-weight: bolder;
        border-radius: 20px;
        background-color: var(--light-blue);
    }
    .contact-list
    {
        gap: 2%;
        width: 40%;
        height: 80%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
    }
    .contact-list .c-link
    {
        width: 100px;
        height: 100px;
        list-style-type: none;
    }
}

@media screen and (max-width: 1000px) 
{
    .pi
    {
        display: none;
    }
    .bio .low
    {
        display: none;
    }
    .serv-ring img
    {
        border-radius: 50%;
        animation: revolution 15s  linear infinite;
    }
    .t-second
    {
        top: 0;
        right: 45%;
        width: 20%;
        height: 20px;
        position: absolute;
        background: white;
        transform: skewX(45deg);
    }
    .t-third
    {
        top: 0;
        right: 35%;
        width: 20%;
        height: 20px;
        position: absolute;
        background: white;
        transform: skewX(135deg);
    }
    #intro
    {
        top: 20px;
        width: 93%;
        right: 2.5%;
        height: 45px;
        z-index: 200;
        display: flex;
        position: fixed;
        flex-direction: row;
        align-items: center;
        color: var(--dark-gold);
        scroll-snap-align: start;
    }
    .in-four
    {
        background-color: white;
        transform: skewY(-45deg);
        position: absolute;
        height: 75px;
        left: 79.9%;
        width: 2%;
        top: -5px;
    }
    .bar
    {
        color: var(--dark-blue);
        justify-content: start;
        align-items: bottom;
        font-weight: 900;
        position: fixed;
        font-size: 5vw;
        display: flex;
        height: 45px;
        width: 120px;
        z-index: 200;
        top: 10px;
        margin: 0;
        left: 5%;
    }
    .bar .img
    {
        display: none;
    }
    .bar .sign
    {
        height: 99%;
    }
    .sign img
    {
        height: 100%;
        width: 100%;
    }
    .cit
    {
        display: none;
    }
    .tabs
    {
        width: 95%;
        height: 100%;
        display: flex;
        list-style: none;
        align-items: center;
        backdrop-filter: blur(5px);
        box-shadow: black 0 0 10px;
        justify-content: space-between;
    }
    .tabs li
    {
        width: 30%;
        height: 100%;
        color: red;
        display: flex;
        font-size: large;
        font-weight: bold;
        align-items: center;
        justify-content: center;
        font-family: var(--font-1-B);
    }
    .tabs li a
    {
        justify-content: center;
        align-items: center;
        display: flex;
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .tabs a:hover
    {
        font-weight: bold;
        transition: 0.25s;
        color: var(--light-blue);
        text-shadow: 0 0 20px var(--light-blue);
    }
    a
    {
        color: white;
        font-size: 3.5vw;
        text-decoration: none;
    }
    main
    {
        width: 90dvw;
        height: 90dvh;
        display: flex;
        flex-wrap: wrap;
        padding-top: 10%;
        overflow: hidden;
        margin-left: 50dvw;
        border-radius: 20px;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
        box-shadow: 5px 5px 20px black;
    }
    .products
    {
        display: none;
    }
    #main-ld
    {
        top: 50%;
        left: 50%;
        margin: 0;
        padding: 0;
        width: 110%;
        z-index: -10;
        aspect-ratio: 1/1;
        position: absolute;
        transform: translate(-50%,-50%);
    }
    .pic
    {
        transform: translate(-50%,-50%);
        top: 10%;
        margin: 0;
        padding: 0;
        height: 40%;
        display: flex;
        box-shadow: none;
        overflow: hidden;
        aspect-ratio: 1/1;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 20px 5px var(--ring-color),
        0 0 10px 1px var(--ring-color) inset;
        filter: drop-shadow(0 0 30px var(--light-blue));
    }    
    .banner
    {
        margin: 10px;
    }
    .pic img
    {
        width: 85%;
    }
    img
    {
        width: 100%;
    }
    .bio
    {
        width: 85%;
        height: 40%;
        bottom: 10px;
        margin: 10px;
        padding: 10px;
        display: flex;
        overflow: hidden;
        position: absolute;
        border-radius: 20px;
        flex-direction: column;
        font-family: var(--font-1);
        backdrop-filter: blur(25px);
        justify-content: space-around;
        box-shadow: 0 0 25px var(--mid-blue);
        background-color: rgba(41, 41, 194, 0.042);
    }
    .greet
    {
        display: flex;
        font-size: 3vw;
        font-weight: bold;
        justify-content: center;
        text-shadow: 0 0 20px white;
    }
    .wrap
    {
        padding: 0;
        width: 100%;
        height: 30px;
        display: flex;
        color: gold;
        font-size: 6vw;
        font-weight: bold;
        margin-bottom: 10px;
        justify-content: center;
        font-family: var(--font-3-C);
        text-shadow: 0 0 20px yellow;
    }
    .sum
    {
        display: flex;
        font-size: 3.5vw;
        margin-bottom: 10px;
        justify-content: center;
    }
    .sum .title
    {
        display: none;
    }
    .socials
    {
        display: none;
    }
    .docs
    {
        gap: 10%;
        display: flex;
        list-style: none;
        align-items: center;
        justify-content: center;
    }
    .docs li
    {
        width: 10%;
        height: fit-content;
        animation: slideup 1s forwards ease-in-out;
    }
    .docs li img
    {
        width: 100%;
        aspect-ratio: 1/1;
    }
    .docs p
    {
        display: none;
    }
    .gap
    {
        height: 30px;
    }
    .deli-tab
    {
        display: none;
    }
    #services
    {
        margin: 0;
        padding: 0;
        width: 90%;
        margin: 10px;
        height: 97vh;
        display: flex;
        align-items: center;
        border-radius: 20px;
        flex-direction: column;
        justify-content: start;
        scroll-snap-align: start;
        box-shadow: 5px 5px 20px black;
    }
    #services .ring
    {
        transform: translate(-50%,-50%);
        aspect-ratio: 1/1;
        height: 50%; 
        top: 50%;
    }
    #services .icons
    {
        width: 100%;
        height: 90%;
        display: flex;
        flex-wrap: wrap;
        transition: 0.5s;
        align-items: center;
        flex-direction: row;
        justify-content: space-evenly;
    }
    #services button
    {
        width: 300px;
        height: 30%;
        gap: 10px;
    }
    #services span
    {
        width: 50%;
        padding: 0;
        height: 6%;
        display: flex;
        color: gold;
        margin-top: 5%;
        font-size: 200%;
        font-weight: 900;
        align-items: center;
        border-radius: 30px;
        justify-content: center;
        backdrop-filter: blur(20px);
        font-family: var(--font-2-I);
        background-color: rgba(255, 255, 255, 0.13);
    }      
    #services .serv-bg
    {
        transform: translateX(-50%);
        flex-direction: column;
        left: 50%;
    } 
    #services .st1
    {
        top: 20%;
        left: 10%;
    }
    #services button:hover
    {
        box-shadow: 0 0 50px 5px var(--light-blue);
    }
    #web,#mech,#elec,#cad,#graphic
    {
        width: 80%;
        height: 80%;
        border: none;
        color: white;
        margin-top: 20%;
        transition: 0.4s;
        background: none;
        margin-left: 10%;
        overflow: visible;
        border-radius: 20px;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(50px);
        animation: zoomfade 0.2s forwards ease-in-out;
    }
    #x-btn
    {
        width: 70px;
        height: 70px;
        font-weight: 900;
        border-radius: 50%;
        font-size: xx-large;
        border: solid white;
        color: var(--dark-blue);
        background: conic-gradient(white,grey, white,grey, white);
    }
    #services .header
    {
        width: 50%;
        height: 70px;
        font-size: larger;
        color: var(--gold);
        border-radius: 0 20px;
        text-shadow: 1px 2px 0 black;
        background: var(--deg45-blue-gradient);
    }
    #services .slide
    {
        display: none;
    }
    #services .links
    {
        margin: 0;
        padding: 0;
        width: 98%;
        bottom: 72%;
        height: 10%;
    }
    #services .links .link
    {
        width: 30%;
        height: 90%;
        font-size: x-large;
    }
    #services .detail
    {
        left: 0;
        bottom: 0;
        width: 99%;
        height: 70%;
        display: flex;
        overflow: hidden;
        position: absolute;
        border-radius: 20px;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .detail li
    {
        width: 80%;
        height: 10%;
        color: white;
        font-size: x-large;
        border: solid blue;
        list-style-type: square;
        background-color: var(--dark-blue);
        display: flex;
        align-items: center;
        justify-content: center;
        transform: none;
    }
    .detail p:hover
    {
        transform: none;
        transition: 0.3s;
        color: var(--dark-blue);
        background: var(--light-blue);
        box-shadow: 0 0 10px 5px blue;
    }
    .skills
    {
        width: 95vw;
        margin: 10px;
        height: 95vh;
        display: flex;
        overflow: hidden;
        align-items: center;
        border-radius: 20px;
        flex-direction: row;
        justify-content: start;
        box-shadow: 5px 5px 20px black;
    }
    .skill
    {
        height: 90%;
        padding: 1px;
        display: flex;
        margin-left: 4%;
        width: fit-content;
        border-radius: 20px;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
    }
    .skill h2
    {
        font-family: var(--font-1-B);
        background-color: blue;
        justify-content: center;
        color: var(--dark-blue);
        align-items: center;
        border-radius: 50px;
        font-size: 3dvh;
        padding: 0 10px;
        display: flex;
        height: 10%;
        width: 90%;
    }
    .programming-stats
    {
        gap: 24px;
        height: 100%;
        width: 90dvw;
        display: flex;
        padding: 10px;
        margin-top: 10%;
        align-items: center;
        border-radius: 20px;
        flex-direction: column;
        color: var(--light-blue);
        transition: all 400ms ease;
        justify-content: space-around;
        overflow-y: scroll;
    }
    .chart-container
    {
        width: 80%;
        aspect-ratio: 1/1;
        border-radius: 50%;
    }
    .programming-stats:hover
    {
        box-shadow: 0 4px 16px -7px rgba(0, 0, 0, 0.3);
    }
    
    .programming-stats .details
    {
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
        border-radius: 30px;
        display: flex;
        height: 40%;
        width: 95%;
        padding: 0;
        margin: 0;
    }
    
    .programming-stats .details ul
    {
        padding: 0;
        width: 100%;
        height: 100%;
        display: flex;
        list-style: none;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .programming-stats .details ul li
    {
        width: 90%;
        height: 20%;
        display: flex;
        color: white;
        font-size: xx-large;
        border-radius: 10px;
        font-weight: bolder;
        align-items: center;
        justify-content: center;
        background-color: blue;
        text-transform: uppercase;
    }
    
    .programming-stats .details .percentage
    {
        font-weight: 700;
        color: white;
    }
    
    #contacts
    {
        width: 95dvw;
        margin: 10px;
        height: 100vh;
        display: flex;
        align-items: center;
        border-radius: 20px;
        flex-direction: column;
        scroll-snap-align: start;
        box-shadow: 5px 5px 20px black;
    }
    #contacts p
    {
        padding: 10px;
        font-size: 3vh;
        font-weight: bold;
        color: var(--light-blue);
        text-shadow: var(--dark-gold) 0 0 10px;
    }
    .contacts
    {
        width: 99%;
        height: 90%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
    }
    .contact-title
    {
        height: 70px;
    }
    .contact-form
    {
        width: 90%;
        height: 30%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
    }
    .contact-form input
    {
        width: 90%;
        height: 10%;
    }
    .contact-form textarea
    {
        width: 90%;
        height: 50%;
        resize: none;
        padding: 10px;
        font-size: medium;
        border-radius: 20px;
        font-family: 'Agency FB';
    }
    .contact-form button
    {
        height: 10%;
        width: 200px;
        border: none;
        color: white;
        cursor: pointer;
        transition: 0.3s;
        font-size: larger;
        font-weight: bolder;
        border-radius: 20px;
        background-color: var(--light-blue);
    }
    hr
    {
        width: 70%;
        border: ridge white;
    }
    .contact-list
    {
        gap: 2%;
        width: 90%;
        height: 50%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
    }
    .contact-list .c-link
    {
        width: 200px;
        height: 200px;
        list-style-type: none;
    }
}