/*Love Letter Font*/

@font-face {
	font-family: 'LoveLetterTW';
	src: url('../fnt/LoveLetterTW.eot?#iefix') format('embedded-opentype'), 
	     url('../fnt/LoveLetterTW.woff') format('woff'), 
         url('../fnt/LoveLetterTW.woff2') format('woff2'),
	     url('../fnt/LoveLetterTW.ttf')  format('truetype'),
	     url('../fnt/LoveLetterTW.svg#LoveLetterTW') format('svg');	     
	}

/*Lucida Console Font*/

@font-face {
	font-family: 'LucidaConsole';
	src: url('../fnt/LucidaConsole.?#iefix') format('embedded-opentype'), 
	     url('../fnt/LucidaConsole.woff') format('woff'), 
         url('../fnt/LucidaConsole.woff2') format('woff2'),
	     url('../fnt/LucidaConsole.ttf')  format('truetype'),
	     url('../fnt/LucidaConsole.svg#LucidaConsole') format('svg');	     
	}

/*General*/

html {
    scroll-behavior:smooth; 
}

body {
    text-align: center;
    background-image: url("../img/cylinder.gif");
    background-color: black;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
    color: #FFF;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0px;
    font-weight: normal;
}

h1, h2, h3 {
    font-family: 'LoveLetterTW';
    color: rgb(212, 212, 212);
    text-shadow: 0px 0px 15px rgb(134, 134, 134);
    font-weight: normal;
}

h1 {
    font-size: 64px;
    margin: 0px;
    transition: 0.25s;
}

h1:hover {
    font-size: 68px;
    transition: 0.25s;
}

h2 {
    font-size: 52px;
    margin: 32px 0px;
}

h3 {
    font-size: 32px;
    color: rgb(255, 255, 255);
}

.no-margin { /*changes all margins to minimize dead space*/
    margin: 0px;
}

.no-bottom-margin { /*changes only bottom margins to minimize dead space*/
    margin-bottom: 0px;
}

p, li {
    font-family: 'LucidaConsole';
    font-size: 18px;
}

.li-br { /*br's are apparently not allowed within unordered lists... so here's a workaround*/
    margin-bottom: 1em;
}

a,a:visited {
    font-family: 'LoveLetterTW';
    color:rgb(0, 190, 165);
    text-shadow: 0px 0px 20px rgb(0, 190, 165);
    transition: 0.25s;
    text-decoration: none;
    font-size: 42px;
}

a:hover {
    color: rgb(0, 255, 222);
    text-shadow: 0px 0px 20px rgb(0, 255, 222);
    transition: 0.25s;
    text-decoration: none;
    font-size: 56px;
}

.link, .link:hover {
    font-family: 'LucidaConsole';
    font-size: 18px;
}

img {
    display: block;
}

@media screen and (max-width: 1079px) { /*Media query for mobile view*/

}

/*NAVIGATION BAR*/

nav { 
    display: flex;
    width: 100%;
    height: 192px;
    /*gradient at the top so the content doesn't overlap; three stops cause for black to stretch down just a bit more*/
    background-image: linear-gradient(rgb(0, 0, 0),rgb(0, 0, 0, 0.75),rgba(0, 0, 0, 0)); 
    position:fixed;
    top: 0px;
    z-index: 99; /*ensures that everything scrolls under navbar*/
    justify-content: space-between;
}


/*Navigation Buttons*/

#logo {
    color:rgb(212, 212, 212);
    text-shadow: 0px 0px 20px rgb(134, 134, 134);
}

#logo:hover {
    color:rgb(255, 255, 255);
    text-shadow: 0px 0px 20px rgb(255, 255, 255);
}

.logo-container { 
    display:flex;
    margin-left: 66px;
    height: 100%;
    flex-shrink: 0;
}

.nav-container {
    display:flex;
    margin-right: 66px;
    height: 100%;
    flex-shrink: 0;
}

