/* custom fonts -------------- */
@font-face{
    font-family:"planB";
    src:url(fonts/PLANB.ttf) format('truetype');
    font-style:normal;
    font-weight:100;
}

@font-face{
    font-family:"baksoSapi";
    src:url(fonts/BaksoSapi.otf) format('truetype');
    font-style:normal;
    font-weight:100
}

@font-face{
    font-family:"consolaB";
    src:url(fonts/CONSOLAB.ttf) format('truetype');
    font-style:normal;
    font-weight:100
}

@font-face{
    font-family:"MSgothic";
    src:url(fonts/MSGOTHIC.ttf) format('truetype');
    font-style:normal;
    font-weight:100
}

/* header stuff -------------- */ 

.header{
    /* background-color:#082E49;
    border-radius:3px; */
    padding-bottom:15px;
    padding-top:15px;
    background-color:#020C12;
    
    position:fixed;
    width:100%;
    
    z-index:1;
}

.logo{
    text-align:center;
    height:75px;
    z-index:1;
}

.button{
    color:#fefefe;
    font:normal 24px "planB", verdana;
    padding:10px 15px;
    border:none;
    text-decoration:none;
}

.button:hover{
    color:#B8DEF5;
}

.buttonSelected{
    color:#DCEFF9;
    font:normal 24px "planB", verdana;
    padding:10px 15px;
    border:none;
    
    text-decoration-line:underline;
    text-decoration-color:#304653;
    text-underline-offset:10px;
}

.buttons{
    background-color:#051620;
    padding:1vh 0;
    
    text-align:center;
    border-radius:3px;
    
    margin-top:103px;
    position:fixed;
    width:100%;
    
    z-index:1;
}

.spacer{
    padding-top:160px;
}

/* widespread code ---------- */

body{
    background:#020C12;
    margin:0;
    padding:0;
}

h1 {
    text-decoration:bold;
    text-align:left;
    font-size:32px;
    margin:10px 0;
}


.container{
    font:normal 16px baksoSapi;
    margin:auto;
    color:#EDF6FD;
    width:69%;
    
    max-width:900px;
}

.tempText{
    font-style:italic;
    color:#fefefe;
    opacity:0.33;
}

/* footer ---------------- */
.footer{
    position:relative;
    left:0;
    width:100%;
    text-align:center;
    opacity:50%;
    
    color:#fff;
    margin-top:30px;
}

.footer p{
    margin-bottom:5px;
}

.socials{
    width:100%;
    height:20px;
    
    margin-bottom:50px;
}

.socials img{
    height:32px;
}

/* home ------------------ */

.box-1{
    background-color:#072436;
    padding:20px;
    margin:20px 15px;
    text-align:center;
    height:425px;
}

.box-1 h1{
    text-decoration:bold;
    text-align:center;
    font-size:32px;
    margin-bottom:20px;
}

.counter{
    font-size:18px;
    font-family:"Times New Roman";
    text-align:center;
    
    line-height:10px;
}

.guestbookWRAP{
    background-color:#072436;
    padding:20px;
    margin:20px 15px;
    text-align:center;
    height:auto;
}

.guestbook{
    height:410px;
    width:85%
}

.boxImage{
    width:85%;
    height:auto;
    max-width:512px;
}
/* portfolio ----------- */ 

/*.boxCenter{
    position:block;
    text-align:center;
    justify-content:center;
}*/
.box-5{
    position:relative;
    left:0;
    bottom:0;
    width:100%;
    text-align:center;
    opacity:50%;
    margin-top:22.5%;
    background-color:#020C12;
}

.imageContainer{
    display:block;
    padding-bottom:20px;
    text-align:center;
}

.box{
    position:relative;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    transition: filter 0.25s ease-in-out;
    &:hover {
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(0%);
    }
}

.box img{
    width:100%; 
    height:150px;
    transition: filter 0.25s ease-in-out;
    filter:blur(1px) brightness(65%);
    object-fit:cover;
    image-rendering:crisp-edges;
}

.box img:hover{
    width:100%; 
    height:150px;
    transition: filter 0.25s ease-in-out;
    filter:blur(0px) brightness(80%);
    object-fit:cover;
}

.boxtext{
    position:absolute;
    top:0%;
    color:#fff;
    padding:10px;
    
    font-weight:bold;
    font-size:45px;
    text-transform:uppercase;
    
    user-select:none;
    pointer-events:none;
}

/* blog ---------------------------- */
.boxWrapper{
    display:flex;
    width:95%;
    margin:0 auto;
    justify-content:center;
    
    max-width:900px;
}

.leftBox{
    background-color:#072436;
    padding:10px 20px;
    color:#fff;
    width:60%;
    margin-right:10px;
    
    font-size:16px;
}

.leftBox p{
    margin:1px 0;
    padding:0;
    
    font-family:Georgia;
}

.leftBox h1{
    font-size:38px;
    font-weight:bold;
    padding-top:15px;
}

.leftBox h2{
    font-size:14px;
    font-weight:normal;
    margin-top:-8px;
}

.leftBox h3{
    font-size:16px;
    font-style:italic;
    font-weight:bold;
    
    line-height:8px;
}

.leftBox h4{
    font-size:32px;
    font-style:italic;
    font-weight:bold;
}

.leftBox h5{
    font-size:20px;
    font-weight:bold;
    text-decoration:underline;
    
    margin:12px 0;
    padding:0;
}

