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

*{

    margin: 0;

    padding: 0;

    font-family: 'Poppins', sans-serif;

}



#message {

    display: none;

    font-size: 1.2em;

    color: red;

}



body {

    background-color: #fff;

}





.logincontainer {

    width: 100%;

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

}



.logincontainer form {

width: 80%;

padding: 20px;

box-shadow: 0 0 10px gray;

display: flex;

flex-direction: column;

row-gap: 2rem;

border-radius: 10px;

}



.logincontainer form button {

    width: 200px;

    height: 50px;

    background-color: #005e2a;

    color: #fff;

    border: none;

    border-radius: 15px;

    align-self: center;

}



.logincontainer form .header {

    display: flex;

    align-items: center;

    flex-direction: column;

    row-gap: 1rem;

}



.logincontainer form .header img {

    width: 70px;

    height: 70px;

    animation: Scale 1s linear infinite;

}



@keyframes Scale {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.09);

    }

    100% {

        transform: scale(1);

    }

}



.logincontainer form .header h2 {

    align-self: center;

}



.berita-modal {

    width: 100%;

    height: 100vh;

    display: none;

    opacity: 0;

    justify-content: center;

    position: fixed;

    z-index: 999;

    background-color: rgba(78, 78, 78, 0.164);

}



.berita-modal.active {

    display: flex;

    opacity: 1;

    transition: opacity 0.6s;

}



.berita-modal .modal.active {

    opacity: 1;

    margin-top: 2rem;

    animation: masuk 0.5s ease-in-out;

}



.berita-modal .modal {

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: #fff;

    box-shadow: 0 0 15px rgb(94, 94, 94);

    width: 35rem;

    height: max-content;

    padding: 2.4rem;

    border-radius: 20px;

    opacity: 0;

    margin-top: 0;

    transition: margin-top 0.5s;

}



@keyframes masuk {

    0% {

        opacity: 0;

        margin-top: 0;

    }



    100% {

        opacity: 1;

        margin-top: 2rem;

    }

}



.berita-modal .modal h2 {

    color: #005e2a;

}



.berita-modal .modal form {

    display: flex;

    flex-direction: column;

    width: 100%;

    margin-top: 1rem;

    row-gap: 1rem;

}



.berita-modal .modal form input:nth-child(1) {

    height: 2.5rem;

    font-size: 17px;

}



.berita-modal .modal form textarea {

    height: 20rem;

    font-size: 17px;

padding:10px;

}



.berita-modal .modal form button {

    width: 120px;

    align-self: end;

    height: 33px;

    border: none;

    border-radius: 10px;

    background-color: #005e2a;

    color: #fff;

    cursor: pointer;

}



.bubble-button {

    position: fixed;

    bottom: 2.5rem;

    right: 2.6rem;

    z-index: 999;

    background-color: #005e2a;

    text-align: center;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    cursor: pointer;

}



.bubble-button i {

    font-size: 36px;

    color: #fff;

    padding: 1rem;

}



.bar {

    display: flex;

    flex-direction: column;

    align-items: center;

    position: fixed;

    row-gap: 27px;

    left: 0;

    top: 0;

    height: 100vh;

    width: 260px;

    background: url('3Mulyojati.jpg'), rgba(0, 0, 0, 0.753);

    background-size: cover;

    background-position: center;

    background-blend-mode: overlay;

}



.bar img {

    margin-top: 20px;

    width: 120px;

    height: 120px;

    border-radius: 50%;

    border: 2px #fff solid;

}



.bar .box {

    width: 100%;

    /* margin-left: 28px; */

    display: flex;

    /* text-align: center; */

    flex-direction: column;

    align-items: center;

    row-gap: 25px;

    position: relative;

}



.bar .bottom {

    position: absolute;

    bottom: 1rem;

    display: flex;

    gap: 20px;

    width: 90%;

}



.bar .bottom a {

    font-size: 40px;

    color: #fff;

}



.bar .bottom a:hover {

    color: #005e2a;

}



.bar .bottom a:nth-child(1) {

    transform: rotate(180deg);

}



.bar .box a {

    color: #fff;

    color: rgb(0, 94, 42);

    font-size: 20px;

    font-weight: 600;

    padding: 10px;

    border-radius: 5px;

    background-color: #fff;

    text-align: center;

    width: 55%;

    display: inline-block;

    text-decoration: none;

}



.content {

    margin-left: 260px;

    padding: 20px;

}



.topbox {

    display: flex;

    /* justify-content: center; */

    padding-top: 2rem;

    /* background-color: aqua; */

    gap: 20px;

}



.topbox .box {

    width: 230px;

    height: 140px;

    padding: 20px;

    box-shadow: 0 0 10px gray;

    display: flex;

    flex-direction: column;

    row-gap: 20px;

    color: rgb(0, 94, 42);

    border-radius: 20px;

}



.topbox .box i {

    position: absolute;

    width: 50px;

    height: 50px;

    padding: 10px;

    background-color: rgb(0, 94, 42);

    border-radius: 10px;

    transform: translateY(-3rem);

    font-size: 30px;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

}



.topbox .box h1 {

    margin-top: 2.5rem;

    font-size: 26px;

}



.topbox .box h2 {

    font-size: 24px;

    font-weight: 700;

}



.centerbox {

    display: flex;

    gap: 20px;

    margin-top: 20px;



}



