@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Inconsolata:wght@200..900&display=swap');

*, html{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition: transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    text-transform: lowercase;
}

body{
    background: url('assets/background.png');
    background-size: cover;
    min-height: 100vh;
    overflow-y: hidden;
    overflow-x: hidden;
    font: normal 1em/150% 'Inconsolata', monospace;
    color: #333;
}

main{
		border: 5px solid #5C98B2;
		border-radius: 300px;
		width: 500px;
        height: 500px;
		margin: 5em auto;
		background-color: #fff;
		background-image:
		linear-gradient(#eee .1em, transparent .1em);
		background-size: 100% 1.5em;
		padding: 2em;
        text-align: center;
}

#fact-container{
    font-size: 1.2em;
    margin: 1.5em 0 2em;
}

#fact-container img{
    max-width: 100%;
  max-height: 5em;
  margin-top: 1em;
}

main button{
    background-color: #f0f0f0;
    color: #5C98B2;
    border: none;
    padding: 0.5em 1em;
    font-size: 1em;
    cursor: pointer;
    border: 2px solid #5C98B2;
    border-radius: 5px;
    font: normal 1em 'Inconsolata', monospace;
}

main button:hover, main button:focus{
    background-color: #5C98B2;
    color: #fff;
}

h1{
    text-align: center;
    margin-top: 0.5em;
    font-size: 3em;
    color: #5C98B2;
    font: normal 3em 'Cookie', cursive;
}

nav{
    display: block;
    margin: 1.5em auto;
    width: fit-content;
}

nav a:link, nav a:visited{
	background: #5C98B2;
	padding: 10px;
	color: #fafafa!important;
	text-transform: uppercase;
	letter-spacing: 2px;
    text-decoration: none;
}

nav a:hover, nav a:focus{
	background: #999;
}

	::selection {
		background: #eee;
		color: #5C98B2;
	}
	::-moz-selection {
		background: #eee;
		color: #5C98B2;
	}
	::-webkit-selection {
		background: #eee;
		color: #5C98B2;
	}

    /* Mobile devices (up to 768px) */
    @media (max-width: 768px) {
        body {
            overflow-y: auto;
        }
        
        main {
            width: 90%;
            height: auto;
            margin: 2em auto;
            border-radius: 20px;
            padding: 1.5em;
        }
        
        h1 {
            font-size: 2em;
            margin-top: 0.3em;
        }
        
        #fact-container {
            font-size: 1em;
            margin: 1em 0 1.5em;
        }
        
        nav a:link, nav a:visited {
            padding: 8px;
            font-size: 0.9em;
        }
    }

    /* Small mobile devices (up to 480px) */
    @media (max-width: 480px) {
        main {
            width: 95%;
            margin: 1em auto;
            padding: 1em;
        }
        
        h1 {
            font-size: 1.5em;
        }
        
        #fact-container {
            font-size: 0.9em;
        }
        
        main button {
            font-size: 0.9em;
            padding: 0.4em 0.8em;
        }
    }