/* 
Theme Name: smkn1kotabekasi
Theme URI: https://github.com/Dickybulin26/smkn1kotabekasi
Author: Daffa Raivan, Dicky Asqaelliany Ibnul Hakim, Fadlan Hamsyari, Fariz Dafansyah, Muhammad Hafidh Basri. 
Author URI: https://github.com/Dickybulin26/smkn1kotabekasi
Description: Atas Perintah langsung dari Bpk. Drs. Boan M.Pd selaku kepala sekolah SMKN 1 Kota Bekasi untuk segera mengupdate web sekolah SMKN 1 Kota Bekasi Terutama pada Bagian Interface dan beberapa fitur agar tampak lebih modern dan informasi yang diberikan mudah dipahami oleh banyak orang. Website ini dikembangkan oleh jurusan Rekayasa Perangkat Lunak (RPL) di SMKN 1 Kota Bekasi dan di pimpin langsung oleh Bpk. Satria Ade Putra selaku Projek Manager dalam projek ini. Untuk proses pengerjaannya sendiri, projek ini dikerja kan oleh 5 orang dari jurusan RPL angkatan ke-26 yaitu Daffa Raivan, Dicky Asqaelliany Ibnul Hakim, Fadlan Hamsyari, Fariz Dafansyah, Muhammad Hafidh Basri. mereka berlima merupakan web developers yang mengembangkan web SMKN 1 Kota Bekasi.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: smkn1kotabekasi

ini adalah theme untuk website sekolah Smk Negeri 1 Kota Bekasi
Jangan di hapus
*/


@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

* {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    /* box-sizing: border-box; */
}

:root {
    --nav-text: white;
    --nav-primary-terang: #ddd;
    --nav-primary: #bbb;
    --nav-primary-gelap: #999999;

    --hitam: #151515;
    --putih: #f0ebeb;

    --putih-redup: #606060;

    --primary1-background: #f6be2e;
    --primary2-background: #007722;
    /* --primary2-background: #0ba937; cadangan warna*/

    --padding-container: 5rem;
}

[data-theme="warna1"] {
    --primary-background: var(--hitam);
    --primary-text-color: var(--putih);
}

[data-theme="warna2"] {
    --primary-background: #f6be2e;
    --primary-text-color: #007722;
}

body {
    background: var(--putih);
}

/* DEFAULT */

/* nav ul{list-style: none;} */
/* nav li{display: inline-block;position: relative;} */

a {
    text-decoration: none;
    color: var(--hitam);
}

.date {
    text-transform: capitalize;
}

main {
    display: grid;
    gap: 3rem;
    padding: var(--padding-container);
}

main>*,
header>*,
nav>*,
footer>* {
    max-width: 1200px;
    width: 100%;
    margin: auto;
}

.background-warna1 {
    background: var(--hitam);
    color: var(--putih);
}

.background-warna2 {
    background: var(--primary1-background);
}

.background-warna3 {
    background: var(--primary2-background);
    color: var(--putih);
}

.background-warna3 .category .title>.text {
    color: var(--primary1-background);
}

.background-warna1 a,
.background-warna3 a {
    color: var(--putih);
}

.background-warna1 .category .view,
.background-warna3 .category .view {
    border: 1px solid white;
}

.background-warna3 .category .view:hover {
    background: white;
    filter: brightness(0.9);
    color: var(--hitam);
}

/* image */
.image {
    overflow: hidden;
}

.image>img {
    width: 100%;
    height: 100%;
    transition: 0.8s all ease;
}

.image.zoom:hover img {
    transform: scale(1.3);
}

.image.gelap:hover img {
    filter: brightness(0.5);
}

img {
    object-fit: cover;
    object-position: center;
}

/* date */
.date {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.date img {
    width: 1.1rem;
}

/* TAG CATEGORY*/

.tags {
    width: 100%;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    text-wrap: nowrap;
    text-transform: capitalize;
}

.tags .tag {
    padding: 0.5rem 1rem;
    border: 1px solid gray;
    border-radius: 25rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
}

/* CATEGORY */

.category {
    gap: 2rem;
    display: grid;
}

.category>.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: capitalize;
}

.category .title.tengah {
    flex-direction: column;
    text-align: center;
}

.category>.desc {
    /* max-width: 60rem; */
    font-size: 1.2rem;
    text-align:justify;
}

.category .title.tengah>.desc {
    padding: 1rem;
    max-width: 50rem;
    font-size: 1.3rem;
}

.category .title>.text {
    font-weight: 500;
    font-size: 2rem;
    position: relative;
    color: var(--primary2-background);
}

.category .view {
    border: 1px solid var(--hitam);
    border-radius: 5rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    transition: 0.5s;
}

.category .view:hover {
    background: var(--primary2-background);
    color: white;
    border: 1px solid white;
}

/* pernak pernik */

.category .title .text .pernak-pernik.atas {
    width: 20%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.category .title .text .pernak-pernik.garis-bawah {
    width: 100%;
    position: absolute;
    left: 0;
    top: 110%;
    z-index: -1;
}

button:hover {
    cursor: pointer;
}