.nav-item { /*Container for each button so the hover growth is centered*/
    display:flex;
    height:100%;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#btn-home {
    width: 205px;
}

#btn-works {
    width: 172px;
}

#btn-outcomes {
    width: 260px;
}

/*Shifting Animation*/

@keyframes shift {
    0% { transform: translateX(4px); }
    50% { transform: translateX(-4px); }
    100%{ transform: translateX(4px); } 
}

/*shift delays for different elements*/

.shift {
    animation: shift 6s ease-in-out 0s infinite;
}

.shift-1 {
    animation: shift 6s ease-in-out -4.8s infinite; 
}

.shift-2 {
    animation: shift 6s ease-in-out -3.6s infinite;
}

/*MAIN CONTENT*/

.content {
    display: flex; 
    flex-direction: column;
    align-items: center;
    /* background-color: rgba(228, 0, 216, 0.548); FOR TESTING */
    padding-top: 192px;
    min-height: 100vh;
    box-sizing: border-box;
}

#me {
    border-radius: 8px;
    box-shadow: 0px 0px 20px rgb(0, 43, 37);
}

#vertical-center {
    justify-content: center;
}

.panel {
    display:flex;
    flex-direction: column;
    align-items: center;
    width: 976px;
    flex-shrink: 0;
    border-radius: 32px;
    backdrop-filter: blur(9px);
    background-color: rgba(0, 61, 53, 0.247);
    box-shadow: 0px 0px 15px rgb(0, 61, 53, 0.247);
    margin: 0px 0px 64px;
    padding: 72px;
    box-sizing: border-box;
}

.work-preview { /*work previews images*/
    width: 812px;
    transition: 0.25s;
}

.work-preview:hover { /*hover on work previews images*/
    width: 832px;
    transition: 0.25s;
}

.work { /*keeps panel at static size to house the hover of the preview image, also keeps it vertically centered*/
    justify-content: center;
    height: 652px;
}

.skill { /*same thing as .work but for the learning outcomes*/
    justify-content: center;
    height: 216px;
}

/*scroll margin to ensure that the headers dont appear under the "navbar"*/

#outcomes, #about, #travelbud, #pizza, #revoir, #kadech {
    scroll-margin-top: 192px;
}

#end { /*for extra space at the end of works page*/
    margin-bottom: 57px;
}

.details-horizontal { /*container for horizontal content*/
    flex-direction: row;
    align-items: normal;
}

.details-vertical { /*container for vertical content*/
    flex-direction: column;
}

.panel-img { /*container for images*/
    width: 100%;
    min-height: 225px;
}

.panel-text { /*container for text*/
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.l-panel { /*Adds margin to the right for left panel*/
    margin-right: 16px;
}

.r-panel { /*Adds margin to the left for right panel*/
    margin-left: 16px;
}   

/*SLIDESHOW*/

.slideshow-small {
    width: 400px;
    height: 225px;
    overflow: hidden;
}

.slideshow-big {
    width: 832px;
    height: 468px;
    overflow: hidden;
}

.slides { /*sets width of slide container to 3 times the size of an image*/
    display: flex;
    width: 300%; 
}

.slide-container { /*slide image container*/
    transition: 0.5s ease;
}

.img-sel { /*image selector*/
    display: flex;
    margin: 24px 0px 0px;
}

.img-btn { /*selector buttons*/
    height: 20px;
    width: 20px;
    margin: 0px 4px;
    background-color:rgb(212, 212, 212);
    border-radius: 10px;
    transition: 0.25s;
}

.img-btn:hover{ /*changes color of button upon hover + cursor*/
    background-color:rgb(255, 255, 255);
    box-shadow: 0px 0px 20px rgb(255, 255, 255);
    transition: 0.25s;
    cursor: pointer;
}

.slide-img-small { /*sets image dimensions for small slideshow*/
    width: 400px;
    height: 225px;
}

.slide-img-big { /*sets image dimensions for big slideshow*/
    width: 832px;
    height: 468px;
}

input[type="radio"] { /*hides default radio buttons*/
    visibility: hidden;
    position: absolute;
}

/*LEARNING OUTCOME SLIDESHOWS*/

/*Future Oriented Organization Slideshow Buttons*/

#btn-foo-1:checked ~ .first { /*sets the image left margin to 0x the image width to pull to the left based on selected button*/
    margin-left:0px;
}

