@font-face {
    font-family: ranyImport;
    src: url(/fonts/Rany.otf);
  }

:root {
    --pInfColor: rgba(150, 150, 150, 0.3)
}

.main-row {
    height: 100%;
}

.scrolling {
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scrolling::-webkit-scrollbar {
    display: none;
}

.bg-element {
    background-size: contain;
    background-repeat: no-repeat;

    z-index: -2;

    position: absolute;

    filter: drop-shadow(15px 15px 4px rgba(0,0,0,1)) opacity(10%);
    -webkit-filter: drop-shadow(15px 15px 8px rgba(0,0,0,1)) opacity(10%);
}

.font-rany {
    font-family: 'ranyImport',sans-serif;
    font-style:initial;
}

.bg-main {
    background-image: url(/images/icons/Animated.gif);

    width: 66vw;
    height: 66vh;

    max-width: 1320px;
    max-height: 1320px;

    transform: translate(-50%, -50%);
    background-position: center;

    opacity: 25%;

    left: 50%;
    top: 50%;
}

.bg-corner {
    width: 15vw;
    height: 15vh;

    max-width: 380px;
    max-height: 380px;
}

.cornerpos-tl {
    background-image: url(/images/corners/CornerTL.png);

    background-position: left top;
    left: 5vw;
    top: 5vh;
}

.cornerpos-tr {
    background-image: url(/images/corners/CornerTR.png);

    background-position: right top;
    right: 5vw;
    top: 5vh;
}

.cornerpos-bl {
    background-image: url(/images/corners/CornerBL.png);

    background-position: left bottom;
    left: 5vw;
    bottom: 5vh;
}

.cornerpos-br {
    background-image: url(/images/corners/CornerBR.png);

    background-position: right bottom;
    right: 5vw;
    bottom: 5vh;
}

.backgroundmain {
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(12px) grayscale(50%) brightness(75%);
    -webkit-backdrop-filter: blur(12px) grayscale(50%) brightness(75%);
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    overflow-y: hidden;
}

.infowindow {
    border-radius: 20px;
    background-color: var(--pInfColor);
    color: white;
    text-align: center;
    position: relative;
    padding: 40px;
    height: max-content;
    font-size: x-large;

    -webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.5); 
    box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.5);
}

.card-project {
    border: 2px rgba(255,255,255, 0.25);
    background-color: rgba(0, 0, 0, 0.25);

    -webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.33); 
    box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.33);

    margin-top: 2vh;
}

.card-project .card-body {
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px rgba(255,255,255, 0.25);
    border-radius: .25rem;
}

.btn {
    color: white;
    margin-top: 1vh;
    width: 100%;
    transition: ease-in background-color 0.25s;

    -webkit-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.33); 
    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.33);
}

.card-project .card-body .btn {
    border-color: rgba(255, 255, 255, 0.5);
    width: 100%;
}

.card-project .card-body .btn:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.5);
}

.btn-social {
    border-color: white;
    background-color: rgba(0, 0, 0, 0.5);
}

.btn-social:hover {
    color: white;
}

.spacer {
    height: 5vh;
}

h5 {
    font-style: normal;
    font-weight: normal;
}