body {
    font-family: Georgia, 'Times New Roman';
    overflow: scroll;
  }
#desktop img{
    margin-top:-13%;
}
#desktop {
    position: relative;
    width: 100%;
}  
#desktop h1 {
    position: absolute;
    top: 0px;
    left: 30px;}
#container {
    text-align: center;
    margin-top: -2%;
}

#container h3{
    margin-top:-1.5%;}
.box {
    margin-top: 0;
    border-radius: 1px;
    min-width: 400px;
    max-width: 400px;
    min-height: 300px;
    max-height: 300px;
    margin:15px;
    text-align: center;
    background-color: #fff;
    color: #333;
    border: 3px solid #DCDCDC;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.lecture-box {
    margin-top: 0;
    border-radius: 1px;
    min-width: 400px;
    max-width: 400px;
    min-height: 360px;
    max-height: 360px;
    margin:15px;
    text-align: center;
    background-color: #fff;
    color: #333;
    border: 0px solid #DCDCDC;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.box-link, .box-link2 {
    text-decoration: none;
    color: black;
    font-size: 22px;}

.img-box {
    max-width: 100%;
    height: 220px;
    }

.lecture-img-box {
        max-width: 100%;
        height: 281px;
        }

.bottom_link_div {
    margin-top: 0%;
    margin-bottom: 2%;
    text-align: center;
    margin-left: 1%;
    margin-right: 1%;
    font-size: 16px;
    text-decoration: none;
}
.top_link_div {
    text-align: center;
    margin-bottom: 2%;
    margin-left: 1%;
    margin-right: 1%;
    font-size: 20px;
    text-decoration: none;
}

#desktop h1 {
    font-size: 40px;}
#container h1 {
    font-size:40px; }

#container h3 {
    font-size: 20px;}

#grid {
    display: flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content:center;
	align-items:center;
	align-content: space-around;
    margin: 10px;
    margin-top: 0%;}


    @media (min-width:767px)  {
    #mobile {
        display: none;}
    }
    
    @media (max-width:767px) {
        #desktop {
            display: none;}

        body {
            margin: 0;}
      
        #mobile  {
            background-color: gray;
            text-align: center;
            padding: 3px;
            width: 100%;
            }

        #mobile:hover {
            background-color: #423F3E;}

        #mobile h1 {
            color: white;
            font-size: 35px;}

        #container h1 {
            font-size: 35px;
        }

    }

    @media (max-width:440px) {
        .box {
            min-width: 300px;
            max-width: 300px;
            min-height: 300px;
            max-height: 300px;
          }
  
          .box-link, .box-link2 {
            width: 100%;
            text-decoration: none;
            color: black;
            font-size: 17px;
            
        }
        .top_link_div  {
            height: 73px;
        }
        .img-box {
            height: 140px;
            }
        #mobile h1 {
            font-size: 25px;
        }

        #container h1 {
            font-size: 25px;
        }
        #container h3 {
            display: none;
        }
        /* #mobile:hover {
            background-color: gray;
        }} */

    }