/*
File Name: Style.css
Website: Blair Forsberg's Portfolio
Date: April 16, 2019
Author: Blair Forsberg
*/

/* icon: https://www.w3schools.com/icons/icons_reference.asp */
/* pie chart: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_pie_chart */

/* 
----Main Colors Palette---- 
	#284489  New Blue
	#0000b8  Signature Blue
	#00008b  Signature Dark Blue
	#ffc000  Signature Yellow
	#f7b900  Signture Mid Yellow
	#d29e00  Signature Dark Yellow
	#04a88f  PDX Teal
	
------Postcard Colors------
	Paper #FFF8ED
	Red	  #F16051
	Blue  #394078
	
----PDX Colors Palette---- 	
	#04a88f Teal
	#aa62a2 Purple 
	#de393d Red 
	#56b4da Light Blue 
	#28446c Dark Blue 
	
----Other Colors Palette---- 
	#901cd8  Royal Purple
	#00b3d3  Tinted Light Blue
	
----Icons---- 
<i class='fas fa-wifi '></i>

fas fa-map-marked-alt = Location on Map Icon
fas fa-map-marker-alt = Location Icon
fas fa-street-view    = Street View Icon
fas fa-umbrella       = Umbrella Icon
fas fa-thumbtack      = Thumb Tack Icon
fas fa-power-off      = Power Icon
fas fa-code           = HTML Icon
far fa-file-code      = HTML File Icon
fas fa-wifi           = Wifi Icon

fas fa-exclamation-triangle = Caution Icon
	
*/
@font-face {
	  font-family: titlefont;
	  src: url(../fonts/Aquatico-Regular.otf);
	}

*, #logo-info, .mobile-nav-h2 {
	font-family: Arial, Helvetica, sans-serif;
}
	
h1 span, h2, h2 span, .title, .logo-info-questione {
	  font-family: titlefont;
}
		
.h-nav ul li a {
	  font-family: titlefont;
}

a:hover {
	color: #04a88f; /* Teal */
}

body {
	background-image: url("../images/LogoSquare.svg");
	background-repeat: repeat;
	height: 200px;
	overflow-x: hidden; /* removes horizontal scroll bar */
}

.wordBreak {
	word-wrap: break-word;
}

/* Scroll Bar width */
::-webkit-scrollbar {
	width: 17px;
}

/* Scroll Handle */
::-webkit-scrollbar-thumb{
	background: #ffc000;
	border-radius: 5px;
}

/* Scroll Track */
::-webkit-scrollbar-track {
	background: #00008b;
}

/* Scroll Arrows */
::-webkit-scrollbar-button {
	background: #00008b;
	height: 25px;
	border-style: solid;
}

/* Scroll Down Arrow */
::-webkit-scrollbar-button:end:increment:hover {
    background: #d29e00;
}
/* Scroll Up Arrow*/
::-webkit-scrollbar-button:start:decrement:hover {
    background: #d29e00;
}

.clear {
	clear: left;
}

h1 {
	padding: 3%;
	color: #284489;
}

h1 span {
	padding: 1% 1% 0 1%;
}

h1, h1 span {
	color: #ffc000;
	text-align: center;
	margin-top: 1%;
}

h2, h2 span {
	color: #ffc000;
	text-align: center;
	margin-top: 1%;
}

.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

.navbar {
	text-align: center;
}

nav {
	background-color: #0000a1;
	width: 100%;
	padding: .15% 0;
}

nav ul {
	padding: 0;
	vertical-align: top;
}

nav ul li {
	list-style: none;
	font-weight: bold;
}

nav ul li a {
	color: #ffc000;   /*Signature Yellow */
	text-decoration: none;
	font-weight: bold;
	width: 100%;
}
nav ul li a:hover {
	color: #04a88f;  /* PDX Teal */
}

li a {
	font-size: 28px;
}

#current {
	text-decoration: underline;
}

#nav-section {
	padding: 0;
	vertical-align: top;
}

#nav-section ul li {
	line-height: 60px;
	font-size: 24px;
}

#nav-section ul li a {
	font-size: 24px;
	padding: 15px 0px 15px 15px;
} 

#nav-image {
	visibility: hidden;
}

.outer-nav-border-home {
	border: 2.5px solid #00008b;
}
			
.nav-border-home {
	border-left: 20px solid #f7b900;
}

.nav-border:hover {
	border-left: 5px solid #d29e00;
	border-right: 5px solid #d29e00;
	background-color: #0505b0;
}

.side-icon {
	color:#ffc000;
	background-color:#284489;
}

