body {margin: 0px; width: 100%;}

* { box-sizing: border-box; }

#container{ 
    height: 100vh; overflow: auto;
    display: grid; gap: 10px 0px;
    grid-template-columns: 1fr;
    grid-template-rows: min-content min-content 1fr;
    background-color:#CCCCCC;
    background-image: url(classroom.JPG);
    background-blend-mode: screen;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
}

#title {text-align: center; font-size: min(5vw, 50px); }

#menu {
    font-size: min(4vw, 40px);
    display: flex; flex-flow: row nowrap;
    justify-content: space-evenly;
    opacity: .7;
    background-color: white;
    padding: 5px 10px;
}

#menu>a { text-decoration: none; color: black;}

#main {
    display: flex; flex-flow: column nowrap;
    height: 100%; overflow:hidden;
    padding:10px; box-sizing: border-box;
}

#intro { font-size: 3vw; color: indianred;}

.clist {
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    margin-top: 10px;
    font-size: 9vw;
    width: 100%;
}

.clist>a { text-decoration: none; 
    color: black; margin-bottom: 5px;  width: 100%}

.clist>a:hover, #menu>a:hover {color: red;}

@media screen and (min-width:500px) {
    .clist>a {
        width: 50%;
        font-size: 4vw;
    }    
}

@media screen and (min-width:1200px) {
    .clist>a {
        width: 33.3%;
        font-size: 3vw;
    }    
}