/*
 colors: #fff, #222, #4b4e6d, #84dcc6, #95a3b3, #e1bb80 
 */

*{ margin:0; padding:0; box-sizing:border-box; }

body, html { padding:0; margin:0; height:100%; font-family:'Segoe UI', sans-serif; }


/** BODY WRAPPER **/
.wrapper { display:flex; flex-direction:column; min-height:100%;  }


/** HEADER **/
header { text-align:center; padding:0; margin:0; flex-grow:0; flex-shrink:0; background-color:#222; width:100%;  }
header h1 { font-size:4em; font-weight:700; color:#e1bb80; }


/** MAIN BODY/RANDOM ELEMENTS **/
main { padding:0; flex-grow:1; text-align:center; }
section { padding:60px 0; }
section:nth-child(odd), .wh-card { background-color:#fff; color:#000; }
section:nth-child(2), section:nth-child(6), .ultravio-card { background-color:#4b4e6d; color:#fff; }
section:nth-child(4), .tifblue-card { background-color:#84dcc6; }
section:nth-child(8), .cadetgr-card { background-color:#95a3b3; }
section > .wrapper { max-width:1180px; display:grid; padding:0 40px; grid-gap:20px 20px; justify-content:center; margin:auto; }
section h2 { font-size:3em; margin:-10px 0 20px; }
.card { min-width:200px; min-height:200px; padding:10px; border-radius:10px; box-sizing:border-box; }
section .description { text-align:left; }
.show-hide-div { overflow:hidden; transition:height 300ms; text-align:left; }
.show-hide-btn { background-color:inherit; padding:10px; border:0; font-weight:600; color:#000fff; display:none; }
.show-hide-btn:hover { cursor:pointer; }
ul { list-style:none; padding:0; }
a { text-decoration:none; color:#000fff; }
a:hover { text-decoration:underline; }
.btn { border-radius:6px; padding:10px; border:0; font-weight:600; }
.btn:hover { cursor:pointer; }
form { margin-bottom:20px; }
p { margin-bottom:10px; }


/** FOOTER **/
footer { background-color:#222; font-weight:700; color:#e1bb80; text-align:center; padding:20px 0; flex-grow:0; flex-shrink:0; margin:0; }


/** SECTION GRIDS **/
/** columns **/
#sec_1 > .wrapper, #sec_4 > .wrapper { grid-template-columns:repeat(3, auto); justify-items:center; }
#sec_2 > .wrapper, #sec_3 > .wrapper, #sec_5 > .wrapper, #sec_6 > .wrapper, #sec_7 > .wrapper, #sec_8 > .wrapper { grid-template-columns:repeat(2, auto); justify-items:center; }
/** rows **/
#sec_3 > .wrapper, #sec_8 > .wrapper { grid-template-rows:auto; }
#sec_1 > .wrapper, #sec_2 > .wrapper, #sec_5 > .wrapper, #sec_6 > .wrapper { grid-template-rows:repeat(2, auto); }  
#sec_4 > .wrapper, #sec_7 > .wrapper { grid-template-rows:repeat(3, auto); }
/** cells **/
#sec_1 .description { grid-row:1 / span 2;  grid-column:3; }
#sec_2 .description { grid-row:1 / span 2;  grid-column:1; }
#sec_4 .description { grid-row:1 / span 3;  grid-column:3; }
#sec_5 .description { grid-column:1; }
#sec_6 .description { grid-column:2; }
#sec_7 .description { grid-row:1; grid-column:1 / span 2; }
#sec_8 .description { grid-row:1 / span 2;  grid-column:1; }
#sec_4 .card-2 { grid-row:1 / span 2; grid-column:2; }
#sec_8 .card { grid-column:2; }


/** SECTION 1: Drag and Drop **/
#sec_1 .card { width:140px; height:160px; text-align:center; align-content:center; }
#sec_1 #gopha_logo:hover { cursor:move; }


/** SECTION 2: Contenteditable **/
#sec_2 .card { text-align:left; width:400px; height:200px; overflow:hidden; }


/** SECTION 3: HTML/CSS page use **/
#sec_3 .card { text-align:center; }


/** SECTION 4: Random CSS Stuff **/
#sec_4 { background-image:url("../images/gophanet_logo_flat.png"); background-repeat:no-repeat; background-attachment:fixed; background-position-x:5%; }
#sec_4 .card { text-align:left; }
#sec_4 .card-1 { width:200px; height:200px; }
#sec_4 .over-card { position:absolute; width:200px; height:200px; max-width:500px; max-height:500px; resize:both; overflow:hidden; margin:-10px 0 0 -10px; background:linear-gradient(180deg, rgba(75, 78, 109, 0.5), rgba(75, 78, 109, 1) 95%); }
#sec_4 .over-card:hover { outline: thick dashed #000; outline-offset:5px; border-radius:10px; cursor:pointer; }
#sec_4 .card-2 { width:400px; box-shadow:0 5px 9px rgba(0, 0, 0, 0.6);  }
#sec_4 .card-2 > p > strong { text-shadow: 5px 5px 6px rgba(0, 0, 0, 1); }
.txt-ellipsis { width:230px; text-overflow:ellipsis; overflow:hidden; text-wrap:nowrap;  }
.txt-clip { width:235px; text-overflow:clip; overflow:hidden; text-wrap:nowrap; }
.txt-ellipsis:hover, .txt-clip:hover { cursor:pointer; overflow:visible; }
.txt-word-wrap { word-wrap:break-word; }
/* 
* CREDIT: This font was created by Jess Latham, Blue Vinyl Fonts
* */
@font-face { font-family: "GothicUltraOTRegular"; src: url("../fonts/gothic_ultra_ot-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }
.txt-font-face { font-family:'GothicUltraOTRegular', 'Segoe UI', serif; font-size:4em; margin:0; }
.box-outline { text-align:center; width:70px; height:50px; padding:3px; background-color:#95a3b3; outline: thick double #000; outline-offset:5px; margin-top:20px; margin-left:10px; }


/** SECTION 5: Forms 1 **/
#sec_5 .card { display:flex; flex-direction:column; text-align:left; }
#sec_5 #validateBtn { margin-bottom:20px; width:250px; }
#sec_5 #colorPicker { width:120px; box-sizing:inherit; padding:3px; } 
#sec_5 #colorPickerField { width:100px; font-size:1.6em; font-weight:bold; }
#sec_5 #fileField { padding:3px 0; color:#fff; font-style: italic; }
#sec_5 #numberField { width:60px; }


/** SECTION 6: Forms 2 **/
#sec_6 .card { display:flex; flex-direction:column; text-align:left; color:#000; }
#sec_6 #progressReset { display:none; margin-bottom:20px; width:250px; }
#sec_6 #rangeSlider:hover { cursor:pointer; }
#sec_6 #rangeMeter { padding:0; width:60px; height:30px; background-image:  linear-gradient(180deg, #fff, #fff 95%); border-radius:6px; }
#sec_6 #rangeMeter::meter-bar { background:#000fff; }
#sec_6 #rangeMeter::-moz-meter-bar { background:#000fff; }
#sec_6 #rangeMeter::-webkit-meter-bar { background:#fff; height:30px; border-radius:6px; }
#sec_6 #rangeMeter::-webkit-meter-optimum-value { background:#000fff; }


/** SECTION 7: Animation, Canvas with Transform **/
#sec_7 .description { text-align:center; }
#sec_7 .card { width:320px; padding:10px 5px !important; }
#sec_7 .card-animation { overflow:hidden; }
#sec_7 .card-animation #resetAniLink { display:none; }
#sec_7 .card-canvas { display:grid; grid-template-columns:repeat(2, auto); grid-template-rows:repeat(5, auto); justify-content:center; }
#sec_7 .card-canvas > h3 { grid-row:1; grid-column:1 / span 2; padding-bottom:10px; }
#sec_7 .card-canvas > #graph_sq { grid-row:2; grid-column:1 / span 2; border:1px solid #000; background-color:#fff; }
#sec_7 .card-canvas > #canvasMiddle { grid-row:3; grid-column:1 / span 2; }
#sec_7 .card-canvas > #canvasLeft { grid-row:4; grid-column:1; }
#sec_7 .card-canvas > #canvasRight { grid-row:4; grid-column:2; }
#sec_7 .card-canvas > #canvasBottom { grid-row:5; grid-column:1; }
#sec_7 #enter_a_number2 { display:none; }
.warn-blink {color:#ff0000; animation:blinker 1s step-end infinite; }
@keyframes blinker { 50% { opacity:0; } }
.warn-field { background-color:#ffb1b1; border:1px solid #ff0000; }


/** SECTION 8: About **/
#sec_8 .card { background-color:#000; text-align:center; width:300px; height:300px; padding:0; }
#sec_8 img { width:300px; height:300px; border-radius:10px; opacity:0.65;  transition:opacity 1s ease-out; }
#sec_8 img:hover { cursor:pointer; opacity:1; }


@media(max-width:991px) { 
    header h1 { font-size:3.3em; }
    section h2 { font-size:2.5em; }
    #sec_1 > .wrapper, #sec_4 > .wrapper { grid-template-columns:repeat(2, auto); }
    #sec_1 .description, #sec_4 .description { grid-row:1 / span 2; grid-column:2; }
    #sec_4 .card-1 { grid-row:1; grid-column:1; }
    #sec_4 .card-2 { grid-row:2; grid-column:1; }
}

@media(max-width:768px) { 
    section .description { text-align:center; }
    #sec_2 > .wrapper, #sec_4 > .wrapper, #sec_5 > .wrapper, #sec_6 > .wrapper, #sec_7 > .wrapper, #sec_8 > .wrapper { grid-template-columns:auto; }
    #sec_1 .description { grid-row:1; grid-column:1 / span 2; }
    #sec_2 .description, #sec_8 .description { grid-row:1; }
    #sec_4 .description, #sec_6 .description, #sec_7 .description { grid-row:1; grid-column:1; }
    #sec_8 .description p { text-align:left; }
    #sec_2 .card { width:100%; }
    #sec_4 .card-1 { grid-row:2; grid-column:1; }
    #sec_4 .card-2 { grid-row:3; grid-column:1; width:100%; }
    #sec_8 .card { display:none; }
    .show-hide-btn { display:inline-block; }
    .show-hide-div { height:0; }
}

@media(max-width:600px) { 
    #sec_1 > .wrapper, #sec_3 > .wrapper { grid-template-columns:auto; }
    #sec_1 > .wrapper { grid-template-rows:repeat(3, auto); }
    #sec_1 .description { grid-row:1; grid-column:1 ; }
    main p, main form, footer p, .card ul { font-size:.85em; }
    header h1 { font-size:2.8em; }
    section h2 { font-size:2.0em; }
    .txt-font-face { font-size:3em; }
    .btn { padding:6px; }
}