@charset "UTF-8";
/* CSS Document */

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

/* Large screens ----------- */
@media only screen and (min-width : 1601px) {
    
    ::selection {
  		background: pink;
	}
	
	body {
        background-color: white;
        padding-left: 0px;
        padding-right: 0px;
		margin: 0px;
        padding-bottom: 200px;
    }
	p {
        font-family: 'Permanent Marker', cursive;
        font-size: 48px;
        color: teal;
		padding-left: 220px;
        padding-right: 220px;
        text-align: center;
    }
	
	.project_textSmall {
        font-family: 'Roboto Mono', monospace;
        font-size: 24px;
		color: #999999;
    }
    .link_big A:link {
        font-family: 'Permanent Marker', cursive;
        font-size: 90px;
        color: teal;
        text-decoration: none;
        background-color: yellow;
        overflow-wrap: break-word;
    }
    .link_big A:visited {
        font-family: 'Permanent Marker', cursive;
        font-size: 90px;
        color: teal;
        text-decoration: none;
        background-color: yellow;
        overflow-wrap: break-word;
    }
    .link_big A:active {
        font-family: 'Permanent Marker', cursive;
        font-size: 90px;
        color: teal;
        text-decoration: none;
        background-color: yellow;
        overflow-wrap: break-word;
    }
    .link_big A:hover {
        font-family: 'Permanent Marker', cursive;
        font-size: 90px;
        color: white;
        text-decoration: none;
        background-color: deeppink;
        overflow-wrap: break-word;
    }
}

/* Desktops and laptops ----------- */
@media only screen and (max-width : 1600px) {

	::selection {
  		background: pink;
	}
	
	body {
        background-color: white;
        padding-left: 0px;
        padding-right: 0px;
		margin: 0px;
        padding-bottom: 200px;
    }
	p {
        font-family: 'Permanent Marker', cursive;
        font-size: 48px;
        color: teal;
		padding-left: 120px;
        padding-right: 120px;
        text-align: center;
    }
	
	.project_textSmall {
        font-family: 'Roboto Mono', monospace;
        font-size: 24px;
		color: #999999;
    }
    .link_big A:link {
        font-family: 'Permanent Marker', cursive;
        font-size: 90px;
        color: teal;
        text-decoration: none;
        background-color: yellow;
        overflow-wrap: break-word;
    }
    .link_big A:visited {
        font-family: 'Permanent Marker', cursive;
        font-size: 90px;
        color: teal;
        text-decoration: none;
        background-color: yellow;
        overflow-wrap: break-word;
    }
    .link_big A:active {
        font-family: 'Permanent Marker', cursive;
        font-size: 90px;
        color: teal;
        text-decoration: none;
        background-color: yellow;
        overflow-wrap: break-word;
    }
    .link_big A:hover {
        font-family: 'Permanent Marker', cursive;
        font-size: 90px;
        color: white;
        text-decoration: none;
        background-color: deeppink;
        overflow-wrap: break-word;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (max-width : 1024px) {

	::selection {
  		background: pink;
	}
	
	body {
        background-color: white;
        padding-left: 0px;
        padding-right: 0px;
		margin: 0px;
        padding-bottom: 200px;
    }
	p {
        font-family: 'Permanent Marker', cursive;
        font-size: 42px;
        color: teal;
		padding-left: 60px;
        padding-right: 60px;
        text-align: center;
    }
	
	.project_textSmall {
        font-family: 'Roboto Mono', monospace;
        font-size: 24px;
		color: #999999;
    }
    .link_big A:link {
        font-family: 'Permanent Marker', cursive;
        font-size: 90px;
        color: teal;
        text-decoration: none;
        background-color: yellow;
        overflow-wrap: break-word;
    }
    .link_big A:visited {
        font-family: 'Permanent Marker', cursive;
        font-size: 90px;
        color: teal;
        text-decoration: none;
        background-color: yellow;
        overflow-wrap: break-word;
    }
    .link_big A:active {
        font-family: 'Permanent Marker', cursive;
        font-size: 90px;
        color: teal;
        text-decoration: none;
        background-color: yellow;
        overflow-wrap: break-word;
    }
    .link_big A:hover {
        font-family: 'Permanent Marker', cursive;
        font-size: 90px;
        color: white;
        text-decoration: none;
        background-color: deeppink;
        overflow-wrap: break-word;
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 640px) {

	::selection {
  		background: pink;
	}
	
	body {
        background-color: white;
        padding-left: 0px;
        padding-right: 0px;
		margin: 0px;
        padding-bottom: 100px;
    }
	p {
        font-family: 'Permanent Marker', cursive;
        font-size: 28px;
        color: teal;
		padding-left: 10px;
        padding-right: 10px;
        text-align: center;
    }
	
	.project_textSmall {
        font-family: 'Roboto Mono', monospace;
        font-size: 14px;
		color: #999999;
    }
    .link_big A:link {
        font-family: 'Permanent Marker', cursive;
        font-size: 28px;
        color: teal;
        text-decoration: none;
        background-color: yellow;
        overflow-wrap: break-word;
    }
    .link_big A:visited {
        font-family: 'Permanent Marker', cursive;
        font-size: 28px;
        color: teal;
        text-decoration: none;
        background-color: yellow;
        overflow-wrap: break-word;
    }
    .link_big A:active {
        font-family: 'Permanent Marker', cursive;
        font-size: 28px;
        color: teal;
        text-decoration: none;
        background-color: yellow;
        overflow-wrap: break-word;
    }
    .link_big A:hover {
        font-family: 'Permanent Marker', cursive;
        font-size: 28px;
        color: white;
        text-decoration: none;
        background-color: deeppink;
        overflow-wrap: break-word;
    }
}
