* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 0.05vw;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
html {
    scroll-behavior: smooth;
    cursor:default;
}
body {
    background-image: url('../images/site-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    color: #1a1a1a;
    font-family:Arial, Helvetica, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.btn-primary {
    color: yellowgreen;
}
.btn-primary:hover{
    color: greenyellow;;
}
.link-primary{
    color: yellowgreen;
}
.link-primary:hover{
    color: greenyellow;
}
.link-primary, .link-primary:hover {
    text-decoration: none;
    font-weight: bolder;
}
.login {
    width: 370px;
    height: min-content;
    padding: 50px;
    border-radius: 0;
    background: whitesmoke;
    border: 0;
}
.login h1{
    font-size: 3vh;
    margin-bottom: 1.25vh;
    font-weight: bold;
}
.login form{
    font-size: medium;
}
.login form .form-group {
    margin-bottom: 1.2vh;
}
.login form input, .login form select{
    border: 0;
    border-radius: 0;
    font-size: 1.5vh;
}
.login form select {
    width: 100%;
    padding: 0.375rem 0.75rem;
}
.login form input[type="submit"]{
    font-size: 1.5vh;
    margin-top: 1vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    color: black;
    background-color: yellowgreen;
    font-weight: bold;
}
.login form input[type="submit"]:hover{
    background-color: greenyellow;
}
.login form .invalid-feedback{
    margin-bottom: -1vh;
}
.login form .bottom{
    margin-top: 1.5vh;
    margin-bottom: 0;
}
.login .link-primary {
    cursor: pointer;
}
.copyright{
    margin-top: 1.5vh;
    color: white;
    text-align: center;
    font-size:1.1vh;
    font-style: italic;
}
.error, .succes {
    width: 370px;
    color: black;
    padding-top: 1.75vh;
    padding-bottom: 1vh;
    text-align: center;
}
.error{
    background-color: lightcoral;
}
.succes{
    background-color: lightgreen;
}
.modal .login{
    width: auto;
}


.main {
    height: 100vh;
    width: 100vw;
    background-color: white;
    display: flex;
    flex-direction: row;
}
.side {
    height: inherit;
    width: 300px;
    background-color: rgb(105, 105, 105);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.top {
    width: inherit;
    height: 160px;
    background-color: rgb(64, 64, 64);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    color: white;
}
.titl {
    text-align: center;
}
.titl a{
    text-decoration: none;
    color: white;
}
.titl .main-a {
    font-size: 5.2vh;
    margin-bottom: -2vh;
    font-weight: bold;
}
.titl .main-a x {
    color: yellowgreen;
}
.titl .main-b {
    font-size: 1.1vh;
    margin-top: .5vh;
    margin-bottom: 2vh;
}
.titl.mobile {
    visibility: hidden;
    height: 0;
}
.top .info .details{
    word-wrap: break-word;
}
.top .info .details .list-a{
    font-size: 1.5vh;
}
.top .info .details .list-b{
    font-size: 1.8vh;
    color: yellowgreen;
    font-weight: bold;
}
.top .info .details .list-c{
    font-weight: light;
    font-size: 1.25vh;
    font-style: italic;
}
.buttons {
    text-align: left;
    height: auto;
    margin-top: 160px;
    position: absolute;
}
.logouts {
    text-align: center;
}
.logg{
    background-color: yellowgreen;
    width: 300px;
    height: 7vh;
    color: black;
    border: 0;
    border-radius: 0;
    font-weight: bold;
    font-size: larger;
}
.logg:hover{
    background-color: greenyellow;
    color: black;
}
.buttons .logg{
    text-align: left;
    text-indent: 2.5vw;
    background-color: rgb(105, 105, 105);
    color: white;
    font-weight: normal;
}
.buttons .logg:hover{
    background-color: rgb(125, 125, 125);
}
.contentbody {
    width: 100vw;
    background-color: whitesmoke;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contents {
    width: 70vw;
    height: min-content;
    padding: 50px;
    border-radius: 0;
    background: white;
    border: 0;;
}
.contentt{
    margin-bottom: 15px;
}
.ss {
    text-indent: 100px;
}
.boldd {
    font-size: 2.25vh;
    font-weight: bold;
    margin-top: -18px;
}
.rows{
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    margin-top:20px;
}
.rows .contner{
    height: 250px;
    padding: 15px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column-reverse;
    margin-left: 25px;
    margin-right: 25px;
    width: 10vw;
    border-radius:0;
    border-color: whitesmoke;
}
.rows .contner:hover{
    border-color: gainsboro;
    padding:20px;
}
.subcode {
    font-size: 2vh;
    font-weight: bold;
}
.subdesc{
    font-size: 1.25vh;
}
.imgholder {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    margin-top: 25px;
    margin-bottom: 25px;
}
.picholder {
    margin-top:25px;
    height: 200px;
    width: 200px;
    margin-bottom: 10px;
    object-fit: cover;
    object-position: 70%;
}
.subjectdesc {
    margin-top: -5px;
    margin-bottom: 15px;
}
.bodone, .bodtwo, .bodfour, .bodfive {
    display: flex;
    justify-content: space-between;
}
.bodtwo, .bodfive{
    font-weight: bold;
}
.bodthree, .bodfour {
    margin-top:10px;
}
#myModal .modal-dialog .modal-content .error{
    width: inherit;
}
.grades-table {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 5px;
    border: 1px solid;
    padding: 10px 40px;
}
.watermark {
    position: absolute;
    left: 42%;
    top: 26%;
    z-index: 3;
    width: 500px;
    opacity: 7%;
}
.logouts.mobile {
    visibility: hidden;
}
.datee {
    margin-top: 2vh;
    font-style: italic;
    margin-bottom: 2vh;
    text-align: center;
}
.inc-remark {
    color: lightcoral;
    margin-top: 1vh;
    padding: 0vh 2vw;
    text-align: center;
}
@media print {
    .side {
       visibility: hidden;
       width: 0;
    }
 }

 @media (max-width : 425px) {
    html, body {
        margin: 0;
        font-size: small;
    }
    .main {
        max-width: 410px;
        width: 150vw;
    }
    .side {        
       visibility: hidden;
       width: 0;
       height: 0;
    }
    .watermark {
        left: 13%;
        top: 33%;
        width: 300px;
    }
    .contentbody {
        width: 100%;
        background-color: white;
        align-items: normal;
    }
    .buttons {
        width: 0;
    }
    .contents {
        width: 100%;
        padding: 3vh 5vw 3vh 10vw
    }
    .logouts.mobile {
        visibility: visible;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .login {
        width: 75%;
        padding: 25px;
    }
    .logg {    
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .grades-table {
        padding: 10px 25px;
    }
    .logouts.desktop {
        visibility:hidden;
        width: 0;
    }
    .error, .succes {
        width: 75%;
    }
    .contentt {
        margin-bottom: 3vh;
        font-size: small;
    }
    .titl.mobile {
        visibility: visible;
        height: auto;
        width: auto;
    }
    .titl a {
        color: black;
    }
    .bottom {
        font-size: smaller;
    }
    .login form input[type="submit"] {
        font-size: large;
    }
}