.index-home {
    background-image: url('../images/background/kids_study.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}
  
header {
    background-color: rgb(255, 255, 255);
    top: 0;
    left: 0;
    right: 0;
 /*   position: fixed; */
    padding: 5px;
    height: 90px;
    z-index: +1;
    box-shadow: 0px 0px 40px rgb(0, 0, 0, 0.1);
}

.main-nav {
    bottom: 10px
}


header a {
    font-size: 27px;
    margin: auto;
    text-decoration: none;
    float: right;
    color: rgb(112, 112, 112);
    text-align: center;
    font-family: SegoeUI-Semibold, Segoe UI;
    font-weight: 600;
}

.student-button, .teacher-button {
    display: block;
    font-size: 30px;
    margin: 10px auto;
    padding: 10px;
    text-decoration: none;
    width: 225px; 
    height: auto;
    border-radius: 100px;
}

.student-button {
/*
Original css, will be restored if new code is unsatisfactory
    background-color: #223843;
    border-radius: 100px;
    box-shadow: 0 1px 1px rgb(240, 240, 240);
    color: white;
    font-weight: bold;
    width: 80px;
    height: 1px;
*/
    background-color: rgb(34, 56, 67);
    box-shadow: 0 1px 1px rgb(24, 13, 73), inset 0 1px 0 rgb(117, 117, 117);
}

.teacher-button {
    background-color: rgb(83, 175, 255);
    box-shadow: 0 1px 1px rgb(83, 175, 255), inset 0 1px 0 rgb(111, 188, 255);
}

.teacher-button, .student-button {
    transition: 0.3s;
    color: rgb(255, 255, 255);
    border-radius: 100px;
}

.logo_home {
    display: block;
    width: 25%;
    height: auto;
    max-width: 85px;
}


.web_title {
    color: #223843;
    font-family: SegoeUI-Bold, Segoe UI;
    font-weight: 700;
}
  
.container {
    padding: 2px 16px;
}

.teacher-button:hover, .student-button:hover {
    /*color: rgb(255, 255, 255);
    opacity: 1;*/
    outline-color: rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    background-color: rgb(0, 0, 0, 0);
}

html,body{
    height:100%;
}

.card-center {
    position: fixed;
    width: 27.625rem;
    height: 45.688rem;
    border-radius: 0rem;
    box-shadow: 0px 0px 40px rgb(0, 0, 0, 0.5);
}

.cardtitle-home {
    transform: translate(0, 200%);
    font-weight: bold;
    font-size: 111px;
    font-family: Segoe UI;
}

div > button {
    border-radius: 100px;
}

div > button:focus {
    outline: none;
}

@media screen and (max-width: 1120px) {
    .main-link {
        display: none;
    }
    nav > button, .sub-container {
        display: block;
        font-size: 14px;
    }
         header > a {
        font-size: 20px;
    }
}


@media screen and (min-width: 1120px) {
    .main-link {
        display: inline;
    }
    nav > button, .sub-container {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .teacher-button, .student-button {
        font-size: 25px;
        width: 20%
    }
    header a {
        font-size: 25px;
    }
}

header > nav > div > div > div > a {
    font-size: 20px;
    color: rgb(112, 112, 112);
    font-family: SegoeUI-Semibold, Segoe UI;
    font-weight: 300;
}

header > nav > div > div > div > a:hover {
    color: rgb(53, 53, 53);
    text-decoration: none;
    font-weight: 600;
}

.sub-container {
    background-color: rgb(255, 255, 255);
    padding: 20px;
}

@media screen and (max-width: 420px) {
    header a {
        font-size: 20px;
    }
    .card-center {
        margin: auto;
        width: 100%;
    }
    .cardtitle-home {
        font-size: 90px;
    }
    .carousel {
        top: 20px;
    }
    .year-level {
        font-size: 20px;
    }
}

.dropdown-menu {
    right: 0;
    box-shadow: 0px 0px 6px rgb(0, 0, 0, 0.3);
}


.english-browsequizzes, .math-browsequizzes, .science-browsequizzes {
    font-family: Segoe UI;
    font-size: 17px;
    font-weight: bold;
    transform: translate(0, 975%);
    width: 297px;
    height: 41px;
    border-radius: 100px;
    border: none;
}

.english-browsequizzes:hover, .math-browsequizzes:hover, .science-browsequizzes:hover {
    box-shadow: 0px 0px 10px rgb(0, 0, 0, 0.5);
    transition: box-shadow 0.25s ease-in-out;
}

.english-yearlevel, .math-yearlevel, .science-yearlevel {
    font-family: Segoe UI;
    font-size: 29px;
    font-weight: bold;
    transform: translate(0, 570%);
    width: 272px;
    height: 66px;
    border-radius: 100px;
    outline: none;
    background-color: rgb(255, 255, 255);
    border: none;
}

.english-yearlevel:hover, .math-yearlevel:hover, .science-yearlevel:hover {
    box-shadow: 0px 0px 10px rgb(0, 0, 0, 0.5);
    transition: box-shadow 0.25s ease-in-out;
}

.english-yearlevel, .english-browsequizzes, .math-yearlevel, .math-browsequizzes, .science-yearlevel, .science-browsequizzes {
    background-color: rgb(255, 255, 255);
}

.english-card, .math-card, .science-card {
    color:rgb(255, 255, 255);
}

.math-card {
    background-color: rgb(83, 175, 255);
}

.math-yearlevel, .math-browsequizzes {
    color: rgb(83, 175, 255);
}

.english-card {
    background-color: rgb(255, 83, 83);
}

.english-yearlevel, .english-browsequizzes {
    color: rgb(255, 83, 83); 
}

.science-card {
    background-color: rgb(125, 245, 111);
}

.science-yearlevel, .science-browsequizzes {
    color: rgb(125, 245, 111); 
}

select option {
    color: black;
}

.cardscale-hover {
    box-shadow: 0px 0px 15px rgb(0, 0, 0, 0.4);
}

.cardscale-hover:hover {
    transform: scale(1.01);
    transition: transform 0.15s ease-in-out;
}

html,body{
   height:100%;
}
.carousel,.item,.active{
   height:100%;
 }
.carousel-inner{
    height:100%;
}