@import "index.css";

body{
    height: fit-content;
    background-color: #000;
    background-image: url('https://i.postimg.cc/mgFzRjd7/cool-mountains-4k-HD-4.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
}

.container {
    max-width: 1000px;
    min-height: 85vh;
    margin: auto;
    border-radius: 25px;
    background: rgba(255,255,255, .30);
    backdrop-filter: saturate(100%) blur(10px);
    padding-bottom: 1cm;
}

.f-judul {
    padding-top: 1cm;
    padding-bottom: 0.5cm;
    font-size: 75px;
    text-align: center;
    line-height: 2.3cm;
    color:white;
}

.section-pictures {
    display: flex;
    justify-content: center;
    margin-left: 1.2cm;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
    display: flex;
    padding-top: 0.5cm;
}

.section-pictures a {
    vertical-align: top;
    display: inline-block;
    width: 190px;
    text-align: center;
    /* padding-left: 2cm;
    padding-right: 2cm;
    margin-bottom: 0.5cm; */
}

.caption {
    display: block;
    margin-left: 0.8cm;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: inline-block;
    padding-right: 0.7cm;
    color:white;
}

.border-box {    
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit:cover;
    box-shadow: 
    0 0 1px #fff,
    0 0 21px #789,
    0 0 42px #000;
}

.border-box1 {    
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: none;
    object-position: 45% 50%;
    box-shadow: 
    0 0 1px #789,
    0 0 21px #235,
    0 0 42px #000;
}

.border-box2 {    
    border-radius: 50%;
    width:150px;
    height:150px;
    object-fit:none;
    object-position: 50% 95%;
    box-shadow: 
    0 0 1px #789,
    0 0 21px #235,
    0 0 42px #000;
}

.border-box3 {    
    border-radius: 50%;
    width:150px;
    height:150px;
    object-fit:none;
    object-position: 45% 35%;
    box-shadow: 
    0 0 1px #789,
    0 0 21px #235,
    0 0 42px #000;
}

.border-box4 {    
    border-radius: 50%;
    width:150px;
    height:150px;
    object-fit:none;
    object-position: 50% 50%;
    box-shadow: 
    0 0 1px #789,
    0 0 21px #235,
    0 0 42px #000;
}

.border-box5 {    
    border-radius: 50%;
    width:150px;
    height:150px;
    object-fit:none;
    object-position: 50% 40%;
    box-shadow: 
    0 0 1px #789,
    0 0 21px #235,
    0 0 42px #000;
}