body {
  margin: 0 0 0 0;
  padding: 4px 5vw 4px 5vw;
  text-size-adjust: none;
  background-color: #fffefe;
  text-rendering: optimizeLegibility;
}

#center {
  text-align: center;
  border-bottom: solid 1px #000;
}

myViews a {
  display: inline-block;
  text-decoration: none;
  color: #422;
}

myViews a:hover, #crowLinkBack:hover, #crowLinkLanding:hover {
  color: orangeRed;
}

myViews a:visited, #crowLinkBack:visited, #crowLinkLanding:visited {
  color: #644;
}

myViews a:active {
  color: #fff;
}

history-logs {
  margin-top: 0;
  padding-top: 0;
  margin-left: 12%;
  font-size: 20px;
  font-size: 3vw;
}

.ncIndicator {
  font-size: 40px;
  font-size: 3.4vw
}

#mainMenu {
  font-size: 30px;
  font-size: 3.5vw;
}

#mainMenu a {
  margin: 0 2.5vw 0 2.5vw;
}

myViews {
  font-size: 25px;
  font-size: 2.7vw;
}

.xss, .csrf {
  font-size: 2em;
  font-size: 4.5vw;
  text-align: left;
  width: 100%;
  padding: 2% 0 2% 1%;
  color: #443;
  background-color: #fff;
  font-family: "Constantia", "Times New Roman", "Georgia", "Palatino", serif;
}

.xss p, .csrf p, .halfCenter {
  color: #555;
  font-style: verdana, georgia, serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased !important;
  -moz-font-smoothing: antialiased !important;
  text-rendering: optimizelegibility !important;
  letter-spacing: .05em;
  font-size: 0.8em;
  font-size: 4vw;
}

.br {
  display: block;
  margin-bottom: 4%;
}

.xssReport, .csrfReport {
  background-color: #eee;
  word-wrap: break-word;
  padding: 1% 1% 1% 1%;
  margin: 4% 3% 5% 4%;
  height: auto;
  overflow-y: scroll;
  border: solid 3px #000;
}

#writeupsContainer a {
  text-decoration: underline;
}

#nonCenter {
  font-size: 2em;
  font-size: 4.5vw;
}

#nonCenter a {
  margin: 0 0 1% 0;
  text-decoration: none;
  border-bottom: dotted 1px blue;
}

#nonCenter > h2 {
  padding: 1% 0 0 0;
  margin: 1% 0 0 0;
  color: #777;
}

#nonCenter > a {
  font-size: 1.2em;
  font-size: 3vw;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  margin-top: 0;
}

.center {
  text-align: center;
}

.halfCenter {
  margin: 0 3% 0 5%;
}

#aboutPhoto {
  border-radius: 1% 1% 1% 1%;
  background-image: url("./resources/network.jpg");
  object-fit: fill;
  background-position: center;
}

#aboutPhoto > h6 {
  margin: 2%;
  padding: 0;
  padding-top: 10px; 
}

#aboutPhoto > h4 {
  padding-bottom: 12px;
}

#aboutPhoto > img {
  margin-bottom: 1%;
  height: auto;
  width: 50%;
}

#xss a, #csrf a, .xss a, .csrf a {
  text-decoration: underline;
}

.fastframeworkCode {
 color: green;
 font-family: 'Monaco', monospace;
 white-space: pre-wrap;
}

#jexIframe {
  height: 50vw;
  width: 98%;
  border: none;
  overflow: hidden;
}

.aToBlock {
  display: block;
  font-size: 2.9vw;
  margin: 2% 2% 0 0;
}

.images {
  display: inline-block;
  height: auto;
  width: 40%;
}

.imagesParent {
  text-align: center;
}

#w3schoolsImageLandscape {
  display: none;
  width: 80%;
}

#w3schoolsImagePortrait {
  display: inline-block;
}

#w3schoolsPayload {
  width: 80%;
}

.donotshow {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

#landingPage > header {
  height: 70vw;
  width: 90vw;
  border: solid 1px #000;
  border-radius: 2% 2% 2% 2%;
  background-image: url("./resources/cybersecurity.jpg");
  background-position: center;
  background-size: cover;
}

