@charset "utf-8";

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
box-sizing: border-box;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
margin: 0;
background-color: rgb(0, 234, 255);
}

.wrapper {
/* width: 100%; */
padding: 0 15px;
border-radius: 15px;
background-color: rgb(143, 165, 140);
margin: 0 auto;
flex-wrap: wrap;
display: grid;
min-height: 100%;
}

h1 {
text-align: center;
text-transform: uppercase;
}

header {
color: var(--color-red-you-proud);
background-color: blue;
}
.main-page-nav{
background-color: rgb(223, 193, 71);
}
ul {
display: flex;
list-style-type: none;
margin: 0 auto;
text-align: center;
}

header>h1 {
font-family: 'Courier New', Courier, monospace;
text-align: center;
font-weight: bold;
line-height: 2.0em;
text-transform: uppercase;
border-radius: 20px;
}

header>p {
font-family: Georgia, 'Times New Roman', Times, serif;
background-color: rgb(255, 255, 255);
text-align: center;
font-weight: normal;
line-height: 1.75em;
margin-top: -1.25em;
}

.main-page-heading {
padding-bottom: 25px;
line-height: normal;
}

a {
font-family: Verdana, sans-serif;
text-decoration: none;
color: var(--color-eagle-blue);
}

a:visited {
text-decoration: none;
color: var(--color-eagle-blue);
}

a:hover {
text-decoration: underline;
color: var(--color-eagle-blue);
}

a:focus {
text-decoration: underline;
color: var(--color-eagle-blue);
}

a:active {
text-decoration: underline;
color: var(--color-broadway-blue);
}

.main-page-nav {
/* margin-top: -25px; */
}

nav {
background-color: white;
margin-top: 0;
}

nav>ul {
list-style-type: none;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: center;
justify-self: center;
gap: 2em;
}

nav>ul>li {
text-align: center;
line-height: 1.5em;
}

main {
/* display: flex; */
/* flex-direction: column; */
/* flex-wrap: nowrap; */
/* justify-content: flex-start; */
/* align-content: center; */
/* justify-self: center; */
/* gap: 5em; */
/* width: 100%; */
}

a.review-link {
width: 100%;
}

a.review-link>.review>.review-content>p,
a.review-link>.review>.review-content>h2 {
color: black;
text-decoration: none;
}

a.review-link:link>.review>.review-content>p,
a.review-link:link>.review>.review-content>h2 {
color: black;
text-decoration: none;
}

a.review-link:visited>.review>.review-content>p,
a.review-link:visited>.review>.review-content>h2 {
color: black;
text-decoration: none;
}

a.review-link:hover>.review>.review-content>p,
a.review-link:hover>.review>.review-content>h2 {
color: black;
text-decoration: none;
}

a.review-link:focus>.review>.review-content>p,
a.review-link:focus>.review>.review-content>h2 {
color: black;
text-decoration: none;
}

a.review-link:active>.review>.review-content>p,
a.review-link:active>.review>.review-content>h2 {
color: black;
text-decoration: none;
}

.review {
background-color: white;
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* justify-content: space-between; */
gap: 25px;
/* width: 100%; */
}

.review-content {
background-color: white;
/* text-align: center; */
/* display: block; */
flex: 0 1 100%;
}

.review-content>h2 {
font-family: Cambria, serif;
padding-top: 25px;
padding-right: 25px;
color: black;
}

.review-content>p {
font-family: Verdana, sans-serif;
padding-bottom: 25px;
padding-right: 25px;
color: black;
}

.review-content>p.review-content-desc {
line-height: 1.25em;
font-family: Verdana, sans-serif;
font-weight: normal;
}

.review-content>p.review-content-desc>code {
font-family: 'Cascadia Code', 'Cascadia Mono', Courier, monospace;
font-weight: normal;
background-color: black;
color: var(--color-orange-you-proud);
padding: 0.25em;
margin: 0.125em;
border-radius: 0.25em;
}

