@font-face {
  font-family: 'Rachana';
  src: url('Rachana-Regular.ttf') format('woff2'),
       url('Rachana-Regular.ttf') format('woff');
  font-weight: normal;
  font-style: normal;
}

html, body {
  overflow-x: hidden;
}

@keyframes spin {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}


@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}


body {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);

}

header,footer {
    background-color: rgb(4, 13, 49);
    padding: .2%;
    width: 100%;
    top: 0;

    
}

header{
        z-index: 1;
            position: fixed;
                left: 0;
}

footer{
padding: 1pc;
    text-align: center;
    bottom: 0;
    
}

footer a{
    color: aliceblue;
    white-space: nowrap;
    margin: 1pc 0.75pc;

}

h1.mainhead{
    font-size: 5pc;
    margin-bottom: -1pc;
        text-shadow: black .5pc .5pc .25pc;
}



.mainhead {
    font-family: sans-serif;
    color: rgb(1, 157, 248);
        transition: 0.3s ease;
    transform-origin: top
}



h2.mainhead {
    letter-spacing: .5pc;
        text-shadow: black .5pc .5pc .25pc;

}


header h1, header h2 {
    margin-bottom: 10px;
    transition: all 0.4s ease-in-out;
}


header.shrunk h1 {
    font-size: 2.5rem;
}

header.shrunk h2 {
    font-size: 1.2rem;
}

section {
    padding: 20px;
    transition: margin-top 0.4s ease-in-out;
}

section p{
    font-family: 'Rachana', serif;
    font-size: 1.5pc;
}

h1,h2{
    text-align: center  ;
}

img.titleimg{
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 30pc;
}

div.homelist {
    display: flex;

    gap: 1pc;
    border-radius: 2pc;
    border: .2pc solid;
    padding: .6pc;
    margin: .5pc;


    align-items: center;  /* vertically center the texts with the image */
        /* space between image and text */
        /* adjust as needed */


    box-sizing: border-box;


}
div.homelist img{
    width: 10pc;
    height: 5pc;
    border-radius: 1pc;
    display: block;
}

div.homelist .texts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    align-items: flex-start;
    text-align: left;

}

div.homelist .texts span{
    font-size: 1.5pc;
    margin: 0;

    flex: 1 1 45%;
    padding: 5px 10px;
    border-radius: 5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: left;


}



div.spacer{
    height: 5pc;
}

div.another {
    padding: 1pc;
    padding-top: 0.001pc;
    display: block;
    margin: 0 auto;
    margin-top: 3   pc;
    margin-bottom: 2pc;
    min-width: 10pc;
    width: 90%;
    max-width: 50pc;
    height: 90%;
}

img.logo {
    height: 20pc;
    max-width: 97%;
    border-radius: 15%;
}


div.logo {
    position: relative;
    padding: 0;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-top: 3pc;
    margin-bottom: 3pc;
    width: max-content;
    background-color: rgb(0, 0, 0);
    border-radius: 15%;
}

div.logo::before,
div.logo::after {
    --angle: 0deg;
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    top: 0%;
    left: 0%;
    z-index: -1;
    background-image: conic-gradient(from var(--angle), rgb(1, 157, 248), rgb(99, 139, 235), rgb(1, 157, 248));
    filter: blur(1pc);
    opacity: 0.5;
    border-radius: 15%;
    animation: spin 1.5s linear infinite;
}

div.glow {
    position: relative;
    background-color: rgb(212, 230, 241);
    border-radius: 2pc;
}

div.glow::after,
div.glow::before {
    --angle: 0deg;
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background-image: conic-gradient(from var(--angle), rgb(17, 0, 255), rgb(144, 171, 230), rgb(17, 0, 255));
    z-index: -1;
    padding: 5px;
    border-radius: 2pc;
    animation: spin 1.5s linear infinite;
}



div.glow::before {
    filter: blur(1pc);
    opacity: 0.5;
}




h1,
h2,
button {
    text-align: center;
    font-weight: bolder;
    color: rgb(0, 0, 0);
}

a{
   text-align: center;
    color: rgb(0, 0, 0); 
}

button {
    border-radius: 2pc;
    background-color: rgb(64, 85, 204);
    width: 75%;
    max-width: 30pc;
    font-size: 1.5pc;
    padding: 0.3pc;
    margin: 0 0.5pc;
}

.botpos {
    text-align: center;
    font-size: 1.5pc;
    width: 100%;
    bottom: 1pc;
    translate: -.5pc;
    position: absolute;
    display: block;
    margin: 0 auto;
}

.butlink {
    text-align: center;
    width: 100%;
    display: block;
    margin: 0 auto;
    margin-top: 1pc;

}



.textmarg {
    margin: 1pc;
    line-height: 2pc;
}

.topmarg {
    margin-top: 1pc;
}

.marg {
    margin: 2pc;
}

h1.subhead {
    font-size: 2pc;
}

h2.sidehead {
    text-align: left;
    margin-left: 1pc;
    margin-top: 3pc;
}

li {
    font-size: 1.25pc;
    margin-bottom: 0.5pc;
}

@media screen and (max-width:768px) {
    h1.mainhead {
        font-size: 4pc;
    }

    .marg {
        margin: 1pc;
    }

    div.homelist img{
        width: 7pc;
    }

    div.homelist .texts span{
        font-size: 1.4pc;
    }

}

@media screen and (max-width:480px) {
    h1.mainhead {
        font-size: 3pc;
    }

    .marg {
        margin: 0.25pc;
    }
    
    div.homelist img{
        width: 5pc;
    }

    div.homelist .texts span{
        font-size: 1.2pc;
    }
}