@charset "utf-8";
/* CSS Document */
	body {
		background-color: #fdced8;
	}
	a {
	    font-family: 'Biryani', sans-serif;
		text-decoration: none;
	}

@media only screen and (min-width: 1081px) {
    

	.button {
		width: 60%;
		background-color: #ab4c61;
		border: none;
		color: white;
        text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 20px;
		transition-duration: 0.4s;
		border-radius: 8px;
	}
	.button:hover{
		background-color: #c4697c;
    }
    .comp {
        background: url('./comp.png');
    }
    .comp:hover {
        background: url('./compOut.png');
        width: 270px;
        height: 270px;
    }
    .camera {
        background: url('./camera.png');
    }
    .camera:hover {
        background: url('./cameraOut.png');
    }
    
    .falcon {
        background: url('./falcon.png');
    }
    .falcon:hover {
        background: url('./falconOut.png');
    }
    .videos {
        background: url('./vhs.png');
    }
    .videos:hover {
        background: url('./vhsOut.png');
    }
    .games {
        background: url('./television.png');
    }
    .games:hover {
        background: url('./televisionOut.png');
    }
    img {
        width: 270px;
        height: 270px;
    }
    
    iframe {
        width: 1280px;
        height: 720px;
    }
    	
	h1 {
	    font-family: 'Biryani', sans-serif;
		font-size: 300%;
	}

	h2 {
		font-family: Arial;
		font-size: 100%;
	}
	h3 {
		font-family: Arial;
		font-size: 80%;
	}
    
}

@media only screen and (max-width: 1080px) {

    table{
        width:100%;
    }
    
    td{
        display:block;
        width:100%;
    }
    
    tr{
        display:block;
        margin-bottom:20px;
    }
    
    tr tr{
        margin-bottom:0;
    }

    img {
        width: 500px;
        height: 500px;
    }
    
    iframe {
        width: 640px;
        height: 360px;
    }
	
	h1 {
		font-family: 'Biryani', sans-serif;
		font-size: 600%;
	}

	h2 {
		font-family: Arial;
		font-size: 200%;
	}
	h3 {
		font-family: Arial;
		font-size: 160%;
	}
	.button {
	    width: 90%;
	    height: 100px;
		background-color: #ab4c61;
		border: none;
		color: white;
        text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 40px;
		transition-duration: 0.4s;
		border-radius: 8px;
    }
    .button:hover{
		background-color: #c4697c;
    }

}