h2 {
    background-color:pink;
    border:2px solid red;
    border-radius:10px;
    padding:10px;
}

.learning-gate-grid {
    display:grid;
    grid-gap:5px;
    grid-template-columns:repeat(4, 1fr);    
}

.learning-gate-grid-header {
    grid-column-start:1;
    grid-column-end:5;
    text-align:left;
    padding:10px;
    background-color:pink;
    border:2px solid red;
    border-radius:10px;
}

.learning-gate-grid-item {    
    border:2px solid navy;
    border-radius:10px;
}

.learning-gate-grid-footer {
    grid-column-start:1;
    grid-column-end:5;
    padding:10px;
    text-align:center;
}

.unit-grid {
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    grid-gap:5px;
}

.unit-grid-header {
    grid-column-start: 1;
    grid-column-end: 7;
    border-radius:10px;
    text-align:left;
    padding:10px;
}

.unit-grid-main-header {
    grid-column-start:1;
    grid-column-end:7;
    border-radius:10px;
    background-color:pink;
    border: 2px solid red;
    padding:10px;
}

.unit-grid-item {
    text-align:center;
    padding:10px;
}

.learning-gate-student {
    background-color:lightBlue;
    padding:5px;    
    border-bottom:1px solid navy;
}

.loginMessage 
{
	background-color:#ff9999;
	padding:5px;
	border:1px solid #660000;	
}


/*
large circles
*/
.helpful-online-links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    text-align: center;
}


/* --------- iphone portrait -----------  */
@media only screen and (max-device-width: 540px) {
    .helpful-online-links {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
        

.large-circle-link {
    /*
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 225px;
    height: 225px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    font-weight: bold;
    color: #474747;
}

/* --------- ipad portrait -------------  */
@media screen and (min-width: 481px) and (max-width: 1366px) {
    .large-circle-link {
        width: 150px;
        height: 150px;
    }
}


/* --------- iphone portrait -----------  */
@media only screen and (max-device-width: 540px) {
    .large-circle-link {
        width: 100px;
        height: 100px;
        font-size: 1rem;
    }
}

.large-circle-1 {
    background-color: #c7ceea;
}

.large-circle-2 {
    background-color: #ffeb7f;
}

.large-circle-3 {
    background-color: #c9edd1;
}

.large-circle-4 {
    background-color: #ffdac1;
}

.large-circle-5 {
    background-color: lightblue;
}
        



@media screen and (min-width: 481px) and (max-width: 1366px) {
    .learning-gate-grid {        
        grid-template-columns:repeat(3, 1fr);    
    }

    .learning-gate-grid-header {
        grid-column-start:1;
        grid-column-end:4;
    }

    .learning-gate-grid-footer {
        grid-column-start:1;
        grid-column-end:4;        
    }

    .unit-grid {        
        grid-template-columns:repeat(3, 1fr);        
    }
    
    .unit-grid-header {
        grid-column-start: 1;
        grid-column-end: 4;                
    }

    .unit-grid-main-header {
        grid-column-start:1;
        grid-column-end:4;
    }
    
}

/* --------- iphone portrait -----------  */
/*@media screen and (max-width: 320px) {*/
@media screen and (max-width: 540px) {      
    .learning-gate-grid {        
        grid-template-columns:repeat(2, 1fr);    
    }

    .learning-gate-grid-header {
        grid-column-start:1;
        grid-column-end:3;
    }

    .learning-gate-grid-footer {
        grid-column-start:1;
        grid-column-end:3;
    }

    .unit-grid {        
        grid-template-columns:auto;           
        grid-gap:10px;   
    }

    .unit-grid-header {
        grid-column-start: 1;
        grid-column-end: 2;                 
    }            

    .unit-grid-main-header {
        grid-column-start: 1;
        grid-column-end: 2;        
                
    }

    .unit-grid-item {
        background-color:gainsboro;
        padding:0;
    }
}