@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);
}

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

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

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

.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;
    flex-direction: row-reverse;
    position:absolute;
    top:0;
    align-items: center;
    align-content: center;
}

.header h1{
    font-family: 'kiwi';
    margin:0;
    font-size: 6vw;
    color: rgb(139, 197, 244);
}

.project-grid{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(3,1fr);
    width:68vw;
    column-gap: 1.5vw;
    row-gap: 1.5vw;
    margin-top:10vw;
    margin-left:auto;
    margin-right:auto;
}

.project-grid-item{
    position: relative;
    width: 100%;
    height: 15vw;
    background-color: rgb(110, 159, 255);
    border-radius: 1vw;
    text-decoration: none;
}

.project-grid-item::before{
    content:" ";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-image: var(--bg-image);
    background-size: cover;
    opacity:0;
    z-index: 1;
    transition:0.3s;
    border-radius: 1vw;
}

.project-grid-item:hover{
    cursor: pointer;
}

.project-grid-item:hover::before{
    opacity: 1;
}

.project-grid-item h1{
    font-family: empire;
    font-size: 3vw;
    text-align: center;
    color: rgb(7, 17, 122);
    position: relative;
    z-index: 10;
    top:2vw
}

.project-grid-item h2 {
    font-family: super-pixel;
    font-size: 4vw;
    text-align: center;
    margin-bottom: 0;
    color: rgb(7, 17, 122);
    position: relative;
    z-index: 10;
}

.project-grid-item h3{
    font-family: EXEpixelperfect;
    font-size: 2vw;
    text-align: center;
    margin-top: 1vw;
    color: rgb(7, 17, 122);
    position: relative;
    z-index: 10;
}

.project-grid-item h4{
    font-family: 'kiwi';
    font-size: 5.5vw;
    text-align: center;
    margin-top: 1vw;
    color: rgb(7, 17, 122);
    position: relative;
    top:3vw;
    z-index: 10;
}

.button-link-back{
    z-index: 100;
    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(7, 3, 35);
    color: rgb(128, 144, 238);
    font-family: 'exepixelperfect';
    padding:0.25vw;
    font-size: 1.25vw;
}