/* Google fonts Ribeye Marrow & Noto Sans */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Ribeye+Marrow&display=swap');


/* CSS variables */
:root {
    --primary-font:"Noto Sans", sans-sefir;
    --secondary-font:"Ribeye Marrow", cursive;
    --primary-color:#006494; /* blue */
    --secondary-color:#13293D; /* dark blue */
    --highlight-color:#1B98E0; /* light blue */
    --highlight-color-light:#E8F1F2; /* light grey */
}

/* Global styles */

/* Stops the page from scrolling */
html, body {
    height: 100%;
    overflow-y: hidden; 
    overflow-x: hidden; 
}

body {
    font-family: var(--primary-font);
    background-color: var(--highlight-color-light);
    text-align: center;
}

h1 {
    font-family: var(--secondary-font);
    margin: 0;
}

h2, h3 {
    color: var(--primary-color);
    font-family: var(--secondary-font);
}

main {
    background: url(../images/background.png) no-repeat center center/cover;
    height: 100vh;
}

/* Heading section */
header {
    color: var(--highlight-color-light);
    background-color: var(--primary-color);
}

/* Info section */
.info p {
    color: var(--secondary-color);
}


/* Game section */
.game-card {
    border: 5px solid var(--highlight-color);
    background-color: var(--highlight-color-light);
    border-radius: 50%;
    height: 250px;
    width: 250px;
    
}

.game-section {
    height: 75vh;
}

/* Symbol images */
.game-card img {
    width: 48px;
    height: 48px;
}


/* Custom buttons */
.custom-button-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.custom-button-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.custom-button-primary:hover {
    background-color: var(--highlight-color);
    border-color: var(--primary-color);
}

.custom-button-secondary:hover {
    background-color: var(--primary-color);
    border-color: var(--secondary-color);
}

/* Home page */
#home-screen {
    height: 100vh;
    background:  url(../images/background-home.png) no-repeat center center/cover;
}

.cover-text {
    background-color: rgba(255, 255, 255, .7);
    border-radius: 1.5rem;
}

/* Removes the default anchor colour and sets it to the same as the parent element */
a {
    color: inherit;
    text-decoration: none;
}