@charset "UTF-8";

body{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 15px;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}
        @media (min-width: 768px){
            body{    
                width: 930px;
                margin-left: auto;
                margin-right: auto;
                font-size: 16px;
                }
        }
#container{
    display: grid;
    grid-template-rows: 50px 1fr 120px;
    grid-template-columns: 1fr;
}
        @media (min-width: 768px){
            #container{
                grid-template-rows: 60px 1fr 60px;
                grid-template-columns: 750px 180px;
            }
        }   
#itemA{
    background: #8cbc2b;
    grid-row: 1 /2;
    grid-column: 1 /2;
}
  @media (min-width: 768px){
            #itemA{
                grid-row: 1 /2;
                grid-column: 1 /3;
            }
        }
#itemB{
    grid-row: 2 /3;
    grid-column: 1 /2;
    margin-left: 3%;
    margin-right: 3%;
    margin-top: 10px;
}
        @media (min-width: 768px){
            #itemB{
                grid-row: 2 /3;
                grid-column: 1 /2;
                font-size: 17px;
            }
        }   
#itemC{
    background: #8cbc2b;
    grid-row: 4 /5;
    grid-column: 1 /2;
}
        @media (min-width: 768px){
            #itemC{
                grid-row: 2 /3;
                grid-column: 2 /3;
                background: #cdf085;
            }
        }
#itemD{
    background: #8cbc2b;
    grid-row: 3 /4;
    grid-column: 1 /2;
    text-align: center;
    font-size: 15px;
    padding-top: 5px;
}
        @media (min-width: 768px){
            #itemD{
                grid-row: 3 /4;
                grid-column: 1 /3;
            }
        }
.menu{
    display: table;
    padding: 10px 0px 0px 0px;
    table-layout: fixed;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #8cbc2b;
    margin-bottom: 0px;
}
        @media (min-width: 768px){
            .menu{
                display: none;
            }
        }   
.menu li{
    list-style: none;
    display: table-cell;
    text-align: center;
}
.menu i{
    color: #1b4306;
    display: block; 
}
.menu a span{            
    color: #1b4306;    
    display: block;
    padding-top: 5px;
    padding-bottom: 4px;
    font-size: 10px; 
}
.menu a{
    text-decoration: none;
}
.sitename{
    text-align: center;
    font-size: 26px;
    padding-top: 6px;
}
        @media (min-width: 768px){
            .sitename{
                padding-top: 10px;
            }
        }              
.sitename a{
    text-decoration: none;
    color: #e9ffbe;
}
.sidebar{    
}
        @media (max-width: 767px){
            .sidebar{
                display: none;
            }   
        }
        @media (min-width: 768px){
            .sidebar{
                position: sticky;
                top: 0;
                list-style: none;
            }
        }
.sidebar li{
    padding-top: 20px;
}
.sidebar a{
    text-decoration: none;
    color: #225307;
}
.sidebar i{
    margin-right: 3px;
}
.fa-arrow-alt-circle-up{
    color: #f48b9e;
    position: fixed;
    bottom: 30px;
    background: white;
    border-radius: 40px;
}
a:hover{
    opacity: 0.6;
}
#itemD p{
    margin-top: 20px;
    font-size: 14px;
}