@font-face {
    font-family: 'daydream';
    src: url('fonts/daydream.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'kiwi';
    src: url('fonts/KiwiSoda.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'pixel-love';
    src: url('fonts/pixel-love.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'cursive';
    src: url(fonts/Cursive.ttf);
}

@font-face {
    font-family: 'exepixelperfect';
    src: url(fonts/EXEPixelPerfect.ttf);
}

body{
    background-image: url('images/old-sparrowfish/background-image.jpg');
    background-size: cover;
    background-attachment: fixed;
    overflow-y: hidden;
    overflow-x: hidden;
}

h1{
    font-family: 'kiwi';
    margin:0;
    font-size: 6vw;
    color: rgb(85, 32, 100);
}

.wrapper{
    width:98vw;
    height:45vw;
    margin-left:auto;
    margin-right:auto;
}

.button-link{
    padding: 0;
    margin: 0;
    text-decoration: none;
}

.flex-row{
    display:flex;
    flex-direction:row;
}

.flex-column{
    display:flex;
    flex-direction:column;
}

.header{
    display:flex;
    width:98vw;
    position:absolute;
    align-items: left;
    align-content: left;
}

.header h1{
    font-family: 'kiwi';
    margin:0;
    font-size: 6vw;
    color: rgb(84, 181, 155);
}

.button-link-back{
    padding:0;
    margin:0;
}

.button-link-back:hover{
    cursor:pointer;
    transform:rotate(-10deg);
    filter: drop-shadow(0.5vw 0.5vw 0.5vw rgb(69, 44, 33));
}

.icon-tooltip{
    position:absolute;
    z-index: 10000;
    background-color: rgb(4, 35, 3);
    color: rgb(128, 238, 159);
    font-family: 'exepixelperfect';
    padding:0.25vw;
    font-size: 1.25vw;
}

.project-info{
    position: relative;
    top:10vw;
    left:72vw;
    width:18vw;
    height: 20vw;
    padding:1vw;
    border-radius: 0.5vw;
    background-color: rgba(171, 111, 187, 0.838);
    border:solid 0.2vw rgb(195, 103, 215);
} 

.project-info h1{
    font-size:1.5vw;
    font-family:'daydream';
    color: rgb(43, 2, 46);
}

.project-info h2{
    font-size:1vw;
    font-family:'daydream';
    color: rgb(228, 186, 232);
}

.project-info p{
    font-size:1vw;
    font-family:'exepixelperfect';
    color: rgb(43, 2, 46);
}

.project-info a{
    text-decoration: none;
}

.project-info h1:hover{
    color: rgb(62, 209, 207);
}

.text-frame{
    position:absolute;
    color:white;
    height: 28vw;
    width:40vw;
    top:11vw;
    left:30vw;
    padding:0.5vw;
    overflow-y: scroll;
}

.text-frame::-webkit-scrollbar{
    width:1vw;
    visibility: visible;
}

.text-frame::-webkit-scrollbar-track{
    background-color: rgba(170, 111, 187, 0.453);
}

.text-frame::-webkit-scrollbar-thumb{
    background-color: aqua;
}

.text-frame h1{
    color: white;
    font-size:1.5vw;
    font-family:'daydream';
    margin-top:1vw;
    margin-bottom:1vw;
}

.text-frame p{
    color: white;
    font-size:2vw;
    font-family:'exepixelperfect';
    margin:0.5vw;
}

.button-link-back{
    padding:0;
    margin:0;
}

.button-link-back:hover{
    cursor:pointer;
    transform:rotate(-10deg);
    filter: drop-shadow(0.5vw 0.5vw 0.5vw rgb(85, 215, 211));
}

.icon-tooltip{
    position:absolute;
    z-index: 10000;
    background-color: rgb(4, 35, 3);
    color: rgb(238, 128, 216);
    font-family: 'exepixelperfect';
    padding:0.25vw;
    font-size: 1.25vw;
}