@font-face {
    font-family: 'appleGaramond';
    src: url('../fonts/AppleGaramond-Light.ttf');
}
@font-face {
    font-family: 'daydream';
    src: url('../fonts/Daydream.ttf');
}
@font-face {
    font-family: 'rainyhearts';
    src: url('../fonts/rainyhearts.ttf');
}
@font-face {
    font-family: 'barcode';
    src: url('../fonts/BarcodeFont.ttf');
}

:root {
    --bgimg: "";
    --quotebg: "";
    --quoteborder: "";
}

body {
    background: var(--bgimg), rgb(255, 238, 238);
    background-size: 110%;
    background-position: center;
    margin: 0;
    padding: 0;
    background-blend-mode: difference;
    overflow: hidden;
}

.bioContainer {
    display: grid;
    grid-template-columns: 20% 80%;
    grid-template-rows: 23% 5vh;

    width: 50vw;
    height: 90vh;

    margin: 5vh auto;
    padding: 0;
    
    font-family: 'appleGaramond';
    color: whitesmoke;

    background-color: #000000c0;
    border: 0.1vw solid white;
}
.item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.sub-item {
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 100%;
    height: 100%;
}
.bio_pfp {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;

    background-image: url('../images/pfp.jpg');
    background-repeat: no-repeat;
    background-size: 100%;

    border-bottom: 0.1vw solid white;
    border-right: 0.1vw solid white;
}
.bio_namebar {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;

    border-bottom: 0.1vw solid white;
}
.bio_barcode {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;

    font-family: 'barcode';
    font-size: 4.9vh;

    border-bottom: 0.1vw solid white;
    border-right: 0.1vw solid white;

    margin: 0;
    padding: 0;
}
.bio_hortext {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 5;

    font-family: 'rainyhearts';
    font-size: 5vh;

    border-right: 0.1vw solid white;

    writing-mode: vertical-lr;
    text-orientation: upright;
}
.bio_stats {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 5;

    font-family: 'rainyhearts';
    font-size: 6vh;
}

.btn_next {
    width: 25vw;
    height: 10vh;
    margin: 0 auto;
    cursor: pointer;
}
.btn_next a {
    font-family: 'daydream';
    font-size: 5vh;
    text-align: center;
    color: transparent;
    box-shadow: 0vw .5vw 1vw blue;
    border: none;
    text-decoration: none;
    transition: 1s;
    transition-timing-function: ease-out;
    animation: cont .1s linear infinite;
}
.btn_next a:link, a:visited, a:focus, a:active {
    text-decoration: none;
}
.btn_next a:hover {
    animation: cont_hover .1s linear infinite;
}
@keyframes cont {
    0% {
        background: repeating-linear-gradient(blue 0, blue 3px, transparent 5px, transparent 9px);
        background-clip: text;
    }
    50% {
        background: repeating-linear-gradient(blue 4px blue 7px, transparent 9px, transparent 13px);
        background-clip: text;
    }
    100% {
        background: repeating-linear-gradient(blue 2px, blue 5px, transparent 7px, transparent 11px);
        background-clip: text;
    }
}
@keyframes cont_hover {
    0% {
        background: repeating-linear-gradient(blue 0, blue 2px, white 4px, white 8px);
        background-clip: text;
    }
    50% {
        background: repeating-linear-gradient(blue 4px blue 6px, white 8px, white 12px);
        background-clip: text;
    }
    100% {
        background: repeating-linear-gradient(blue 2px, blue 4px, white 6px, white 10px);
        background-clip: text;
    }
}