.review-content>p.review-content-more {
font-family: Verdana, sans-serif;
font-weight: bold;
}

.review-featured-image {
/* padding-top: 25px; */
/* padding-bottom: 25px; */
/* background-color: white; */
/* flex-wrap: wrap; */
margin: 0;
flex: 0 1 100%;
}

.review-featured-image > img {
padding: 25px;
background-color: lightgreen;
width: 100%;
}

.review-featured-image>figcaption {
font-family: Verdana, sans-serif;
font-weight: normal;
}

.review-summary {
background-color: white;
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 25px;
width: 100%;
}

.review-content-summary {
padding-left: 25px;
}

footer>p {
font-family: Verdana, sans-serif;
text-align: center;
font-weight: bold;
line-height: 1.5em;
}

footer>p>a {
text-decoration: underline;
color: rgb(0, 0, 0);
}

footer>p>a:link {
text-decoration: underline;
color: rgb(0, 0, 0);
}

footer>p>a:visited {
text-decoration: underline;
color: rgb(0, 0, 0);
}

footer>p>a:hover {
text-decoration: underline;
color: rgb(0, 0, 0);
}

footer>p>a:focus {
text-decoration: underline;
color: rgb(0, 0, 0);
}

footer>p>a:active {
text-decoration: underline;
color: var(--color-orange-you-proud);
}
@keyframes fadeInSlideInLeft {
	from {
	    opacity: 0;
	    transform: translate3d(-100%, 0, 0);
	}
                    
	40% {
	    transform: translate3d(0, 0, 0);
	}
                    
	60% {
	    transform: translate3d(-20%, 0, 0);
	}
                    
	to {
	    opacity: 1;
	    transform: translate3d(0, 0, 0);
	}
                    }
                    
                    .review h2 {
	margin: calc(var(--gap) + 2px) 0 calc((var(--gap) * 0.5) * -1) 0;
	position: relative;
	overflow: hidden;
                    }
                    
                    [class*="stars"]:before {
	position: relative;
	z-index: 1;
	display: block;
	float: left;
	animation-name: fadeInSlideInLeft;
	animation-duration: 2000ms;
                    }
                    
                    [class*="stars"]:after {
	content: "✪✪✪✪✪";
	color: rgba(167, 167, 167, 0.4);
	position: absolute;
	left: 0;
	top: 0;
                    }
                    
                    .stars-5:before {
	content: "✪✪✪✪✪";
	padding-right: 10px;
                    }
                    
                    .stars-4:before {
	content: "✪✪✪✪";
	padding-right: 32px;
                    }
                    
                    .stars-3:before {
	content: "✪✪✪";
	padding-right: 54px;
                    }
                    
                    .stars-2:before {
	content: "✪✪";
	padding-right: 76px;
                    }
                    
                    .stars-1:before {
	content: "💩";
	padding-right: 98px;
                    }
                    
                    .stars-1:after {
	content: "💩💩💩💩";
	color: rgba(167, 167, 167, 0.1);
                    } 
@media screen and (min-width: 768px) {
.wrapper {
/* width: 70%; */
max-width: 1250px;
}

nav>ul {
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: flex-start;
justify-self: center;
gap: 2em;
}

main {
/* display: flex; */
/* flex-direction: row; */
/* flex-wrap: wrap; */
/* justify-content: space-between; */
/* align-content: flex-start; */
/* justify-self: center; */
/* gap: 5em; */
/* width: 100%; */
}

.review-content {
flex: 0 1 calc(50% - 12.5px);
}

.review-featured-image {
flex: 0 1 calc(50% - 12.5px);
}
}


~ Robert

Robert Buchholz
INSTRUCTOR WEB DEVELOPMENT

BT249J | 920-498-7146
buchholz.bitweb1.nwtc.edu
buchholz.bitweb1.nwtc.edu/schedule
Teams - Meeting Room

Northeast Wisconsin Technical College
2740 W. Mason Street – BT249J
Green Bay, WI 54307 


email-logos.png