body {
margin : 0 2px;
background-size : cover;
font-family : Arial, Helvetica, sans-serif;
font-size : 18px;
line-height : 1.42857143;
color : #333;
}
h1,h2 {
color : rgb(6, 90, 205);
text-align : center;
font-weight : 500;
line-height : 1.1;
}
main p {
text-align : justify;
padding-left : 7%;
padding-right : 7%;
color : rgb(0, 51, 128);
}
footer p {
text-align : center;
}
article, footer, header, main, section {
display : block;
}
audio, canvas {
display : inline-block;
vertical-align : baseline;
}
audio:not([controls]) {
display : none;
height : 0;
}
a {
background-color : transparent;
}
a:active, a:hover {
outline : 0;
}

img {
border : 0;
}
button, input {
margin : 0;
font : inherit;
color : inherit;
}
button {
overflow : visible;
}
button {
text-transform : none;
}
button, input[type="submit"] {
cursor : pointer;
}
button::-moz-focus-inner, input::-moz-focus-inner {
padding : 0;
border : 0;
}
input {
line-height : normal;
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
height : auto;
}
@media print {
*, :after, :before {
color : #000 !important ;
text-shadow : none !important ;
background : 0 0 !important ;
box-shadow : none !important ;
}
a, a:visited {
text-decoration : underline;
}
a[href]:after {
content : " (" attr(href) ")";
}
img {
page-break-inside : avoid;
}
img {
max-width : 100% !important ;
}
h2, h3, p {
orphans : 3;
widows : 3;
}
h2, h3 {
page-break-after : avoid;
}
}
@font-face {
font-family : 'Glyphicons Halflings';
src : url(../fonts/glyphicons-halflings-regular.eot);
src : url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'), url(../fonts/glyphicons-halflings-regular.woff) format('woff'), url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'), url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg');
}
* {
box-sizing : border-box;
}
:after, :before {
box-sizing : border-box;
}

button, input {
font-family : inherit;
font-size : inherit;
line-height : inherit;
}
a {
color : #337ab7;
text-decoration : none;
}
a:focus, a:hover {
color : #23527c;
text-decoration : underline;
}
a:focus {
outline-offset : -2px;
}
img {
vertical-align : middle;
}

.container {
padding-right : 15px;
padding-left : 15px;
margin-right : auto;
margin-left : auto;
}
@media (min-width: 768px) {
.container {
width : 750px;
}
}
@media (min-width: 992px) {
.container {
width : 970px;
}
}
@media (min-width: 1200px) {
.container {
width : 1170px;
}
}
label {
display : inline-block;
max-width : 100%;
margin-bottom : 5px;
font-weight : 700;
}
.container:after, .container:before {
display : table;
content : " ";
}
.container:after {
clear : both;
}

article, footer, header, main {
display : block;
}
a {
background-color : transparent;
}
img {
border : 0;
}
button, input {
margin : 0;
font : inherit;
color : inherit;
}
button {
text-transform : none;
}
* {
box-sizing : border-box;
}
:after, :before {
box-sizing : border-box;
}


button, input {
font-family : inherit;
font-size : inherit;
line-height : inherit;
}
a {
color : #337ab7;
text-decoration : none;
}
img {
vertical-align : middle;
}

.container {
padding-right : 15px;
padding-left : 15px;
margin-right : auto;
margin-left : auto;
}
.container:after, .container:before {
display : table;
content : " ";
}
.container:after {
clear : both;
}


