@import url('https://fonts.googleapis.com/css2?family=Mouse+Memoirs&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Subrayada:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merienda+One&display=swap');

.main_frame{
    display:flex;
    background: #C8FFF4;
    width: 1520px;
    height: 750px;
    box-shadow: inset 100px 100px 100px lightblue;
}
body{
    margin:0px;
}
a{
    text-decoration:none;
    color: rgb(76,223,207);
}
.function_block{
display:flex;
justify-content:center;
font-size:40px;
color: rgb(76,223,207);
align-self:end;
background:  rgb(37,50,61);
width: 300px;
box-shadow: inset 50px 50px 60px  rgb(31,35,44);
margin-left:3px;
height: 99px;
border-radius:10px;
font-family: 'Mouse Memoirs', sans-serif;
transition:all 1s;

}
.function_block:hover {
    box-shadow:none;
    color:rgb(21,27,31);
    background: rgb(226,241,86);
    cursor:pointer;
}
.function_block:hover a{
    
    color:rgb(21,27,31);

}

.title{
    left: 100px;
    top: 100px;
    font-size: 100px;
    position:absolute;
    font-family: 'Montserrat Subrayada', sans-serif;
    text-shadow:  20px 10px 1px lightblue;
    color: darkblue;
    background: gray;
    border-left:solid 10px rgb(76, 0, 139);
    border-radius: 0px 10px 10px 0px;
    height: 130px;
    margin-left:-50px;
    width: 700px;
}
.dino_frame{
    display:flex;
    justify-content:center;
    align-items:center;
    left: 800px;
    top:50px;
    position:absolute;
    width: 650px;
    height: 550px;
    box-shadow: 1px 10px 500px black;
    border-radius: 100px;
    transition: 2s ease-in-out;
}
.dino_img1{
    position:absolute;
    width: 600px;
    height: 500px;
    transition:all 2s;
}


.dino_img1.close{
    opacity: 0;
}
.dino_img1.open{
    opacity: 1;
}
.dino_img2{
    opacity:0;
    width: 500px;
    height: 500px;
    transition:2s all;
    position:absolute;
    
}
.dino_img2.open{
    opacity:1;
}
.dino_img2.close{
    opacity:0;
}
.dino_img3{
    width: 600px;
    height: 500px;
    position:absolute;
    opacity:0;
    transition: all 2s;
}
.dino_img3.open{
    opacity:1;
}
.dino_img3.close{
    opacity:0;
}

/*Start of making main game*/

.main{
    display:flex;
    justify-content:center;
    align-items: center;
    background: #C8FFF4;
    width: 1520px;
    height: 750px;
    box-shadow: inset 100px 100px 100px lightblue;
}
.card_block{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 30px;
    width: 1200px;
    height: 650px;
    
}
.card{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width: 190px;
    height: 240px;
    background:#008080;
    border-radius:10px;
    box-shadow:2px 2px 10px black,inset 50px 50px 100px rgb(0,128,190);
    border: 10px ridge gold;
    color:yellow; 
    border-color:gold;
    font-size:50px;
    text-shadow: -2px -2px 2px gold;
    font-family: 'Merienda One', 'cursive';
    cursor:pointer;
    transition:1s all;
    
}
.card:hover{
    margin-right:20px;
    margin-bottom:20px;
    margin-left:-20px;
    margin-top:-20px;
    box-shadow:20px 20px 20px black,inset 10px 10px 50px white;

}
.img{
    width: 0px;
    height: 240px;
    transition: 1s all;
}

/*Support page*/
.support_frame{
    display:flex;
    justify-content:center;
    align-items: center;
    background: #C8FFF4;
    width: 1520px;
    height: 750px;
    box-shadow: inset 100px 100px 100px lightblue;
}