.leftBox a{
    color:lightblue;
}

.mainHeading{
    font-family:"Times New Roman";
}

.rightBox{
    background-color:#072436;
    padding:5px;
    width:30%;
    
    color:#fff;
    font-size:20px;
}

.rightBox h1{
    margin-top:25px;
    margin-bottom:25px;
    
    font-size:25px;
    font-family:"Verdana";
    
    text-align:center;
}

.blogButton{
    background-color:#5A7787;
    color:#000;
    margin:3px 0px;
    padding:1vh 0px;
    width:100%;
    
    border:#212B30;
    border-style:outset;
    
    cursor:pointer;
    
    font-family:"Arial";
}

.blogButton:hover{
    background-color:#678EA2;
}

.box030424{
    text-align:center;
}

.box040824-0{
    text-align:center;
}

.center{
    text-align:center;
}

.interestButton{
    background-color:#5A7787;
    color:#000;
    margin:12px 0px;
    padding:0.75vh 0px;
    width:30%;
    
    border:#212B30;
    border-style:outset;
    
    cursor:pointer;
    
    font-family:"Arial";
}

.interestButton:hover{
    background-color:#678EA2;
}

.songlist{
    margin:10px 0;
}
/* videos -------------------------- */
.videoBox{
    position:relative;
    min-width:100%;
    max-width:720px;
    margin:15px auto;
    max-height:405px;
}

.videoBox iframe{
    position:absolute;
    left:50%;
    transform:translate(-50%, 0%);
    width:100%;
    height:85%;
    
    max-width:720px;
    max-height:405px;
    
    padding:10px 0;
}

.video-number{
    margin:0 0;
}

.videoWrapper {
    position: relative;
    padding-bottom: clamp(0%, 56.25%, 405px);
    overflow: hidden;
    
    max-height:405px;
}

.arrows{
    display:flex;
    margin:-5% 20%;
    max-height:120px;
    
    justify-content:center;
    align-items:center;
}

.leftArrow,
.rightArrow{
    background-color:#adb5bd;
    color:#000;
    
    font-size:25px;
    padding-left:7px;
    padding-right:10px;
    margin:0 35%;
    
    width:50px;
    height:50px;
    
    cursor:pointer;
}

@media (min-width: 720px) {
    .leftArrow,
    .rightArrow {
        margin: 0 105px;
    }
    
    .arrows{
    display:flex;
    margin:-25px 20%;
    max-height:120px;
    
    justify-content:center;
    align-items:center;
    }

}

.rightArrow{
    background-color:#93B5C6;
    text-align: right;
}

.video-number{
    font:24px "consolaB";
    color:#fff;
    text-align:center;
}

/* posters ------------------------- */
.imgWrap{
    display:flex;
    
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}

.imgContainer{
    flex:1;
    padding:0 30px;
    
    height:60vh;
}

.imgPoster{
    display:flex;
    flex-direction:column;
    align-items:center;
    
    color:#fff;
    
    width:100%;
}

.posterWrap{
    height:52vh;
    
    display:flex;
    align-items:center;
}

#imgPoster img.posterImage{
    width:40vh;
    image-rendering:crisp-edges;
}

.imgButtons{
    width:100%;
    padding:0 30px;
    padding-top:25px;
    
    text-align:center;
}

.posterButton{
    cursor:pointer;
}

.posterNumber{
    border:1px solid gray;
    width:15px;
    height:15px;
    
    text-align:center;
    
    font-family:"Times New Roman";
    background:transparent;
    color:#fff;
}

.disabledButton{
    filter: grayscale(100%);
    opacity: 0.5;
    pointer-events:none;
}

.sliderImage{
    padding:0 30px;
    width:auto;
}

/* updates ------------------------- */
.blogBox{
    background-color:#072436;
    padding:35px;
    margin:20px 35px;
    
    width:80%;
    
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
    
    
    color:white;
    font-family:Georgia;
}

.blogBox h1{
    text-align:center;
    text-decoration-line:underline;
}
/* questions (irrelevant) ---------- */

.box-2{
    background-color:#072436;
    border:3px #062337 solid;
    padding:10px;
    margin:20px 15px;
}

.box-2 hr{
    border:none;
    height:3px;
    background-color:#EDF6FD;
    border-radius:2px;
    margin-top:20px;
    margin-bottom:25px;
}

.questionBox{
    background-color:#072436;
    padding:20px;
    margin:20px 15px;
    text-align:center;
}

.box-2 textarea {
    width:255px;
    height:150px;
    margin:5px 0;
    padding:10px;
    background-color:#fefefe;
    border:2px solid #27272B;
    
    font-size:14px;
    font-family:"Times New Roman";
    letter-spacing:0.25px;
}

.box-2 textarea::placeholder{
    font-family:"Times New Roman";
    color:#94949E;
    font-weight:bold;
}

.sendQuestion{
    font:normal 20px baksoSapi;
    padding:5px 10px;
    cursor:pointer;
}

.sendQuestion:hover{
    background-color:#D4D4D8;
    border-color:#D4D4D8;
}

.box-3{
    background-color:#072436;
    border:3px #062337 solid;
    padding:10px;
    margin:20px 15px;
}

.box-3 hr{
    border:none;
    height:3px;
    background-color:#EDF6FD;
    border-radius:2px;
    margin:25px 0;
}