.middle{
    height:75vh;
}
form{
background-color: rgba(243, 208, 95, 0.2);
display:flex;
flex-direction:column;
padding-top: 0px;
width:90%;
border-radius: 5px;
font-size: 1em;
height:90vh;
font-family:sans-serif;
overflow-y:scroll
}

form .content, form .title{
display:flex;
flex-direction:column;
gap:5px;
justify-content: center;
align-items:center;
}

form .title{
background-color:goldenrod;
margin:0;
margin-bottom:20px;
padding:10px;
font-weight:bold;
border-radius:0 0 30px 30px;
align-items:center;
}

form .box{
width:60%;
height: 1.4em;
bottom:10px;
border:0;
border-radius: 5px;
background-color: whitesmoke;
font-size: 0.9em;
padding:5px;
}

.btnLogin{
text-decoration:none;
color:wheat;
border:1px solid #f44336;
background: transparent;
cursor:pointer;
padding:10px;
margin-bottom:20px;
width:30%;
}
.btnLogin:hover{
border:2px solid goldenrod;
background:#f44336;
transition:1s;
}

.register{
font-size: 18px;
margin-top:20;    
}


.register:hover{
border-bottom:none;
border-image:none;
}

.myLi:hover{
border-bottom:5px solid;
border-image:linear-gradient(to right, red, gold, lightgreen, gold, red) 5;
}

.middle{
margin-top:20px;
}

.content a{
margin-top:15px;
background: rgb(250, 234, 193);
padding:10px;
border:1px solid red;
border-radius: 20px 0 20px 0;

}

.mySubClass ul li,
.mySubClass2 ul li,
.mySubClass3 ul li{
padding-top:20px;
}

.mySubClass0{
margin:5px;
padding: 0 10px 10px 30px;
line-height:30px;
border-radius:20px 0px 20px 0px;
}

.mySubClass{
margin:15px;
padding: 0 10px 10px 30px;
line-height:30px;
background:lightblue;
border-bottom:5px solid darkblue;
border-left:5px solid darkblue;
border-right:5px solid darkblue;
}

div.mySubClass > p:first-child::before,
div.mySubClass2 > p:first-child::before,
div.mySubClass3 > p:first-child::before{
display:block;
content:"INSTRUCTOR";
font-weight:bold;
font-size:14px;
letter-spacing:2pt;
color:white;
background:darkblue;
text-transform:uppercase;
text-align:center;
margin: 4px -8px 10px -8px;
}

div.mySubClass > p:first-child::before{
content:"INSTRUCTOR";
}
div.mySubClass2 > p:first-child::before{
content:"STUDENT";
background:darkgreen;

}
div.mySubClass3 > p:first-child::before{
content:"INDIVIDUAL";
background:#CC5500;
}

.mySubClass2{
margin:15px;
padding: 0 10px 10px 30px;
line-height:30px;
background:#d1ffbd;
border-bottom:5px solid darkgreen;
border-left:5px solid darkgreen;
border-right:5px solid darkgreen;
}

.mySubClass3{
margin:15px;
padding: 0 10px 10px 30px;
line-height:30px;
background:#FFF5EE;
border-bottom:5px solid #CC5500;
border-left:5px solid #CC5500;
border-right:5px solid #CC5500;
}

@media (max-width:480px){
form{
    width:94%;
}
.mySubClass, .mySubClass2, .mySubClass3{
margin:5px;
padding: 0 10px 5px 20px;
}

}