.centerbox article {

    flex: 3;

    /* background-color: aqua; */

    box-shadow: 0 0 10px gray;

}



.centerbox aside {

    flex: 1.45;

    /* background-color: brown; */

    box-shadow: 0 0 10px gray;

}



.berita {

    display: flex;

    flex-direction: column;

    /* row-gap: 20px; */

}



.berita .card {

    margin-top: 20px;

    display: flex;

    row-gap: 10px;

    padding: 15px;

    box-shadow: 0 0 10px gray;

    border-radius: 15px;

    gap: 1rem;

    position: relative;

}



.berita .card i {

    position: absolute;

    color: #005e2a;

    font-size: 20px;

    top: 1rem;

    right: 1rem;

    cursor: pointer;

}



.berita .card .gambar img {

    width: 300px;

    height: 156.75px;

}



.berita .card .cardtext {

    display: grid;

    row-gap: 10px;

}



.berita .card .cardtext p {

    overflow: hidden;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

}



.berita .card .cardtext h1 {

    font-size: 24px;

    color: rgb(0, 94, 42);

    font-weight: 800;

}



.contact table {

    border: 1px solid #005e2a;

    gap: 0;

    border-collapse: collapse;

}



.contact td {

    border: 1px solid #005e2a;

    width: 300px;

    padding: 10px;

    gap: 0;

}



.contact td:nth-child(3) {

    width: 600px;

}



.contact tr:nth-child(1) td {

    background-color: #136839;

    color: #fff;

}



@keyframes widthIn {

    0% {

        width: 60%;

        border-radius: 26px;

    }



    100% {

        width: 100%;

        border-radius: 26px;

    }



}



#datagalery {

    position: relative;

    height: 90vh;

    width: 100%;

}



.galerybox {

    margin-top: 2rem;

    display: flex;

    flex-wrap: wrap;

    /* justify-content: center; */

    gap: 10px;

    width: 100%;

}



.galerybox img {

    width: 200px;

    height: 114.5px;

    cursor: pointer;

    border: 1.3px solid #000000;

    border-radius: 10px;

    user-select: none;

}



.galerybox img:hover {

    transform: scale(1.0099);

}



.tambahgalery {

    width: 200px;

    height: 114.5px;

    border: 1.3px solid #005e2a;

    border-radius: 10px;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    position: relative;

}


.tambahgalery i {

    font-size: 35px;

    color: #005e2a;

}



.tambahgalery .form {

    position: absolute;

    background-color: #fff;

    border: 1px solid #005e2a;

    border-radius: 10px;

    width: 300px;

    top: 120%;

    left: 50%;

    row-gap: 10px;

    transform: translateX(-50%);

    padding: 10px;

    z-index: 10;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    display: none;

}



.tambahgalery .form input {

    cursor: pointer;

}



.tambahgalery .form input:nth-child(2) {

    height: 20px;

    font-size: 15px;

}



.tambahgalery .form.active {

    display: flex;

    flex-direction: column;

}



.tambahgalery .form button {

    width: 100px;

    height: 26px;

    align-self: end;

    border: none;

    border-radius: 10px;

    background-color: #005e2a;

    color: #fff;

    cursor: pointer;

}



.rincigambar {

    position: fixed;

    bottom: 1rem;

    border-radius: 20px;

    background-color: #ffffff;

    box-shadow: 2px 0 15px black;

    width: 70vw;

    padding: 20px;

    height: 20rem;

    display: none;

    z-index: 10;

    gap: 20px;

    align-items: center;

}



.rincigambar i {

    position: absolute;

    top: 1rem;

    right: 1rem;

    font-size: 30px;

    cursor: pointer;

    color: #005e2a;

}



.rincigambar img {

    width: 300px;

    height: 200px;

    cursor: pointer;

    border-radius: 10px;

    user-select: none;

}

.garis-besar {

    height: 100% !important;

    border: 1.4px solid #005e2a;

}



.rincian {

    height: 100%;

    width: 100%;

    margin-right: 5%;

    display: flex;

    flex-direction: column;

    position: relative;

    /* background-color: #b80000; */

}



.aksi {

    position: absolute;

    bottom: 1rem;

    right: 1rem;

    display: flex;

    gap: 10px;

}



.aksi button {

    width: 100px;

    height: 30px;

    border: none;

    border-radius: 10px;

    background-color: #d2e006;

    color: #fff;

    cursor: pointer;

    text-shadow: 0 0 2px black;

}



.aksi form button {

    width: 100px;

    height: 30px;

    border: none;

    border-radius: 10px;

    background-color: #b80000;

    color: #fff;

    cursor: pointer;

}



.gantigambarbox {

    position: absolute;

    display: flex;

    flex-direction: column;

    align-items: center;

    top: -6rem;

    right: 0;

    background-color: #fff;

    box-shadow: 0 0 5px rgb(124, 124, 124);

    row-gap: 10px;

    border-radius: 10px;

    padding: 10px;

    display: none;

}



.gantigambarbox input {

    width: 200px;

}



.gantigambarbox .gantigambar {

    align-self: end;

    width: 100px;

    height: 30px;

    border: none;

    border-radius: 10px;

    background-color: #f9fd00;

    color: #fff;

    cursor: pointer;

    text-shadow: 0 0 2px black;

}