html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0 0;
    font: 2.2em sans-serif;
    font-family: Arial, Helvetica, sans-serif;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: rgb(70, 70, 80);
    background:
        radial-gradient(50px circle at top 70px right 18%, rgb(255, 255, 255) -150%, rgba(0, 0, 0, 0) 60%) repeat,
        radial-gradient(50px circle at top 70px right 21%, rgb(255, 255, 255) -150%, rgba(0, 0, 0, 0) 60%) repeat,
        radial-gradient(50px circle at top 90px right 15%, rgb(255, 255, 255) -150%, rgba(0, 0, 0, 0) 60%) repeat,
        radial-gradient(50px circle at top 90px right 20%, rgb(255, 255, 255) -150%, rgba(0, 0, 0, 0) 60%) repeat,
        radial-gradient(50px circle at top 90px right 24%, rgb(255, 255, 255) -150%, rgba(0, 0, 0, 0) 60%) repeat,
        radial-gradient(50px circle at top 60px left 17%, rgb(255, 255, 255) -150%, rgba(0, 0, 0, 0) 60%) repeat,
        radial-gradient(50px circle at top 50px left 22%, rgb(255, 255, 255) -150%, rgba(0, 0, 0, 0) 60%) repeat,
        radial-gradient(50px circle at top 70px left 15%, rgb(255, 255, 255) -150%, rgba(0, 0, 0, 0) 60%) repeat,
        radial-gradient(50px circle at top 80px left 20%, rgb(255, 255, 255) -150%, rgba(0, 0, 0, 0) 60%) repeat,
        radial-gradient(50px circle at top 70px left 24%, rgb(255, 255, 255) -150%, rgba(0, 0, 0, 0) 60%) repeat,
        radial-gradient(20px circle at top 20px left 7%, rgba(70, 230, 70) 50%, rgba(0, 0, 0, 0) 50%) repeat,
        radial-gradient(30px circle at top 26px left 5%, rgba(0, 96, 251) 50%, rgba(0, 0, 0, 0) 50%) repeat,
        radial-gradient(20px circle at top 20px right 5%, rgb(70, 230, 70)50%, rgba(0, 0, 0, 0) 50%) repeat,
        linear-gradient(to bottom, rgb(40, 90, 160, 1) 11px, rgb(96, 210, 237, 1) 150px, rgba(190, 240, 237, 1) 180px);
}

.site {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.site-header {
    min-height: 70px;
    max-height: 120px;
}

.kalilaska {
    margin: 8px;
    text-align: center;
    color: rgb(255, 255, 255);
    text-shadow: 0 1px 1px rgb(40,90,160);
}

.res {
    font-size: 0.7em;
    font-weight: 400;
}

.lg {
    margin: 0;
    color: #ffffff;
    background: linear-gradient(to right top, rgb(255, 255, 255) 0%, rgb(0, 255, 251) 30%, rgb(255, 255, 255) 40%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

main {
    height: auto;
    margin: 0 0;
    padding: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.7), rgba(90, 190, 223, 0.8));
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.about-us {
    text-align: center;
}

.hi {
    font-size: 0.75em;
    margin: 0;
    color: rgb(255, 255, 255);
    text-align: center;
    text-shadow: 0px 0.1px 0px rgb(90, 190, 223);
}

.courses-container {
    margin: 0;
    padding: 0;
}

.course-title {
    font-size: 0.9em;
    margin: 13px 0 3px 9%;
}

.courses-card-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.course-card {
    width: 310px;
    height: 400px;
    margin: 15px;
    padding: 0;
    background: linear-gradient(to left, rgb(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9));
    border-radius: 30px;
}

.course-card:hover {
    background: linear-gradient(to top, rgb(40, 0, 135) 1%, rgba(255, 255, 255, 0.9) 1.1%);
}

.course-card-header {
    padding: 15px;
    height: 120px;
    text-align: center;
    color: rgb(255, 255, 255);
    background: rgb(120, 0, 255, 0.99);
    background:
        linear-gradient(140deg, rgb(255, 255, 255, 0) 95%, rgb(255, 0, 204) 95%),
        linear-gradient(-8deg, rgb(255, 255, 255, 0) 30.5%, rgb(245, 89, 214) 31%, rgb(255, 255, 255, 0) 31%),
        linear-gradient(139deg, rgb(255, 255, 255, 0) 30.5%, rgb(209, 2, 168) 31%, rgb(255, 255, 255, 0) 31%),
        linear-gradient(34deg, rgb(255, 255, 255, 0) 30%, rgb(120, 0, 255) 31%, rgb(255, 255, 255, 0) 31%),
        linear-gradient(to bottom, rgba(226, 2, 181, 0.99), rgba(255, 0, 132, 0.99));
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.course-card h3 {
    margin: 0;
    color: rgb(255, 255, 255);
}

.site-footer {
    margin: 0;
    background: rgb(120, 0, 255, 0.99);
    background: linear-gradient(to bottom, rgb(0, 0, 0, 0.99), rgba(22, 0, 46, 0.99));
}