* {
  box-sizing: border-box;
}

:root {
  --header-height: 84vh;
  --hover-img-size: 9.85vw;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

body {
  font-family: Inter, Montserrat;
  margin: 0px;
  background-color: #333333;
  background-repeat: no-repeat;
  background-size: contain;
}

.background-img {
  /*
  styling for the background image
  align it to the middle and don't squish it when resizing screen
  */
  position: absolute;
  z-index: -100;
  top: 0px;
  overflow: hidden;
  object-fit: cover;
  width: 100%;
  height: 100vh;
}

.header {
  /*
  styling for the black box on the top screen
  */
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.83);
  margin: 8vh;
  height: var(--header-height);
}

.header img {
  /* display my image*/
  position: relative;
  display: block;
  height: 35vw;
  width: auto;
}

/*
set text and link styles
*/

h1 {
  font-size: 55px;
  color:#F24535;
}

h2 {
  font-size: 200%;
  color:#EA502E;
}

h3 {
  font-size: 180%;
  color:#EA502E;
}

p {
  font-size: 30px;
  color: white;
}

a:link {
  color: #F24535;
}

a:visited {
  color: green;
}

#navbar {
  /*
  styling for navigation menu
  */
  overflow: hidden;
  padding: 20px 10px;
  transition: 0.4s;
  position: fixed;
  top: 0;
  z-index: 99;
  border-radius: 6px;
}

.set-text {
  /*
  set the text for the inital screen
  this should be done with the p tag but idk i couldnt make it work
  */
  position: relative;
  color: white;
  font-family: Montserrat;
  font-weight: bold;
  font-size: 35px;
}

.button {
  /*
  styling for buttons
  */
  padding: 8px;
  font-size: 35px; 
  border-radius: 4px;
  background-color: rgba(0,0,0,0);
  border: none;
  color: white;
  font-family: Montserrat;
  font-weight: bold;
}

.button:hover {
  background-color: #EA502E;
}

.header-right {
  float: right;
  padding: 3vh;
}

/*
set sttyles for containers on website
*/

.container {
  padding: 7vh;
  padding-top: 2vh;
  background-color: #222222;
}

.light-container {
  padding: 1vw;
  padding-top: 2vh;
  background-color: #3D3D3D;
}

/*
set styless for containers and styles for when containers are hovered over
*/

.hover-container {
  background-color: white;
  transition: transform .2s;
}

.hover-bigzoom:hover {  
  -ms-transform: scale(1.8); /* IE 9 */
  -webkit-transform: scale(1.8); /* Safari 3-8 */
  transform: scale(1.8);
}

.hover-smallzoom:hover {  
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2);
}
.hover-hugezoom:hover {  
  -ms-transform: scale(2.9); /* IE 9 */
  -webkit-transform: scale(2.9); /* Safari 3-8 */
  transform: scale(2.9);
}

/* 
set different styles for hoverd containers, 
eg smaller images or more transparent images
*/

.small-image-container {
  width: 50%;
  height: 50%;
  padding: 2px;
}

.small-image-container:hover .image-text {
  opacity: 1;
}

.small-image-container:hover .image {
  opacity: 0.6;
}

.small-image-container:hover .less-opaque-image {
  opacity: 0.3;
}

.big-image-container {
  padding: 2px;
  width:100%;
}

.big-image-container:hover .image-text {
  opacity: 1;
}

.big-image-container:hover .image {
  opacity: 0.6;
}

.big-image-container:hover .less-opaque-image {
  opacity: 0.3;
}

/*
force images to fit in containers
*/
.image-fit {
  width:100%;
  height:100%;
  object-fit: contain;
}

.small-image-fit {
  width:120px;
  height:100%;
  object-fit: contain;
}

.less-opaque-image:hover {
  opacity: 0.3;
}

/*
text overlaid on hovvered images
*/

.image-text {
  position: absolute;
  opacity: 0;
  top: 45%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

/*
styling for verticval columns on site
*/
.column {
  float: left;
  width: 45%;
  padding: 10px;
  border: 2px solid #222222;
  display: table-cell;
}

/* .colum-amt-2 {
  width: 46%;
}

.colum-amt-4 {
  width: 23%;
} */

.row:after {
  width: 3%;
  content: "";
  display: table;
  clear: both;
}

.vertical-box {
  background-color: #222222;
  padding: 0.5vh;
  border: 1px solid black;
}

.vertical-box:hover {
  border: 1px solid #F24535;
}

/*
set font size to a relative amount
should be renamed but i don't feel like going through the html file
*/
.test-font-size {
  font-size: 125%;
}

/*
add css animations to title screen
*/
.animation-container {
  position: absolute;
  left: 26vw;
  bottom: 20vh;
  width: 400vw;
}

#slide-title {
  font-size: 4vw;

  position: relative;
  overflow: hidden;
  left: 500px;
  opacity: 0%;
  animation: slide 0.3s forwards;
}
/*

TODO: FIX SPAGHETTI CODE

*/

.slide-subheading {
  font-size: 3vw;
  position: relative;
  overflow: hidden;
  opacity: 0%;
  animation: slide 0.3s forwards;
  left: 400px; 
  /*
    animation left, not text left. Using pixels instead of 
    % so that the animation looks the same on all screens
  */
  margin-left: 5vw;
}

#slide-subheading-delay1 {
  animation-delay: 0.15s;
}

#slide-subheading-delay2 {
  animation-delay: 0.25s;
}

#slide-subheading-delay3 {
  animation-delay: 0.35s;
}

#slide-subheading-delay4 {
  animation-delay: 0.45s;
}

@keyframes slide {
  100% { opacity: 100%; left: 0; }
}

.hide-on-tall-screen {
  visibility: visible;
}

.horizontal-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  text-align: center;
}

/*
  change layout for mobile/tall screens
*/

@media only screen and (max-aspect-ratio: 1/1), (pointer:coarse) and (orientation: portrait ) {
  :root {
    --hover-img-size: 10.29vw;
  }
  .header {
    margin: 0px;
    background-color: rgba(0,0,0,0.7);
  }
  .set-text {
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.83);
  }
  .header img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0vh;
    height: 80vw;
    top: 6%;
  }
  .background-img {
    height: var(--header-height);
  }
  .animation-container {
    left: 2vw;
    bottom: 20vh;
    width: 200vw;
  }
  .hide-on-tall-screen {
    display: none;
  }
  .fit-to-tall-screen {
    width: 46%;
  }
  #slide-title {
    font-size: 8vw;
  }
  .slide-subheading {
    font-size: 6.5vw;
  }
  .hover-hugezoom:hover {  
    -ms-transform: scale(3.6) translate(40%); /* IE 9 */
    -webkit-transform: scale(3.6) translate(40%); /* Safari 3-8 */
    transform: scale(2.3) translate(25%);
  }
  @media (pointer:coarse) and (orientation: portrait ) {
    .test-font-size {
      font-size: 250%;
    }
  }
}