/* NAME:  Brian Carpenter */
/* FILE NAME: styles.css */
/* DATE: 08/06/2023 */

/* import google font here */
@import "https://fonts.googleapis.com/css2?family=Sofia";
@import "https://fonts.googleapis.com/icon?family=Material+Icons";

/* this is the main stylesheet for my website */
* {
  box-sizing: border-box;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Sofia", sans-serif;
  max-height: 100%;
}

body {
  background-color: rgba(255,255,255,.9);
  margin: 0;
  padding: 0;
  min-height: 100%;
  display: block;
}

/* header styles */
.header {
  color: #000;
  border: 10px solid rgba(0,0,255,1);
  padding: 0;
  margin: 0;
  font-size: 42px;
  text-align: center;
  justify-content: center;
  vertical-align: middle;
}

.header-table {
  width: 100%;
  height: auto;
}

.header-table td {
  display: table-cell;
  vertical-align: middle;
  justify-content: center;
  text-align: center;
}

.header-table h1 {
  font-size: 50px;
}

.header-block {
  display: none;
}

/* header image styles */
.img-logo {
  max-height: 20vh;
  border-radius: 15px;
}

.img-me {
  max-height: 20vh;
  border-radius: 15px;
}

.img-super {
  max-height: 20vh;
  border-radius: 15px;
}

/* navigation bar style */
.nav {
  display: flex;
  border-top: 0px;
  border-bottom: 0px;
  border-left: 10px;
  border-right: 10px;
  border-style: solid;
  border-color: rgba(0,0,255,1);
  background-color: #333;
}

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav li {
  float: left;
}

.nav li a {
  display: block;
  color: whitesmoke;
  text-align: center;
  font-size: 24px;
  padding: 14px 16px;
  text-decoration: none;
}

.nav li a:hover {
  background-color: #ddd;
  color: black;
}

.nav li a:active {
  background-color: green;
  color: black;
}

.content {
  border: 10px solid rgba(0,0,255,1);
}

.main-table {
    color: #000;
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 60vh;
  }

.main-table-heading {
    font-size: 36px;
    text-shadow: 4px 4px 2px rgba(0,0,0,0.6);
    text-align: center;
    text-decoration: underline;
}

.main-table-links {
    font-size: 24px;
    text-align: center;
}

.main-table-body {
  font-size: 24px;
}

.form-table-body {
  font-size: 24px;
  text-align: center;
}

#fname:focus {
  border-color: #000;
}

#tblTechnical {
  color: #000;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 24px;
}

.footer {
  border-left: 10px;
  border-right: 10px;
  border-bottom: 10px;
  border-style: solid;
  border-color: rgba(0,0,255,1);
}

.footer-table {
  color: #000;
  font-size: 24px;
  margin: 0;
  padding: 0;
  max-height: 15vh;
  width: 100%;
}

.footer-table-left {
    text-align: left;
    max-width: 25vw;
}

.footer-table-right {
    text-align: right;
}

/* anchor{link} styles */
a {
  text-decoration: none;
  color: rgba(255, 0, 0, 1);
}

/* paragraph */
p {
padding: 0;
margin: 0;
}

input[type=text]:focus {
  background-color: lime;
}

input[type=text]:focus-visible {
  background-color: skyblue;
}

/* Phone Viewport Style Rule Adjustments */
@media only screen and (max-width: 449px) {  
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }

  .nav li {
    float: none;
    height: fit-content;
    width: 100%;
  }

  /* hide header table (show header block instead) */
  .header-table {
    display: none;
  }
  .header-block {
    display: block;
  }


  /* hide content-table-contact (show content-block-contact instead) */
  .content-table-contact {
    display: none;
  }

  .content-block-contact {
    display: block;
    justify-content: center;
    text-align: center;
  }

  #iframe-contact {
    width: 75vw;
    height: 15vh;
  }

  #form-request-date {
    visibility: hidden;
  }

  /* hide content-table-profile (show content-block-profile instead) */
  .content-table-profile {
    display: none;
  }

  .content-block-profile {
    font-size: 24px;
    display: block;
    justify-content: center;
    text-align: center;
  }
}

/* Tablet Viewport Style Rule Adjustments */
@media only screen and (min-width: 450px) and (max-width: 767px) {  
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}

  .nav li {
    float: none;
    width: 100%;
  }

  /* hide header table (show header block instead) */
  .header-table {
    display: none;
  }
  .header-block {
    display: block;
  }

  /* hide content-block-contact (show content-table-contact instead) */
  .content-table-contact {
    display: inline-table;

    color: #000;
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 60vh;
  }

  .content-block-contact {
    display: none;
  }

  #iframe-contact {
    width: 75vw;
    height: 15vh;
  }

  #form-request-date {
    visibility: hidden;
  }

  /* hide content-table-profile (show content-block-profile instead) */
  .content-table-profile {
    display: none;
  }

  .content-block-profile {
    display: block;
  }

}

/* Desktop Viewport Style Rule Adjustments */
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

  .nav li {
    float: left;
  }

  /* hide header block (show header table instead) */
  .header-table {
    display: inline-table;
  }
  .header-block {
    display: none;
  }

  /* hide content-block-contact (show content-table-contact instead) */
  .content-table-contact {
    display: inline-table;
  
    color: #000;
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 60vh;
}

  .content-block-contact {
    display: none;
  }

  #iframe-contact {
    width: 75vw;
    height: 15vh;
  }

  #form-request-date {
    visibility: visible;
  }

  /* hide content-block-profile (show content-table-profile instead) */
  .content-table-profile {
    display: inline-table;
  
    color: #000;
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 60vh;
  }

  .content-block-profile {
    display: none;
  }

}