/*------------The Grid-Layout----------*/
body {
    background-color:#343a40;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3,auto);
    grid-template-areas:
            "header header header header"
            "year_one year_two year_three year_four"
            "footer footer footer footer";
}

header {
    grid-area: header;
}

#courses_4TPIF2 {
    grid-area: year_one;
}
#courses_3TPIF2 {
    grid-area: year_two;
}
#courses_2TPIF2 {
    grid-area: year_three;
}
#courses_1TPIF2 {
    grid-area: year_four;
}

footer {
    grid-area: footer;
}


/*---------Some Text Design--------*/
.WhiCen20 {
    font-size: 150%;
    color: white;
    text-align: left;
    margin-left: 33%;
}
.WhiCen14 {
    font-size: 14px;
    color: white;
}
.Subject {
    font-size: 24px;
    color: #A9FFF7;
}


/*---------The Box Designs And Animations--------*/
.card {
    color: white;
    margin: 0 auto;
    padding: 2em;
    height: 4vw;
    background: #495057;
    text-align: center;
    border-radius: 1vw;
    position: relative;
    font-family: "Verdana", sans-serif;
}

@property --angle {
  syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.card::after, .card::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-image:
            conic-gradient(from var(--angle),#E8AEB7,#94FBAB,#E8AEB7,#94FBAB,#E8AEB7);
    top:50%;
    left:50%;
    translate: -50% -50%;
    z-index: -1;
    padding: 5px;
    border-radius: 10px;
    animation: 3s spin linear infinite;
}
.card::before {
    filter:blur(1.5rem);
    opacity: 0.5;
}
@keyframes spin{
    from{
        --angle: 0deg;
    }
    to{
        --angle: 360deg;
    }
}

.ClassBox {
    margin: 0 auto;
    padding: 2em;
    width: 20vw;
    color: white;
    background: #495057;
    text-align: center;
    border-radius: 10px;
    position: relative;
    font-family: "Verdana", sans-serif;
    overflow: hidden;
}


/*---------Footer Designe--------*/
footer {
    height: 15vw;
    background: #495057;
    color: white;
    display: grid;
    grid-template-rows: 1fr 2fr;
    grid-template-columns: 1fr repeat(3,auto) 1fr;
    grid-template-areas:
            ". f_txt f_txt f_txt ."
            ". f_scl_ttv f_scl_yt f_scl_inst .";
}

#footer_text {
    grid-area: f_txt;
    padding-top: 1vw;
}

#socials_ttv {
    grid-area: f_scl_ttv;
    height: 6vw;
    width: 6vw;
    border-radius: 80%;

    align-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
    overflow: hidden;
}
#socials_inst {
    grid-area: f_scl_inst;
    height: 6vw;
    width: 6vw;
    border-radius: 80%;

    align-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
    overflow: hidden;
}
#socials_yt {
    grid-area: f_scl_yt;
    height: 6vw;
    width: 6vw;
    border-radius: 80%;

    align-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
    overflow: hidden;
}