p.frontpage {
    /* frontpage subclass, to add a right margin that accommodates
     * the picture there. Make sure the size corresponds to the pic. */
    margin-right: 300px;
}

.dot {
  height: 10px;
  width: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}


.frontpage-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	text-align: center;
}

div.fp-row {
	display: flex;
}

div.fp-column-left {
	flex: 70%;	
}

div.fp-column-right {
	flex: 30%;
}



/* When things get tight */
@media screen and (max-width: 1300px) {

	.dot {
		margin-top: 4px;
		margin-bottom: 4px;
	}

	/* Make links vertical */
	.frontpage-links {
		display: flex;
		justify-content: center;
		flex: 100%;
		flex-direction: column;
		align-items: center;
		height: auto;
		width: auto;
	}

    /* vanish images that don't fit and don't need to fit */
    img.disappearing {
        display: none;
    }

	/* Make columns disappear */
	div.fp-column-left {
		flex: 100%;	
	}

	div.fp-column-right {
		flex: 0%;
	}

    /* Since the image now vanishes, we can use the full margin for the paragraphs */
    p.frontpage {
    /* frontpage subclass, to add a right margin that accommodates
     * the picture there. Make sure the size corresponds to the pic. */
        margin-right: var(--default-margin-right);
    }
}


/* For mobile screens (proxy detection through toughscreen pointer) */
@media (pointer: coarse) {

	.dot {
		margin-top: 4px;
		margin-bottom: 4px;
	}

	/* Make links vertical */
	.frontpage-links {
		display: flex;
		justify-content: center;
		flex: 100%;
		flex-direction: column;
		align-items: center;
		height: auto;
		width: auto;
	}

    /* vanish images that don't fit and don't need to fit */
    img.disappearing {
        display: none;
    }

	/* Make columns disappear */
	div.fp-column-left {
		flex: 100%;	
	}

	div.fp-column-right {
		flex: 0%;
	}

    /* Since the image now vanishes, we can use the full margin for the paragraphs */
    p.frontpage {
    /* frontpage subclass, to add a right margin that accommodates
     * the picture there. Make sure the size corresponds to the pic. */
        margin-right: var(--default-margin-right);
    }
}