body {
    /* background-color: rgb(254,255,254); */
}

#all {    
    margin: auto;
    /* font-size: 3em */
}

/* @media only screen and (max-width: 599.9px) {
    #all {
	font-size: 3em;
    }
} */

@media screen and (min-width: 1200px) {
    #all {
	font-size: 16px;
    }
}

@media screen and (max-width: 1199.9px) and (min-width: 1100px) {
    #all {
	font-size: 24px;
    }
}

@media screen and (max-width: 1099.9px) and (min-width: 1000px) {
    #all {
	font-size: 36px;
    }
}


@media screen and (max-width: 999.9px) {
    #all {
	font-size: 48px;
    }
}

/* @media screen and (max-width: 899.9px) and (min-width: 700px) {
    #all {
	font-size: 3.25em;
    }
}

@media screen and (max-width: 699.9px) {
    #all {
	font-size: 3.5em;
    }
} */

/* @media only screen and (min-width: 600px) and (max-width: 999.9px) {
    #all {
	font-size: 2em;
    }
} */

@media only screen and (max-width: 1199.9px) { /* small screen */
    #all {
	/* font-size: 2em; */
	width: 90%;
	margin: auto;
    }
    
    #wrapper {
        display: flex;
        flex-direction: column;
	align-items: center;
	justify-content: center;
    }
    #name {
	order: 1;
	margin: auto;
    }
    #picture {
	order: 2;
	width: 60%;
	max-width: 1537px;
	margin: auto;
    }

    #responsive {
	display: block;
	margin: auto;
	width: 100%;
	height: auto;
    }
}

@media only screen and (min-width: 1200px) { /* big screen */
    #all {
	width: 65%;
    }

    #responsive {
	margin-top: -2em;
	padding-left: 25px;
	float: right;
	display: inline-block;
	width: 30%;
	height: auto;
    }
}

a {
    color: rgb(6, 112, 77);
    text-decoration: none;
}

a:hover {
    color: rgb(220, 150, 50);
}

a:active {
    color: rgb(250, 170, 50);
}

a:focus {
    color: rgb(220, 150, 50);
}

h1 {
    color: rgb(0, 60, 40); /* previously (6, 80, 50) */
}

h2 {
    color: rgb(0, 60, 40);
}

ul {
    list-style: none; /* no default bullets */
}

ul li::before {
    content: "\25AA"; /* square bullet */
    color: rgb(6, 80, 50);
    display: inline-block; /* this and next three for spacing */
    width: 1em;
    margin-left: -1em;
}