* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    height: 0;
    overflow-x: clip;
}

body {
    background-color: #000000;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23152368' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%230A2F55'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
}
* {
    margin: 0;
    padding: 0;
}

.nav {
   top: fixed;
    right: 0;
    left: 0;
    bottom: 0; 
    display: grid;
    justify-content: center;
    align-items: center;
}
.nav p a {
    text-decoration: none;
}


.nav p .what:hover {
    filter: drop-shadow(0 0 10px green);
}

.nav p .mail {
    color: black;
    background-color: white;
    border: double;
}
.nav p .mail:hover {
    border: groove;
}


h1 {
    color: skyblue;
    text-align: center;
    margin-top: 10px;
    text-shadow: 0 0 5px;
}


p {
   color: skyblue; 
    
}

.dp{
    width: 100%;
    height: 314px;
    padding: 0;
    margin: 0 auto;
    margin-top: 55px;
    justify-content: center;
    gap: 29px;
    display: grid;
    align-items: center;
}

@media(min-width: 768px) {
    .dp {
        display: flex;
        height: 250px;
        margin-bottom: 100px;
    }
}

@media(min-width: 1200px) {
    .dp {
        display: flex;
        height: 200px;
        margin-bottom: 100px;
        gap: 90px;
        scale: 1.3;
    }
    
}
.dp a {
    display: inline-flex;
    height: 100%;
    width: 250px;
    background-color: rgba(135, 206, 235, 0.5);
    border-radius: 15px;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    text-decoration: none;
    color: skyblue;
}

.dp a:hover {
    transform: translateY(10px) scale(1.1);
    transition: 0.3s;
    animation: bg 0.3s ease-in-out forwards;
    box-shadow: 0 0 10px;
}

@keyframes bg {
    0% {transform: translateX(0);}
    35% {transform: translateX(5px);}
    75% {transform: translateX(-5px) scale(1.1);}
    100% {transform: translateX(0) scale(1.1);}
    
}

mark {
    background-color: transparent;
    color: skyblue;
}
.contact {
    position: fixed;
    bottom: 0;
}
.news {
    width: 10rem;
    display: flex;
   
}
.mag {
    width: 10rem
}
.aa {
    text-decoration: none;
    color: skyblue;
    font-size: 10px;
}

#news {
    display: flex;
   flex-wrap: wrap;
    gap: 15px;
    margin: 10px auto;
    justify-content: center;
    align-items: center
}

footer{
    background-color: #0b0f19;
    width: 100%;
    bottom: 0;
    padding: 20px;
    padding-bottom: 0;
}
footer p {
    color: #64748b
}
footer p mark {
    color: olive;
    text-shadow: 0 0 10px
}