@font-face {
    font-family: magaka ;
    src: url(../Fonts/mangaka/Mangaka.otf);
}

body{
    background-image:url(https://i.pinimg.com/736x/88/60/99/886099fe99387357b000cb96735163d5.jpg);
    background-repeat:no-repeat;
    height:100vh;
    background-position:center;
    background-size:cover;
    width:100vw;
}

h1{
    display:flex;
    text-align:center;
    justify-content:center;
    font-size:5em;
    font-family:magaka;
    font-weight: 1;
    color:rgb(110, 67, 108)

}

#Hamburger {
    background: rgb(247, 194, 231);
    height: 100px;
    width: 300px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -300%);
    border:3px dotted;   
    font-size:2em;
    text-decoration:none;
    font-family:magaka;
    color:rgb(110, 67, 108)
}

#Parallax {
    background: rgb(247, 194, 231);
    height: 100px;
    width: 300px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -100%);
    border:3px dotted;
    font-size:2em;
    text-decoration:none;
    font-family:magaka;
    color:rgb(110, 67, 108)
}

#Responsive {
    background: rgb(247, 194, 231);
    height: 100px;
    width: 300px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, 100%);
    border:3px dotted;   
    font-size:2em;
    text-decoration:none;
    font-family:magaka;
    color:rgb(110, 67, 108)
}

#Game {
    background: rgb(247, 194, 231);
    height: 100px;
    width: 300px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, 300%);
    border:3px dotted;
    font-size:2em;
    text-decoration:none;
    font-family:magaka;
    color:rgb(110, 67, 108)
    
}

#Tree {
    background: rgb(247, 194, 231);
    height: 100px;
    width: 300px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, 500%);
    border:3px dotted;
    font-size:2em;
    text-decoration:none;
    font-family:magaka;
    color:rgb(110, 67, 108)
    
}


#Pho {
    background: rgb(247, 194, 231);
    height: 100px;
    width: 300px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, 700%);
    border:3px dotted;
    font-size:2em;
    text-decoration:none;
    font-family:magaka;
    color:rgb(110, 67, 108)
    
}

#Web {
    background: rgb(247, 194, 231);
    height: 100px;
    width: 300px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, 900%);
    border:3px dotted;
    font-size:2em;
    text-decoration:none;
    font-family:magaka;
    color:rgb(110, 67, 108)
    
}

@media screen and (max-width: 578px) {

    #Hamburger {
        background: rgb(247, 194, 231);
        height: 100px;
        width: 300px;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        position: absolute;
        top: 50%;
        left: 50%; 
        transform: translate(-50%, -200%);
        border:3px dotted;   
        font-size:2em;
        text-decoration:none;
        font-family:magaka;
        color:rgb(110, 67, 108)
    }
    
    #Parallax {
        background: rgb(247, 194, 231);
        height: 100px;
        width: 300px;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        position: absolute;
        top: 50%;
        left: 50%; 
        transform: translate(-50%, 0%);
        border:3px dotted;
        font-size:2em;
        text-decoration:none;
        font-family:magaka;
        color:rgb(110, 67, 108)
    }
    
    #Responsive {
        background: rgb(247, 194, 231);
        height: 100px;
        width: 300px;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        position: absolute;
        top: 50%;
        left: 50%; 
        transform: translate(-50%, 200%);
        border:3px dotted;   
        font-size:2em;
        text-decoration:none;
        font-family:magaka;
        color:rgb(110, 67, 108)
    }
    
    #Game {
        background: rgb(247, 194, 231);
        height: 100px;
        width: 300px;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        position: absolute;
        top: 50%;
        left: 50%; 
        transform: translate(-50%, 400%);
        border:3px dotted;
        font-size:2em;
        text-decoration:none;
        font-family:magaka;
        color:rgb(110, 67, 108)
        
    }
    
    #Tree {
        background: rgb(247, 194, 231);
        height: 100px;
        width: 300px;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        position: absolute;
        top: 50%;
        left: 50%; 
        transform: translate(-50%, 600%);
        border:3px dotted;
        font-size:2em;
        text-decoration:none;
        font-family:magaka;
        color:rgb(110, 67, 108);
        
    }

    #Pho {
        background: rgb(247, 194, 231);
        height: 100px;
        width: 300px;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        position: absolute;
        top: 50%;
        left: 50%; 
        transform: translate(-50%, 800%);
        border:3px dotted;
        font-size:2em;
        text-decoration:none;
        font-family:magaka;
        color:rgb(110, 67, 108);
        
    }


}