:root {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  --text:rgb(247, 188, 120);
  --backgound: rgb(15, 26, 89);
  --backgoundlighter: rgb(24, 39, 123);
  --primary:rgb(215, 186, 152);
  --secondary:rgb(175, 46, 28);
  --accent:rgb(209, 76, 24);

  --font-scale: 1.333;
  --p: 1rem;
  --h5: calc(var(--p) * var(--font-scale));
  --h4: calc(var(--h5) * var(--font-scale));
  --h3: calc(var(--h4) * var(--font-scale));
  --h2: calc(var(--h3) * var(--font-scale));
  --h1: calc(var(--h2) * var(--font-scale));
  --small: calc(var(--p) / var(--font-scale));
}
a, a:hover,a:active,a:visited{
  color: var(--accent);
}
body{
    background-color: var(--backgound);
    color: var(--text);
    margin: 0;
    line-height: 2;
}
nav{
    position: sticky;
    top: 0;
    z-index: 100;
}
nav ul{
    font-weight: bold;
    justify-content: right;
    display:flex;
    margin: 0;
    padding: 0;
    background-color: var(--secondary);
    list-style-type:none ;
}
#myLinks{
  display: flex;
}

nav ul img{
  margin-right: auto;/**/
  max-height:50px;
  cursor: pointer;
}

nav ul div li a {
  color: var(--primary) !important; 
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  height: 50px;
  box-sizing: border-box;
}

nav ul div li a:hover {
  background-color: var(--primary) !important;
  color: var(--secondary)!important;
}
nav ul div li a.active {
  background-color: var(--accent)!important;
}
.hamburger {
  display: none;
}

h1, h2, h3, h4, h5{
  font-family: "Lexend", sans-serif;
  /*font-weight: bold;*/
}
h1{
  font-size: var(--h1);
}
h2{
  font-size: var(--h2);
  margin-bottom: 20px;
}
h3{
  font-size: var(--h3);
}
h4{
  font-size: var(--h4);
}
h5{
  font-size: var(--h5);
}
p{
  font-size: var(--p);
}
.background_image{
  background-image: url(Images/banner.jpg);
  height: 70vh;

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
  opacity: 0.65;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
/* gradient*/
.gradient-overlay {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80%; 
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 50%,
    var(--backgound) 99%
  );
  pointer-events: none; 
}

.name{
  text-align: center;
  display: inline-block;
  /*background-color: rgba(255, 198, 132, 0.431);*/
  color: var(--backgound);
  padding: 10px;
  margin: 5px;
  font-size: 40px;
  letter-spacing: 10px;
}
.main_content{
  box-sizing: border-box;
  
  width: 1000px;
  max-width: 100%;
  margin: 30px auto;

  min-height: 100vh;
}
.subsection{
  margin: 20px 0px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.subsection_main{
  background-color: var(--backgoundlighter);
  align-items: center;
  border-radius: 11px;
  /*padding: 20px;*/
  margin: 5px 0px;
  display: flex;
  flex-direction: row;
}
.subsection_main.column{
  flex-direction: column;
  padding: 20px;
  gap: 10px;
}
.subsection img,.subsection video{
  height: 100%;
  width: auto;
  /* max-height: 30vh; */
  object-fit: cover;
  flex: 0 1 40%;
  min-width: 250px;  
  max-width: 500px;
  border-radius: 0;
}

/*the worst code in the history of css*/
.subsection img.landscape,.subsection video.landscape{
  height: 100%;
  width: auto;
  /* max-height: 30vh; */
  object-fit: cover;
  flex: 1 1 40%;
  min-width: 250px; 
  max-width: 66%;
  border-radius: 0;
}

.subsection_main:not(.column):has(> img + div) img,.subsection_main:not(.column):has(> video + div) video {/* media is left, text is right */
  border-bottom-left-radius: 11px;
  border-top-left-radius: 11px;
}
.subsection_main:not(.column):has(> div + img) img,.subsection_main:not(.column):has(> div +video) video {/* media is right, text is left */
  border-bottom-right-radius: 11px;
  border-top-right-radius: 11px;
}

.subsection .column img, .subsection .column video {
max-width: 85%;
max-height: 50vh;
}

.subsection_main:not(.column) > div{
  padding: 20px;
  flex: 1;
}
.subsection_main.column > div{
text-align: center;
}


.button,.button:hover,.button:visited,.button:active{
  background-color: var(--accent);
  color: var(--backgound);
  border-radius: 3px;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  
  padding: 5px 15px;
  margin: 10px 3px ;
  font-size: 20px;

  text-align: center;
  vertical-align: middle;
  width: 220px;
}
.button:hover{
  text-decoration: underline;
  text-decoration-thickness: 3px;
  font-weight: 700;
}

/*          FOOTER        */

footer{
  background-color: var(--secondary);
  padding: 10px;

  max-width: 100%;
  overflow: hidden;

  display: grid;
  align-items: center;
  justify-items: center;
  padding: 20px;
  gap: 20px;
  
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: "copy copy eml eml" "yt ig fb in";

  font-size: min(30px, 4vw);

  user-select: none;/*Some high-tech anti-scraping technology makes it not great for copy-pasting*/
}

footer #eml, footer .copy{
  line-height: normal;
}

footer .copy{grid-area: copy;}
footer #eml{grid-area: eml;}
footer .yt{grid-area: yt;}
footer .ig{grid-area: ig;}
footer .fb{grid-area: fb;}
footer .in{grid-area: in;}

footer div span:nth-child(2n + 1), footer div span:nth-child(3n + 1) {
    font-size: 0px;
}


.contact,.contact:hover,.contact:visited,.contact:active{
  background-color: var(--accent);
  color: var(--backgound);
  border-radius: 3px;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  
  padding: 2px 15px;
  margin: 3px;
  margin-left: 15px;
  font-size: 20px;

  text-align: center;
  vertical-align: middle;
  width: 170px;

}
.contact img{
  float: left;
  width: auto;
  height: 30px;
  margin-top: 5px;
}

/*          /FOOTER        */

@media (max-width: 1060px) {
  .main_content {
    width: 96%;
  }

  footer{
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "copy copy" "eml eml" "yt ig" "fb in";
  }
}
@media (max-width: 700px){
  /* .subsection_main{
    flex-direction: column;
  } */
  .hamburger {
    display: block;
    height: 50px;
    box-sizing: border-box;
    background: none;
    border: none;
    text-decoration: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--primary);
    padding: 0px 13px;
  }
  #myLinks{
    display: none;
    flex-direction: column;
    width: 100%;
  }
  nav ul{
    flex-direction: column;
    flex-direction: row;
  }
}

@media (max-width: 500px) {
  footer{
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "eml" "yt" "ig" "fb" "in";
  }
}