<style>

        html {
        font-family: "Lucida Sans", sans-serif;
        }

        body {
        margin: 0;
        font-family: Verdana, Geneva, sans-serif;
        background-image: url(https://i.ibb.co/n3T1FCv/purpss8.jpg);
        background-attachment: fixed;
        line-height:1.5;
        word-wrap: break-word;
        }
        
        .midframe {
        background: rgb(255,255,255);
        background: rgba(255,255,255,0.3);
        width: 80%; 
        margin:auto; 
        border-radius: 21px;
        margin-top: 2%;

        }
.studies{
    font-size:12px;
    font-style:oblique;
    
}

h1{color:rgb(200,55,88);
display:block;

text-align:center;}

h2{text-align:center}

        
        .rotate {
        animation: rotation 12s infinite linear;
        width:10%;  
        display: block; 
        margin-left: auto; 
        margin-right: auto; 
        margin-top: 1%; 
        padding:1%;
        transition:3.14s;
        }
a{font-size: 12px;color:rgb(148,57,78)
}

        .rotate:hover {
        animation: rotation 3.46s infinite linear;
        transition:3.14s;
        width:16.18%;
        opacity: 0.786;
        }

        @keyframes rotation {
        from {
        transform: rotate(0deg);
        }
        to {
        transform: rotate(359deg);
        }
        }

        .imgtxt {
        display:block;
        margin:auto; 
        text-align:center;
        width:61.8%;
        padding:3%;
        border-radius:7%;
        }

        .people{
        display:block;
        margin:auto; 
        text-align:center;
        width:16.8%;
        padding:2%;
        border-radius:21%;
        }

        .video{
        width: 450px;
        height: 253px;
        padding:3%;
        display:block;
        margin:auto; 
        text-align:center;
        }
        
        .topnav {
        overflow: hidden;
        background: rgb(255,255,255);
        background: rgba(255,255,255,0.3);
        font-family: "Lucida Console";
        width:inherit;
        transition: 3.14s;
        font-style:italic;
        font-weight:900;

        
        }

        .topnav a {
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        transition:3.14s;
                   
        }

        .topnav a:hover {
        background-color:rgba(255,255,255,0.6);
        color: rgb(57, 43, 123);
        transition: 0.3s;
        border-radius: 42px;
        
        }

        .topnav a.active {
        background-color: #4CAF50;
        color: white;
        }

        .topnav .icon {
        display: none;
        }

        @media screen and (max-width: 600px) {
        .topnav a:not(:first-child) {display: none;}
        .topnav a.icon {
        float: right;
        display: block;
        }
        }

        @media screen and (max-width: 600px) {
        .topnav.responsive {position: relative;}
        .topnav.responsive .icon {
        position: fixed;
        right: 0;
        top: 0;
        }
        .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
        }
        }

        {
        box-sizing: border-box;
        }

    .row::after {
    content: "";
    clear: both;
    display: table;
    background-color:burlywood;
    }

    [class*="col-"] {
    float: left;
    padding: 15px;
    border-color:rgba(255,255,255,0.3);
    border-width: 5px;
    border-style:double;
    background: rgb(255,255,255);
    background: rgba(255,255,255,0.27);
    }

    @media (max-width:1200px){
        .col-1 {width: 8.33%;}
.col-2 {width: inherit; border-bottom-left-radius: 21px; border-bottom-right-radius: 21px; border-width:0.0px; position: relative; position:inherit;font-size: 70%}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: inherit; border-radius: 21px; margin: 0.5%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
        }




            
    @media (min-width:1200px){
      .col-1 {width: 8.33%;}
.col-2 {width: 21.4%; border-bottom-left-radius: 21px; border-bottom-right-radius: 21px; border-width:0.0px; position: sticky; font-size: 70%; -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */}
    .col-9:active {

    opacity: 1;
    transition: opacity 1s linear;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 61.8%; border-radius: 21px; margin: 0.5%; position:absolute;     -moz-animation: fadein 1.618s; /* Firefox */
    -webkit-animation: fadein 1.618s; /* Safari and Chrome */
    -o-animation: fadein 1.618s; /* Opera */}
    .col-9:active {
 
    opacity: 1;
    transition: opacity 1s linear;
    }
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
      }
        
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
        background: rgb(255,255,255);
    background: rgba(255,255,255,0.001);;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: rgb(200,55,88);
  color: whitesmoke;
    font-family: "Lucida Console";
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        transition: 3.14s;
}

.menu li a{
    display: block;
    text-decoration: none; 
    color: aliceblue; 
    width:auto;
}

.menu li:hover {
  background-color: rgb(155,55,88);
    color:white;
    transition: 0.314s;
    border-top-left-radius: 16.2px;
    border-top-right-radius: 22px;
}

.menumu li {
  padding: 7px;
    padding-top: 12px;
  color: black;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  background-color: rgb(155,55,88);
border-radius: 10px;
}

.menumu li:hover {
  background-color:darkred;
    border-radius: 10px;
    background-color: rgb(200,55,88);
}

.alink {
 text-decoration: none;
color:black;
 display: block;
 width: 100%;
 height: 100%;
}

        #footer {
        margin-left: auto;
        margin-right: auto;
        bottom: 0;
        width: 100%;
        height: 2em;
        }

#test {
    padding:2%;
    font-size: 21px;
    text-align: center;
    animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}





    </style>