#selfie-section {
	padding: 0;
}

#profile-picture {
	position: sticky;
	top: 80px;
	padding: 0;
}

main {
	padding-bottom: 20px;
}

.modal-section {
	padding-bottom: 1.5em;
}

.index-p {
	background-color: white;
	border-radius: 10px;
	text-align: left;
	padding: 2%;
	font-size: 17px;
	text-indent: 2em;
}

.index-h2 {
	color: #ffc000; /* Signature Yellow */
	padding-top: 1%;
}

/*----------Modal Classes----------*/
.remodal {
	background-color: #00008b;  /* Signature Dark Blue */
	color: #ffc000;  /* Signature Yellow */
}

.remodal h1 {
	color: #ffc000;  /* Signature Yellow */
}

.modal_format {
	float: right;
	text-align: left;
	background-color: white;
	color: black;
}

.modal_format h2 {
	text-align: center;
}

a.remodal-confirm {
	color: #ffc000; /* Signature Yellow */
	background-color: #00008b;  /* Signature Dark Blue */
	border: 2px solid #ffc000; /* Signature Yellow */
	font-weight: bold;
	padding: 2%;
	margin-top: 3%;
}

.remodal-confirm {
	clear: both;
}

.remodal-confirm:hover,
.remodal-confirm:focus {
  background: #04a88f;  /* PDX Teal */
  color: black;
}

.remodal-close {
	color: #ffc000;  /* Signature Yellow */
}

.remodal-close:hover,
.remodal-close:focus {
  color: #d29e00;  /* Signature Dark Yellow */
}

.modalText {/* Modal paragraph class */
	line-height: 1.4;
	text-indent: 2em;
}

.modalText li, .modalText ul {
	text-indent: 0;
	padding-bottom: .5em;
}

.modalText li:last-of-type {
	padding-bottom: 0;
}

#italianText {
	line-height: 1.35;
}
/* END Modal Classes*/


/*-----Scrollbar Commands-----*/
.scroll-Section {
	overflow: auto;
}

#scroll-ecems {
	height: 457px;
}

#scroll-temp {
	height: 378px;
}

#scroll-currency {
	height: 455px;
}

#scroll-quiz {
	height: 494px;
}

#scroll-grade {
	height: 445px;
}

#scroll-ClassInfo {
	height: 440px;
}

#scroll-writing {
	height: 460px;
}

/* width */
.scroll-Section::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.scroll-Section::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.scroll-Section::-webkit-scrollbar-thumb {
  background: #ffc000; /* Signature Yellow */
}

/* Handle on hover */
.scroll-Section::-webkit-scrollbar-thumb:hover {
   background: #d29e00; /* Signature Dark Yellow */
}
/* END Scrollbar Commands */

/* Panel commands */
.panel {
	padding: 2% 0;
	border-radius: 25px;
	text-align: center;
	padding-bottom: 4%;
}

.img-panel {
	padding-top: 2%;
	border-radius: 13%;
}

.video-section {
	padding-bottom: 2%;
}

.vid-panel {
	padding-top: 2%;
	display: block;
	margin: auto;
}

#waterbender {
	height: 2000px;
}

.blue {
	background-color: #284489;  /* PDX2 Dark Blue */
	border: 2px solid #00008b; /* Signture Dark Blue */
}

.yellow {
	background-color: #f7b900; /* Signture Mid Yellow */
	border: 2px solid #f7b900; /* Signture Mid Yellow */
}
/* Tile commands */
.tile {
	background-color: #284489;  /* PDX2 Dark Blue */
	padding: 2% 2% 0 2%;
	border-radius: 25px;
	border: 2px solid #284489; /* Signture Dark Blue */
	text-align: center;
	padding-bottom: 2%;
}

.icon {
	background-color: #284489;  /* PDX2 Dark Blue */
	border-radius: 25px;
	font-size: 50px;
	vertical-align: middle;
	color: #ffc000;  /* Signature Yellow */
}

.img-tile {
	padding-top: 2%;
	border-radius: 0% 0% 13% 13%;
}

#contactbutton {
	background-color: #284489;  /* PDX2 Dark Blue */
	text-align: center;
	padding: 10px 0px;
	border: solid 4px #ffc000; /*yellow*/
	margin-bottom: 1%;
}

#contactbutton a {
	color: #ffc000; /*yellow*/
	font-size: 24px;
}

#contactbutton:hover {
	background-color: #0000b8; /* dark blue */
	text-align: center;
	padding: 10px 0px;
	border: solid 4px #ffc000; /*yellow*/
}