/* Stylesheet File */
/* UI Programming Project*/ 
/* Author: Caoimhe O'Brien */
/* Date: 18/10/2024 */

/*Importing font*/ 

@import url('https://fonts.googleapis.com/css2?family=Yrsa:ital,wght@0,300..700;1,300..700&display=swap');

:root{
    --ftsize: 26px;
}

body{
    background-color: rgb(221, 236, 255);
}

h1{
    display: block; 
    margin: auto;
    text-align: center;
    padding: 1%; 
    
}

#GamePlayArea{
    display: inline-flex;
}

.the_canvas{
    margin: 1%; 
}

.key{
    margin-left: 1%;
    margin-right: auto;
    margin-bottom: 2%;
    padding: 1vh;    
    border: 2px solid black; 
    border-style: double;
    height: 60%;
    border-radius: 5px;
    background-color: rgba(255, 208, 216, 0.553) 
}

#buttonSection{
    margin-right: 10%;
}

button{
    margin-top: 1%;
    margin-left: 5%; 
    height: auto;
    padding: 2%;
    font-size: 30px;
    background-color: #7fc683;
    color:#020b2b;
    border-color: rgba(10, 10, 10, 0.766);
    border-radius: 20px;
}

#title{
    color: rgb(75, 49, 10);
    text-shadow: 8px 7px 10px rgb(179, 121, 13);
    font-size: 70px;
}