/* reset by rafaux */
* { margin: 0px; padding: 0px; border: 0px; font-weight: normal; font-size: 100%; list-style: none; line-height: 1; outline: 0px; background: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; }

/* var */
:root { --black: #222; --green: #1aba5a }

/* global class */
.container { display: block; width: auto; max-width: 600px; height: auto; margin: 0px auto; }

/* base */
a { text-decoration: none; color: var(--black); transition: all .5s ease; }
body { background: #fff; color: var(--black); font: normal 16px 'Roboto', sans-serif; overflow-x: hidden; }
input, textarea, select, button { font: normal 16px 'Roboto', sans-serif; appearance: none; -webkit-appearance: none; border-radius: 0px; cursor: pointer; }
input[type=submit], button { transition: all .5s ease; }

/* cover */
#cover { position: relative; width: 100%; height: 40vh; background-color: #000; }
#cover figure.bg img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; opacity: .7; }
#cover figure.logo { position: absolute; bottom: -150px; left: 50%; width: 300px; height: 300px; background-color: #fff; border-radius: 100%; transform: translateX(-50%); box-shadow: 0px 60px 60px rgba(0,0,0,.1); }
#cover figure.logo img { position: absolute; top: 50%; left: 50%; width: 90%; height: auto; transform: translate(-50%, -50%); }

/* list */
#list span a { display: block; width: 500px; height: auto; margin: 200px auto 0px auto; padding: 20px 30px; border: 1px solid #ccc; background-color: #f3f3f3; border-radius: 10px; }
#list span a:hover { background-color: var(--green); color: #fff; }
#list span a i { margin-right: 5px; }

/* sidebar */
#sidebar { position: fixed; z-index: 20; top: 0px; left: 0px; width: 250px; height: 100%; padding: 0px 20px; background-color: #222; }
#sidebar figure.logo img { display: block; width: 100%; height: auto; margin: 30px auto 60px auto; }
#sidebar nav strong { display: block; margin-bottom: 20px; padding-left: 10px; font-weight: bold; color: #fff; }
#sidebar nav li a { position: relative; display: block; padding: 20px 10px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); border-radius: 5px; }
#sidebar nav li a::after { position: absolute; top: 20px; right: 10px; font-family: 'Font Awesome 5 Pro'; transition: all .5s ease; content: '\f105'; }
#sidebar nav li a:hover { background-color: #111; }
#sidebar nav li a.on::after { transform: rotate(90deg); }
#sidebar nav li ul { display: none; }
#sidebar nav li ul li a { padding: 20px 30px; }
#sidebar nav li ul li a::after { top: 23px; width: 7px; height: 7px; background-color: transparent; border-radius: 100%; content: ''; }
#sidebar nav li ul li a.on::after { background-color: var(--green); }
#sidebar span.toggle { display: none; position: absolute; top: 40px; right: 20px; width: 30px; height: 40px; border-top: 3px solid var(--green); transition: all .5s ease; cursor: pointer; }
#sidebar span.toggle::before { position: absolute; top: 4px; left: 0px; width: 100%; height: 3px; background-color: var(--green); transition: all .5s ease; content: ''; }
#sidebar span.toggle::after { position: absolute; top: 11px; left: 0px; width: 100%; height: 3px; background-color: var(--green); transition: all .5s ease; content: ''; }
#sidebar span.toggle.on { border-top: transparent; }
#sidebar span.toggle.on::before { top: 7px; transform: rotate(45deg); }
#sidebar span.toggle.on::after { top: 7px; transform: rotate(-45deg); }

/* content */
#content { width: calc(100% - 250px); margin-left: 250px; padding: 50px; }
#content h1 { display: block; margin-bottom: 30px; font-weight: bold; font-size: 24px; text-align: center; }
#content section { display: flex; justify-content: center; align-items: flex-start; gap: 20px; }
#content section article { width: 70%; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; }
#content section article figure.cover { position: relative; width: 100%; height: 180px; background-color: #000; }
#content section article figure.cover img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }
#content section article h2 { display: block; padding: 20px; font-weight: bold; font-size: 20px; }
#content section article p { display: block; padding: 0px 20px; }
#content section article span { display: block; width: auto; padding: 20px; }
#content section article span a { display: block; width: 100%; height: auto; padding: 20px; background-color: var(--green); color: #fff; font-weight: bold; border-radius: 10px; }
#content section article span a i { margin-right: 10px; }

@media (max-width: 1000px){

    #content section article { width: 100%; }

}

@media (max-width: 760px){

    #sidebar { width: 100%; height: 100px; padding: 0px; }
    #sidebar nav { display: none; width: 100%; max-height: calc(100vh - 100px); margin-top: 100px; padding: 20px; background-color: #222; overflow-y: auto; }
    #sidebar figure.logo img { position: absolute; top: 50%; left: 20px; width: 200px; height: auto; margin: 0px; transform: translateY(-50%); }
    #content { width: 100%; margin: 100px 0px 0px 0px; }
    #sidebar span.toggle { display: block; }

}

@media (max-width: 600px){

    #cover { height: 20vh; }
    #cover figure.logo { bottom: -100px; width: 200px; height: 200px; }
    #list span a { width: 90%; margin-top: 140px; }

}

@media (max-width: 520px){

    #content { padding: 50px 20px 20px; }

}