/* 오산원일중학교 게임 개발 동아리 웹사이트의 CSS 파일입니다 (공통)
...라고 하려고 했는데.
구글의 사이트 이름 시스템 때문에 어쩔 수 없이 JS코드를 넣어야 해요. 이게 뭐냐고!!!*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* @font-face {            폰트
    font-family: 'Cafe24Ohsquareair';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2202@1.0/Cafe24Ohsquareair.woff') format('woff');
    font-weight: normal;
    font-style: normal;
} 어떤 놈이 폰트 이상하대서 안 씀 ^^7 */
body {
    font-family: Arial, sans-serif; /*와 sans!*/
}

/* 상단 바 (top-bar) */
.top-bar {              /* 전체 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #f4f7f6;
    color: #222;
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 10px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 100;
}
.top-bar .menu {        /* 버튼(글자) 전체 */
    display: flex;
    gap: 20px;
    font-size: 18px;
}
.top-bar .menu a {      /* 버튼 각각 */
    text-decoration: none;
    color: #222;
    transition: color 0.25s;
}
.top-bar .menu a:hover {    /* 버튼 마우스 호버 */
    color: #444;
}

/* 아래 (footer) */
.footer {               /* 전체 */
    background: #222;
    color: white;
    padding: 20px 15px;
    margin-top: 20px;
    font-family: Arial, sans-serif; /* 와 sans! */
    /* text-align: center; - 화면에 따른 기기 차이 만들려고 넣었다가 뺌*/
}
.footer .logo {         /* 로고 */
    font-size: 20px;
    /* font-weight: bold;  - 이쪽은 텍스트만 */
    margin-bottom: 5px;
}
.footer .contact {      /* 이름 */
    margin-bottom: 15px;
    font-size: 16px;
}
.footer .links {        /* 버튼 전체 */
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 10px;
    margin-bottom: 15px;
}
.footer .links a {      /* 버튼 각각 */
    display: inline-block;  
    background: #333;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;    
    transition: background 0.25s;
}
.footer .links a:hover {    /* 버튼 호버 */
    background: #444;
}
.footer .copyright {    /* 저작권 */
    font-size: 14px;
    color: #bbb;
}


@media (max-width: 768px) {     /* 기기에 따른 화면 차이 */
    /* .top-bar {
        flex-direction: column;
        align-items: center;
    } */
    /* .footer .links {
        flex-direction: column;
    } */
    .footer {               /* 전체 */
        margin-top: 10px;
    }
}