.bor {
border : black solid 1px;
}
.home {
background-color : rgb(110, 207, 173);
}
.code {
background-color : rgb(227, 227, 227);
}
.cms {
background-color : rgb(255, 242, 185);
}
.site {
background-color : rgb(249, 252, 187);
}
.apps {
background-color : rgb(217, 252, 194);
}
.appsact {
background-color : rgb(217, 252, 194);
border-width : 1px;
border-style : solid;
border-color : black black rgb(217, 252, 194) black;
}
.foto {
background-color : rgb(207, 252, 236);
}
.print {
background-color : rgb(178, 228, 255);
}
.dat {
background-color : rgb(176, 200, 227);
}
.pub {
background-color : rgb(208, 200, 228);
}
.info {
background-color : rgb(240, 200, 240);
}
@media (max-width: 768px) {
.container {
padding-right : 0;
padding-left : 0;
margin-right : 0;
margin-left : 0;
}
.container > div {
flex-basis : 70px;
}

article {
margin : 5px;
}
}
@media (min-width: 768px) {
.container {
width : 750px;
padding-right : 15px;
padding-left : 15px;
margin-right : auto;
margin-left : auto;
}
article {
margin : 20px;
}
.container > div {
flex-basis : 100px;
}
}
@media (min-width: 992px) {
.container {
width : 970px;
padding-right : 15px;
padding-left : 15px;
margin-right : auto;
margin-left : auto;
}
article {
margin : 40px;
}
.container > div {
flex-basis : 100px;
}
}
@media (min-width: 1200px) {
.container {
width : 1170px;
padding-right : 15px;
padding-left : 15px;
margin-right : auto;
margin-left : auto;
}
article {
margin : 80px;
}
.container > div {
flex-basis : 100px;
}
}
.container {
padding : 0;
margin-left : auto;
margin-right : auto;
display : flex;
flex-wrap : wrap;
justify-content : center;
align-items : stretch;
}
.container > div {
color : #333;
text-align : center;
flex-grow : 1;
cursor : pointer;
border-radius : 4px 4px 0 0;
text-align : center;
line-height : 40px;
}
.container > div > a {
text-decoration : none;
color : black;
font-size : 14px;
}
.container > div:focus, .container > div:hover {
filter : saturate(140%);
filter : brightness(110%);
}
.container > div > a:focus, .container > div > a:hover {
text-decoration : none;
color : black;
}


* {
box-sizing : border-box;
}
canvas {
background-color : white;
margin : auto;
}
.grid-container > div {
text-align : center;
}
@media only screen and (max-width: 700px) {
.grid-container {
display : grid;
grid-template-columns : 100vw;
gap : 0;
padding : 0;
}
.api1 {
grid-area : 1 / 1 / 2 / 2;
text-align : center;
}
.api2 {
grid-area : 2 / 1 / 3 / 2;
text-align : center;
}
.game {
grid-area : 3 / 1 / 4 / 2;
transform : scale(0.5,0.5);
transform-origin : 10% 10%;
}
.multiply {
grid-area : 4 / 1 / 5 / 2;
}
.igbo {
grid-area : 5 / 1 / 6 / 2;
}
#move {
text-align : center;
width : 100vw;
margin : auto;
}
}
@media only screen and (min-width: 700px) {
.grid-container {
display : grid;
grid-template-columns : auto;
gap : 0;
padding : 20px 0;
}
.api1 {
grid-area : 1 / 1 / 2 / 2;
text-align : center;
}
.api2 {
grid-area : 2 / 1 / 3 / 2;
text-align : center;
}
.game {
grid-area : 3 / 1 / 4 / 2;
transform : scale(1,1);
transform-origin : 10% 10%;
}
.multiply {
grid-area : 4 / 1 / 5 / 2;
}
.igbo {
grid-area : 5 / 1 / 6 / 2;
}
#move {
text-align : center;
width : 100vw;
margin : auto;
}
}
@media only screen and (min-width: 1100px) {
.grid-container {
display : grid;
grid-template-columns : auto auto auto auto;
gap : 30px;
padding : 20px 0;
}
.api1 {
grid-area : 1 / 1 / 2 / 3;
text-align : center;
}
.api2 {
grid-area : 1 / 3 / 2 / 5;
text-align : center;
}
.game {
grid-area : 2 / 1 / 3 / 4;
transform : scale(1,1);
}
.multiply {
grid-area : 2 / 4 / 3 / 5;
}
.igbo {
grid-area : 3 / 1 / 4 / 5;
}
#move {
text-align : center;
width : 620px;
margin : auto;
}
}
#goed {
color : green;
font-weight : bold;
}
#redelijk {
color : hsl(85 100% 19%);
font-weight : bold;
}
#matig {
color : #ae8b0c;
font-weight : bold;
}
#slecht {
color : #ff4500;
font-weight : bold;
}
#heelslecht {
color : red;
font-weight : bold;
}
.flip-card {
background-color : transparent;
width : 300px;
height : 240px;
perspective : 1000px;
}
.flip-card-inner {
position : relative;
width : 100%;
height : 100%;
text-align : center;
vertical-align : middle;
transition : transform 0.6s;
transform-style : preserve-3d;
box-shadow : 0 4px 8px 0 rgb(0, 0, 0, 0.2);
}
.flip-card:hover .flip-card-inner {
transform : rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position : absolute;
width : 100%;
height : 100%;
backface-visibility : hidden;
}
.flip-card-front {
background-color : #92a8d1;
color : black;
}
.flip-card-back {
background-color : #5ae2af;
padding : 40px 0;
color : white;
transform : rotateY(180deg);
}
#word {
font-size : 50px;
text-align : center;
}
button, form > input {
box-shadow : 5px 5px rgb(173, 201, 155);
}