#four04 {
  position: absolute;
  font-size: 30px;
  font-size: 2.2vw;
  top: 22%;
  left: 4%;
  color: #000;
  background-color: rgba(255,255,255,0.5);
  padding: 1%;
}

#crow {
  margin: -8%;
  padding: 0 0 0 0;
  position: relative;
  height: auto;
  width: 114%;
  margin-top: 20%;
}

#crowLinks {
  font-size: 5vw;
}

#crowLinkBack {
  position: absolute;
  top: 280%;
  left: 150%;
  background: rgba(255,255,255,0.5);
  text-decoration: none;
  color: #422;
  padding: 0 2% 0 2%;
}

#crowLinkLanding {
  position: absolute;
  top: 280%;
  left: 0;
  background: rgba(255,255,255,0.5);
  text-decoration: none;
  color: #422;
  padding: 0 2% 0 2%;
}

.githubIcon {
  height: 14%;
  width: 14%;
  margin-top: 2%;
}

.projectsIcon, .twitterIcon, .elhackernetIcon, .telegramIcon,
.emailIcon {
  height: 14%;
  width: 14%;
  background-color: #fffdfd;
  margin-top: 2%;
}

.elhackernetIcon {
  height: 15%;
  width: 15%;
}

#icons {
  margin-left: 2%;
}

#icons > a {
  display: inline;
  margin-right: 1%;
}

#crowLinkBack:active, #crowLinkLanding:active {
  color: rgba(255,255,255,0.5);
}

#landingPage {
  list-style-position: inside;
}

@media (min-width: 0px) and (orientation:landscape) {

  body {
    font-size: 1.1vw;
  }

  history-logs, myViews, .aToBlock, #four04 {
    font-size: 1.1vw;
  }

  .ncIndicator, #mainMenu, .xss p, .csrf p, .halfCentered, #nonCenter > a {
    font-size: 1.3vw;
  }

  .xss, .csrf, #nonCenter, #crowLinks {
    font-size: 1.6vw;
  }

  #landingPage > * {
    text-align: left;
  }

  #landingPage > ul {
    padding-left: 15%;
  }

  #w3schoolsImagePortrait {
    display: none;
  }

  #w3schoolsImageLandscape {
    display: inline-block;
    width: 55%;
  }

  #w3schoolsPayload {
    width: 35%;
  }

  .xss, .csrf {
    /* font-size: 0.9em;
    font-size: 1.1vw; */
  }

  .xss h1, .csrf h1 {
    /* font-size: 1.5em;
    font-size: 1.5vw; */
    font-family: arial;
  }

  .xss h4, .csrf h4 {
    /* font-size: 1.3em;
    font-size: 1.3vw; */
  }

  #aboutPhoto {
    width: 50%;
  }

  #aboutPhoto > img {
    height: auto;
    width: 15%;
  }

  #aboutPhoto > h6 {
    margin: 2%;
    padding: 2%;
  }

  #aboutPhoto > h4 {
    margin: 1%;
  }

  .halfCenter {
    float: right;
    vertical-align: top;
    margin-top: -17%;
    width: 45%;
    color: #555;
    font-size: 1.1vw;
  }

  .br {
    margin-bottom: 2%;
  }

  .projectsIcon, .twitterIcon, .elhackernetIcon, .telegramIcon,
  .emailIcon, .githubIcon {
    height: 7%;
    width: 7%; 
  }

  #icons {
    margin-left: 6%;
  }

  #icons > a {
    margin-right: 9%;
  }

  #landingPage > header {
    background-image: url("./resources/computer.jpg");
    height: 25vw;
    width: 90vw;
    background-size: cover;
  }
  
  #landingPage {
    text-align: center;
  }

  #landingPage > h1 {
    /* font-size: 2em;
    font-size: 2vw; */
  }

  #four04 {
    /* font-size: 20px;
    font-size: 1.1vw; */
  }

  #crow {
    margin-top: 0;
    height: 60vw;
  }

  #crowLinkLanding, #crowLinkBack {
    top: 190%;
  }
}

html {
  font-family: 'Oxygen', serif;
}