Basic Files

css/main.css

@@ -0,0 +1,120 @@
+@import url('https://fonts.googleapis.com/css?family=Krub:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i|VT323&subset=latin-ext,thai,vietnamese');
+body {
+    font-family: 'Krub', sans-serif;
+    margin: 1vh 1vw 1vh 1vw;
+}
+input {
+    border: none;
+    border-bottom: 2px solid red;
+    font-size: 5vh;
+}
+input:focus {
+    background-color: lightblue;
+}
+input[type=submit] {
+    border: none;
+    border-bottom: 2px hidden blue;
+    background-color: none;
+}
+input[type=submit]:focus {
+    background-color: none;
+}
+textarea {
+    width: 100%;
+    height: 150px;
+    padding: 12px 20px;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    background-color: #f8f8f8;
+    resize: none;
+}
+pre {
+    font-family: 'VT323', monospace;
+    font-size: 2vw;
+}
+/* The container */
+.container {
+    display: block;
+    position: relative;
+    padding-left: 35px;
+    margin-bottom: 12px;
+    cursor: pointer;
+    font-size: 22px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+/* Hide the browser's default radio button */
+.container input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+}
+
+/* Create a custom radio button */
+.checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 25px;
+    width: 25px;
+    background-color: #eee;
+    border-radius: 50%;
+}
+
+/* On mouse-over, add a grey background color */
+.container:hover input ~ .checkmark {
+    background-color: #ccc;
+}
+
+/* When the radio button is checked, add a blue background */
+.container input:checked ~ .checkmark {
+    background-color: #2196F3;
+}
+
+/* Create the indicator (the dot/circle - hidden when not checked) */
+.checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+}
+
+/* Show the indicator (dot/circle) when checked */
+.container input:checked ~ .checkmark:after {
+    display: block;
+}
+
+/* Style the indicator (dot/circle) */
+.container .checkmark:after {
+ 	top: 9px;
+	left: 9px;
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: white;
+}
+#voorbeeld {
+    font-size: 16px;
+    color: black;
+    background-color: white;
+    font-family: "Times New Roman", Times, serif;
+    margin-bottom: 10vh;
+}
+
+#voorbeeld pre {
+    display: block;
+    font-family: monospace;
+    white-space: pre;
+    margin: 1em 0;
+    font-size: 16px;
+}
+#voorbeeld input {
+    border: 0.1em solid rgb(201, 200, 200);
+    font-size: 16px;
+}
+#voorbeeld input:focus {
+    background-color: white;
+}