/* Icons */
@font-face {
  font-family: 'iconfont';
  src: url('../icons/font_4875012_n2fqfrdzgb/iconfont.woff2?t=1743191432456') format('woff2'),
       url('../icons/font_4875012_n2fqfrdzgb/iconfont.woff?t=1743191432456') format('woff'),
       url('../icons/font_4875012_n2fqfrdzgb/iconfont.ttf?t=1743191432456') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Root */
:root{
  /* --myRed:#8B4142;
  --myBlue:#41668B;
  --myYellow: #8B8A41; */
  --myGrey:rgb(207, 207, 207);

  --myRed:#9a4041;
  --myBlue:#3f71a2;
  --myYellow: #9d9c41;
}

/* General Settings */
  /* --[General settings] Default Font*/
  .title{
    font-family: "DM Serif Text", serif;
    font-weight: 400;
    font-size: 4em;
  }
  .subtitle{
    font-family: "DM Serif Text";
    font-size: 1.5em;
  }
  h1{
    font-family: "Fira Sans", sans-serif;

    color: var(--myRed);
    font-weight: 900;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 0;
  }
  h2{
    font-family: "Fira Sans", sans-serif;

    color: var(--myRed);
    font-weight: 400;
    font-size: 1.3em;
    margin-top:0;
    margin-bottom: 0;
  }
  h3{
    font-family: "Fira Sans", sans-serif;

    color: var(--myRed);
    font-weight: 400;
    font-size: 1em;
    margin-top:0;
    margin-bottom: 0;
  }
  b{
    font-weight: 400;
  }
  i{
    font-style: italic;
  }
  *{
    font-family: "Fira Sans", sans-serif;
    font-weight: 300;
    font-size: 1em;
    font-style: normal;
    color:black;
  }
  /* --[General Settings] Text Attributes */
  .indented{
    text-indent: 2em;
  }
  .align-justified{
    text-align:justify;
  }
  .align-right{
    text-align: right;
  }
  .align-center{
    text-align: center;
  }
  .comment{
    color: var(--myGrey);
  }
  .small{
    font-size: 0.6em;
  }
  .dark *{
    color:white;
  }
  .bright *{
    color: black;
  }

  /* --[General Settings] Special Attributes */
  .hidden{
    display:none;
  }
  .fullscreen{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.563);

    z-index: 2;
  }
  .fullscreen.active{
    display: block;
  }
  .clickable{
    cursor:pointer;
  }
  
  /* --[General Settings] Body Styling */
  body{
      margin-left:0;
      margin-top:0;
      margin-bottom:0;

      min-height:100svh;
      width:100%;

      font-size:20px;
  }
  button{
      cursor:pointer;
  }

/* Grid */
body>.container{
  display: grid;
  grid-template-areas: 
    'header'
    'main'
    'footer';
  
  width:100%;
  box-sizing: border-box;
}

/* Grid Areas */
header{
  grid-area: header;

  padding-top:2.5em;

  width: 100%;
  height:100svh;
  text-align: center;

  background:url("../imgs/banner.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}
nav{
  grid-area:nav;

  width:2em;
  height:2.5em;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;

  box-sizing: border-box;

  text-align: center;

  background-color:rgba(0, 0, 0, 0.671);
  backdrop-filter: blur(5px);

  position:fixed;
  top:0;
  right:0;
  transition: ease 500ms;

  z-index:1;

  overflow:hidden;

  box-shadow: .2em .2em .2em .2em rgba(0, 0, 0, 0.244);
}
nav.active{
  width:100%;
  right:0%;
  transition-delay: 0ms;
  padding-right: .3em;
}
main{
  grid-area: main;
  width:100%;
}
footer{
  grid-area: footer;

  background-color: var(--myRed);

  padding:1% 3% 1% 3%;
  font-size:0.8em;
}

/* Details */
  /* --[Details]Header */
  header .webname{
    width: 100%;
    margin:0 0 0 0;

    background-color: rgba(0, 0, 0, 0.477);
    backdrop-filter: blur(10px);

    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:center;
    align-items: center;
    gap:1em;

    padding: 1em 0 1em 0;
  }
  header .logo {
    display:inline-block;
    height:6.5em;
  }
  header .title{
    text-align: left;
    color: white;
    margin-top: 0;
    margin-bottom:0;
    width:fit-content;
  }

  /* --Nav Bar */
  nav figure{
    height:100%;
    width: 0;
    opacity: 0;
    margin:0 0 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:.5em;
    transition:ease 300ms;
    overflow: hidden;
  }
  nav.active figure{
    flex:1;
    opacity: 1;
    padding-left: .5em;
  }
  nav .logo{
    height:100%;
    object-fit: contain;
  }
  nav figcaption{
    text-wrap: nowrap;
    overflow: hidden;
    color:white;
  }
  nav .toggle{
    flex-shrink: 0;
    display: block;
    height:4svh;
    width: 2em;
    border: none;
    background-color: black;
    color: white;
    transform: rotate(90deg);
  }
  nav .links{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  nav a{
    display: inline-block;
    height: 90%;
    background-color: var(--myGrey);
    color: black;
    text-decoration: none;

    text-align: center;  
    text-wrap: nowrap;

    transition:width ease 500ms 0ms, background-color ease 200ms 0ms;
    width:0;
  }
  nav.active a{
    transition:width ease 500ms 300ms;
    width:7.5em;
    overflow:hidden;
  }
  nav a:hover{
    background-color: white;
    color:black;
  }
  nav .selected{
    background-color: var(--myRed);
    color:white;
  }
  nav a:first-of-type{
    border-radius: .25em 0 0 .25em  ;
  }
  nav a:last-of-type{
    border-radius: 0 .25em .25em 0  ;
  }

  /* Footer */
    footer *{
      color:white;
      font-size: 1em;
    }
    footer h1{
      font-size: 1.5em;
    }
    footer>.container{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    footer>p{
      margin:3% 0 0 0;  
      text-align: center;
    }
      /* [Footer] --Logo */
      footer .item1{
        width:15em;
      }
      footer .logo{
        width:100%;

        object-fit: contain;
      }
      /* [Footer] --Social Media */
      footer .social_media_list{
        display:flex;
        flex-direction: row;
        justify-content: flex-start;
        gap:0.6em;
      }
      footer .social_media_list>a{
        height: 2em;
      }
      footer .social_media_list>a>img{
        height:100%;
      }
      footer .social_media_list>a>.filled{
        background-color: white;
      }