.quoteblock {
    position: absolute;
    left: 5vw;
    bottom: 10vh;
    transform: rotate(-6deg);
    font-family: 'appleGaramond';
    font-size: 4vh;
    background: var(--quotebg);
    width: 30vw;
    padding: 1vw;
    color: #a02d00;
    border: var(--quoteborder) .5vw;
    border-style: groove;
    animation: boxBgAnim 1s infinite linear;
    font-weight: bolder;
    text-shadow: .2vw .2vw 0 white;
}
@keyframes boxBgAnim {
        0% {
            background-image:
                repeating-radial-gradient(circle at top left,
                    #ff5e00,
                    #ff880088,
                    .25vw,
                    transparent .25vw,
                    transparent .25vw);
        }
        25% {
            background-image:
                repeating-radial-gradient(circle at top left,
                    #ff5e00,
                    #ff880088,
                    .5vw,
                    transparent .5vw,
                    transparent .5vw);
        }
        50% {
            background-image:
                repeating-radial-gradient(circle at top left,
                    #ff5e00,
                    #ff880088,
                    .75vw,
                    transparent .75vw,
                    transparent .75vw);
        }
        75% {
            background-image:
                repeating-radial-gradient(circle at top left,
                    #ff5e00,
                    #ff880088,
                    .5vw,
                    transparent .5vw,
                    transparent .5vw);
        }
        100% {
            background-image:
                repeating-radial-gradient(circle at top left,
                    #ff5e00,
                    #ff880088,
                    .25vw,
                    transparent .25vw,
                    transparent .25vw);
        }
    }
@keyframes reveal {
    0% { transform: translateY(12vh);}
    50% { transform: translateY(12vh);}
    100% { transform: translateY(0);}
}
.pastwork {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    padding: 0;
}
.pastwork iframe {
    position: absolute;
    width: 20vw;
    height: 20vw;
    padding: 0;
    margin: 0;
    border: none;
}
.pastwork img {
    position: absolute;
}
.kennel {
    width: 100%;
    height: 100%;
    margin: 0;
}
.kennel img {
    position: absolute;
}
.kennel span {
    color: #ff7300;
    position: absolute;
    top: 5vh;
    width: 18vw;
    text-align: center;
    z-index: 5;
    font-size: 4vh;
    font-family: 'rainyhearts';
    rotate: 13deg;
    font-weight: bold;
}
.research-title {
    position: absolute;
    font-family: 'daydream';
    background: repeating-radial-gradient(circle at top, red 0%, red 3%, orange 4%, orange 7%);
    background-clip: text;
    -webkit-text-stroke: white 3px;
    color: #00000000;
    text-align: center;
    font-size: 10vh;
    left: 27vw;
    top: 3vh;
    rotate: 4deg;
}
.research {
    position: absolute;
    width: 100%;
    height: 100%;
}
.research img {
    position: absolute;
}
.sourceOdd {
    animation: dancing 1s infinite linear;
}
.sourceEven {
    animation: dancing 1s .5s infinite linear;
}
@keyframes dancing {
    0% { transform: rotate(-2deg);}
    49% {transform: rotate(-2deg);}
    50% {transform: rotate(2deg);}
    100% {transform: rotate(2deg);}
}
.visunovos {
    position: absolute;
    width: 100%;
    height: 100%;

    display: flex;
    justify-items: center;
    align-items: center;
}
.visunovos iframe {
    width: 80vw;
    height: 90vh;
}
.visunovos_note {
    position: absolute;

    font-family: 'appleGaramond';
    color: orangered;
    text-shadow: black .2vw .4vh 0;
    font-size: 4vh;
    
    background-color: #ff905c;
}
.windows {
    position: absolute;
    bottom: 18vh;
    right: 20vw;
    font-family: 'rainyhearts';
    font-size: 5vh;
    color: #FF1D00;
    background-color: black;
    text-decoration: none;
    border: #FF1D00 solid 1px;
    cursor: pointer;
}
.windows_disabled {
    position: absolute;
    font-family: 'rainyhearts';
    font-size: 2.5vh;
    color: #a8a8a8;
    background-color: black;
    text-decoration: none;
    border: #a8a8a8 solid 1px;
    cursor: pointer;
}