#btn-foo-2:checked ~ .first { /*sets the image left margin to 1x the image width to pull to the left based on selected button*/
    margin-left: -832px;
}

#btn-foo-3:checked ~ .first { /*sets the image left margin to 2x the image width to pull to the left based on selected button*/
    margin-left: -1664px;
}

/*Investigative Problem Solving Slideshow Buttons*/

#btn-ips-1:checked ~ .first { 
    margin-left:0px;
}

#btn-ips-2:checked ~ .first { 
    margin-left: -832px;
}

/*Personal Leadership Slideshow Buttons*/

#btn-pl-1:checked ~ .first { 
    margin-left:0px;
}

#btn-pl-2:checked ~ .first { 
    margin-left: -832px;
}

/*Targeted Interaction Slideshow Buttons*/

#btn-ti-1:checked ~ .first { 
    margin-left:0px;
}

#btn-ti-2:checked ~ .first { 
    margin-left: -832px;
}

#btn-ti-3:checked ~ .first { 
    margin-left: -1664px;
}

/*Iterative process Slideshow Buttons*/

#btn-ip-1:checked ~ .first { 
    margin-left:0px;
}

#btn-ip-2:checked ~ .first { 
    margin-left: -832px;
}

#btn-ip-3:checked ~ .first { 
    margin-left: -1664px;
}

#btn-ip-4:checked ~ .first { 
    margin-left: -2496px;
}

#btn-ip-5:checked ~ .first { 
    margin-left: -3328px;
}

#btn-ip-6:checked ~ .first { 
    margin-left: -4160px;
}

#btn-ip-7:checked ~ .first { 
    margin-left: -4992px;
}

/*Target Group Slideshow Buttons*/

#btn-tg-1:checked ~ .first { 
    margin-left:0px;
}

#btn-tg-2:checked ~ .first { 
    margin-left: -832px;
}

/* WORKS SLIDESHOWS */

/*TravelBud Slideshow Buttons*/

#btn-travelbud-1:checked ~ .first { 
    margin-left:0px;
}

#btn-travelbud-2:checked ~ .first { 
    margin-left: -832px;
}

#btn-travelbud-3:checked ~ .first { 
    margin-left: -1664px;
}

#btn-travelbud-4:checked ~ .first { 
    margin-left: -2496px;
}

/*Mario & Luigi's Pizzas Slideshow Buttons*/

#btn-pizza-1:checked ~ .first { 
    margin-left:0px;
}

#btn-pizza-2:checked ~ .first { 
    margin-left: -832px;
}

#btn-pizza-3:checked ~ .first { 
    margin-left: -1664px;
}

#btn-pizza-4:checked ~ .first { 
    margin-left: -2496px;
}

/*The Revoir Slideshow Buttons*/

#btn-revoir-1:checked ~ .first { 
    margin-left:0px;
}

#btn-revoir-2:checked ~ .first { 
    margin-left: -832px;
}

#btn-revoir-3:checked ~ .first { 
    margin-left: -1664px;
}

#btn-revoir-4:checked ~ .first { 
    margin-left: -2496px;
}

/*Kadech Slideshow Buttons*/

#btn-kadech-1:checked ~ .first { 
    margin-left:0px;
}

#btn-kadech-2:checked ~ .first { 
    margin-left: -832px;
}

#btn-kadech-3:checked ~ .first { 
    margin-left: -1664px;
}

#btn-kadech-4:checked ~ .first { 
    margin-left: -2496px;
}

#btn-kadech-5:checked ~ .first { 
    margin-left: -3328px;
}

#btn-kadech-6:checked ~ .first { 
    margin-left: -4160px;
}