@media only screen and (min-width: 1920px) {
/* plaats hier de css code voor breedbeeld pc/tv */

}

@media only screen and (max-width: 1024px) { 
/* plaats hier de css code voor tablets in landscape mode */
body, html
{
margin:0;
font-family:Tahoma, sans-serif;
height:100%;
}

h1, h2
{
font-family: 'Carter One', cursive;
color:white;
}

a
{
text-decoration:none;
}

p
{
color:white;
margin-left:2%;
}

#main
{
width:92%;
height:88%;
margin-left:auto;
margin-right:auto;
margin-top:2%;
margin-bottom:2%;
background-image: url("Swingin Groningen-A.jpg");
background-size:cover;
border:8px double black;
}

#title
{
color:#5730BA;
font-size:4em;
margin-left:2%;
text-shadow: 4px 4px #969696;
}

#enterbutton
{
width:20%;
height:14%;
margin-left:2%;
background-color:#969696;
text-align:center;
border-radius: 100%;
border:1px solid black;
}

#enterbutton:hover
{
background-color:#ABABAB;
}

#entertekst
{
display: inline-block;
vertical-align: middle;
color:black;
font-size:x-large;
}

#marginleft
{
margin-left:2%;
}

#footer
{
width:92%;
text-align:right;
margin-bottom:2px;
}

#footer a
{
font-style:italic;
color:black;
}
}

@media only screen and (max-width: 960px) { 
/* plaats hier de css code voor tablets in portrait mode */
body, html
{
margin:0;
font-family:Tahoma, sans-serif;
height:100%;
}

h1, h2
{
font-family: 'Carter One', cursive;
color:white;
}

a
{
text-decoration:none;
}

p
{
color:white;
margin-left:2%;
}

#main
{
width:92%;
height:92%;
margin-left:auto;
margin-right:auto;
margin-top:2%;
margin-bottom:2%;
background-image: url("Swingin Groningen-A.jpg");
background-size:cover;
border:8px double black;
}

#title
{
color:#5730BA;
font-size:4em;
margin-left:2%;
text-shadow: 4px 4px #969696;
}

#enterbutton
{
width:20%;
height:10%;
margin-left:2%;
background-color:#969696;
text-align:center;
border-radius: 100%;
border:1px solid black;
}

#enterbutton:hover
{
background-color:#ABABAB;
}

#entertekst
{
display: inline-block;
vertical-align: middle;
color:black;
font-size:x-large;
}

#marginleft
{
margin-left:2%;
}

#footer
{
width:92%;
text-align:right;
margin-bottom:2px;
}

#footer a
{
font-style:italic;
color:black;
}
}

@media only screen and (max-width: 767px) { 
/* plaats hier de css code voor smartphones in landscape mode */
body, html
{
margin:0;
font-family:Tahoma, sans-serif;
height:100%;
font-size:small;
}

h1, h2
{
font-family: 'Carter One', cursive;
color:white;
font-size:medium;
}

a
{
text-decoration:none;
}

p
{
color:white;
margin-left:1%;
}

#main
{
width:92%;
height:85%;
margin-left:auto;
margin-right:auto;
margin-top:2%;
margin-bottom:2%;
background-image: url("Swingin Groningen-A.jpg");
background-size:cover;
border:1px solid black;
}

#title
{
color:#5730BA;
font-size:2em;
margin-left:1%;
text-shadow: 4px 4px #969696;
}

#enterbutton
{
width:25%;
height:20%;
margin-left:1%;
background-color:#969696;
text-align:center;
border-radius: 100%;
border:1px solid black;
}

#enterbutton:hover
{
background-color:#ABABAB;
}

#entertekst
{
display: inline-block;
vertical-align: middle;
color:black;
font-size:medium;
}

#marginleft
{
margin-left:1%;
}

#footer
{
width:92%;
text-align:right;
margin-bottom:4px;
}

#footer a
{
font-style:italic;
color:black;
}
}

@media only screen and (max-width: 479px) {
/* plaats hier de css code voor smartphones in portrait mode */
body, html
{
margin:0;
font-family:Tahoma, sans-serif;
height:100%;
font-size:small;
}

h1, h2
{
font-family: 'Carter One', cursive;
color:white;
font-size:medium;
}

a
{
text-decoration:none;
}

p
{
color:white;
margin-left:1%;
}

#main
{
height:92%;
background-image: url("Swingin Groningen-A.jpg");
background-size:cover;
}

#title
{
color:#5730BA;
font-size:2em;
margin-left:1%;
text-shadow:4px 4px #969696;
}

#enterbutton
{
width:25%;
height:16%;
margin-left:1%;
background-color:#969696;
text-align:center;
border-radius:100%;
border:1px solid black;
}

#enterbutton:hover
{
background-color:#ABABAB;
}

#entertekst
{
display: inline-block;
vertical-align: middle;
color:black;
font-size:medium;
}

#marginleft
{
margin-left:1%;
}

#footer
{
text-align:right;
margin-bottom:2px;
}

#footer a
{
font-style:italic;
color:black;
}
}